Lebih Banyak
Unduhan Sumber Kode Terkait Pemrograman Sumber daya untuk membuat situs web Buku dan Tutorial Permainan Seluler Perangkat Lunak Seluler Artikel
Beranda>Tutorial Desain Web>Tutorial CSS

Js dan CSS mewujudkan efek catatan kaki

Penulis：Eve Cole Waktu Pembaruan：2009-06-12 17:46:02
Catatan kaki adalah cara terbaik untuk memberikan lebih banyak informasi kepada pengguna dan juga merupakan pelengkap efektif untuk informasi utama. Catatan kaki biasanya ditemukan di berbagai buku cetak. Namun, karena catatan kaki memiliki manfaat tersebut, tentunya kita juga harus memanfaatkannya di halaman web. Artikel ini memperkenalkan Anda tentang cara mendapatkan efek catatan kaki menggunakan Javascript dan CSS.
skrip java: 
  1.  
    2.  
  2. "teks/javascript" >
    3.  
  3.  
    4.  
  4. // Deskripsi: Gunakan Javascript dan CSS untuk mendapatkan efek catatan kaki
    5.  
  5. // Penulis: CodeBit.cn ( http://www.CodeBit.cn )
    6.  
  6.  
    7.  
  7. var catatan kaki = fungsi ( ) { } ;
    8.  
  8.  
    9.  
  9. catatan kaki.prototipe = {
    10.  
  10.  
    11.  
  11. footNoteClassName : "footnote" , // Nama kelas dari catatan kaki
    12.  
  12. footNoteTagName : "span" , // Nama tag dari catatan kaki
    13.  
  13. footNoteBackLink : " [back]" , // Kembali ke tautan
    14.  
  14.  
    15.  
  15. format : fungsi ( contentID, footnoteID )
    16.  
  16. {
    17.  
  17. if ( ! document.getElementById ) return false ;
    18.  
  18.  
    19.  
  19. var konten = dokumen.getElementById ( contentID ) ;
    20.  
  20. var catatan kaki = dokumen.getElementById ( footnoteID ) ;
    21.  
  21.  
    22.  
  22. var spans = content.getElementsByTagName ( ini .footNoteTagName ) ;
    23.  
  23.  
    24.  
  24. var noteArr = [ ] ;
    25.  
  25. var catatan = 0
    26.  
  26. ;
    27.  
  27.  
    28.  
  28. var len = panjang ;
    29.  
  29. untuk ( i= 0 ; i)
    30.  
  30. {
    31.  
  31. catatan ++;
    32.  
  32.  
    33.  
  33. if ( spans [ i ] . className == this . footNoteClassName )
    34.  
  34. {
    35.  
  35. // Dapatkan isi catatan kaki
    36.  
  36. elContent = spans [ i ] ;
    37.  
  37.  
    38.  
  38. noteArr.push ( elContent ) ;
    39.  
  39.  
    40.  
  40. // Buat tautan ke catatan
    41.  
  41. kaki var newEle
    42.  
  42. = document.createElement ( " a
    43.  
  43. " )
    44.  
  44. ; 'ftnlink_' +footnoteID+ '_' + note;
    45.  
  45. newEle.innerHTML = note;
    46.  
  46. // Hapus konten asli
    47.  
  47. while ( spans [ i ] . childNodes
    48.  
  48. .
    49.  
  49. length ) { spans [ i ] ;
    50.  
  50. }
    51.  
  51. merentang [ i ] .appendChild ( newEle
    52.  
  52. )
    53.  
  53. ;
    54.  
  54.  
    55.  
  55. //Buat daftar catatan
    56.  
  56. var ul = this .__buildNoteList ( noteArr, footnoteID ) ;
    57.  
  57.  
    58.  
  58. catatan kaki.appendChild ( ul ) ;
    59.  
  59.  
    60.  
  60. } ,
    61.  
  61.  
    62.  
  62. __buildNoteList : function ( catatan, noteID )
    63.  
  63. {
    64.  
  64. if ( !notes || catatan.panjang < 1 ) kembali ;
    65.  
  65. var ul = document .
    66.  
  66.  
    67.  
  67. ul.className = ini .footNoteClassName ;
    68.  
  68.  
    69.  
  69. varli ;
    70.  
  70.  
    71.  
  71. var len = catatan.panjang + 1 ;
    72.  
  72. untuk ( i= 1 ; i)
    73.  
  73. {
    74.  
  74. li = dokumen.createElement ( 'li '
    75.  
  75. ) li .
    76.  
  76.  
    77.  
  77. li.innerHTML = catatan [ i -1 ] ;
    78.  
  78.  
    79.  
  79. // Buat tautan [kembali]
    80.  
  80. var link = document.createElement ( " a
    81.  
  81. " ) ;
    82.  
  82.  
    83.  
  83. link.innerHTML = ini .footNoteBackLink ;
    84.  
  84.  
    85.  
  85. li.appendChild ( tautan ) ;
    86.  
  86.  
    87.  
  87. ul.appendChild ( li )
    88.  
  88. }
    89.  
  89.  
    90.  
  90. kembalikan
    91.  
  91. jalan
    92.  
  92. ;
    93.  
  93.  
    94.  
    95.  
  95.  
Untuk mengimplementasikan catatan kaki kita memerlukan elemen berikut:
HTML: 
  1.  
    2.  
  2.  id = "artikel1" >
    3.  
  3.  
    4.  
  4. CSS  class = "catatan kaki" > CSS adalah singkatan dari Cascading Style Sheet. Diterjemahkan sebagai "Lembar Gaya Bertingkat". Ini adalah bahasa markup yang digunakan untuk (meningkatkan) kontrol atas gaya halaman web dan memungkinkan pemisahan informasi gaya dari konten halaman web. 
    5.  
  5.  
    6.
  • id = "artnotes1" class = "footnoteHolder" >
  •  
    • di dalam:
    artikel1 adalah bagian utama artikel yang memerlukan catatan kaki
    .. adalah konten anotasi, dan tag span dan kelas dapat dikonfigurasi.
    artnotes1 adalah tempat catatan kaki ditampilkan

    Menurut metode pemanggilan pengaturan default:
    skrip java: 
    1.  
      2.  
    2. "teks/javascript" >
      3.  
    3.  
      4.  
    4. var catatan kaki = catatan kaki baru ( ) ;
      5.  
    5. format catatan kaki ( 'artikel1' , 'catatan seni1' ) ;
      6.  
    6.  
      7.  

      9.  


    9. Jika Anda ingin menyesuaikan beberapa konten, Anda dapat menggunakan metode berikut:
       skrip java:
    1.  
      2.  
    2. "teks/javascript" >
      3.  
    3.  
      4.  
    4. var catatan kaki = catatan kaki baru ( ) ;
      5.  
    5. catatan kaki.footNoteBackLink
      6.  
    6. = "
      7.  
    7. [ kembali &
      8.  
    8. laquo ; ] " ;
      9.  
    9.  
      10.