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. <tipe skrip= "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<len; 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<len; 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.  
  94. </skrip>
    95.  
  95.  
Untuk mengimplementasikan catatan kaki kita memerlukan elemen berikut:
HTML: 
  1.  
    2.  
  2. <div id = "artikel1" >
    3.  
  3.  
    4.  
  4. CSS <span 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. </span>
    5.  
  5.  
    6.  
  6. </div>
    7.  
  7. <div id = "artnotes1" class = "footnoteHolder" > </div>
    8.  
  8.  
di dalam:
artikel1 adalah bagian utama artikel yang memerlukan catatan kaki
<span class="footnote"> .. </span> 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. <tipe skrip= "teks/javascript" >
    3.  
  3.  
    4.  
  4. var catatan kaki = catatan kaki baru ( ) ;
    5.  
  5. format catatan kaki ( 'artikel1' , 'catatan seni1' ) ;
    6.  
  6.  
    7.  
  7. </skrip>

    9.  


  9. Jika Anda ingin menyesuaikan beberapa konten, Anda dapat menggunakan metode berikut:
     skrip java:
  1.  
    2.  
  2. <tipe skrip= "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.  
  10. </skrip>
Artikel Terkait