Plus
Téléchargement de code source Liens de programmation Ressources pour la création de sites Livres et tutoriels Jeux mobiles Logiciels mobiles Article
Page d'accueil>Tutoriel de conception de sites Web>Tutoriel CSS

Js et CSS réalisent un effet de note de bas de page

Auteur：Eve Cole Date de mise à jour：2009-06-12 17:46:02
Les notes de bas de page constituent le meilleur moyen de fournir davantage d’informations aux utilisateurs et constituent également un complément efficace aux informations principales. On les trouve couramment dans divers livres imprimés. Cependant, étant donné que les notes de bas de page présentent ces avantages, nous devons bien sûr également en profiter dans les pages Web. Cet article vous explique comment obtenir des effets de note de bas de page en utilisant Javascript et CSS.
Javascript : 
  1.  
    2.  
  2. "texte/javascript" >
    3.  
  3.  
    4.  
  4. // Description : utilisez Javascript et CSS pour obtenir un effet de note de bas de page
    5.  
  5. // Auteur : CodeBit.cn ( http://www.CodeBit.cn )
    6.  
  6.  
    7.  
  7. var footNotes = function ( ) { } ;
    8.  
  8.  
    9.  
  9. notes de pied de page prototype = {
    10.  
  10.  
    11.  
  11. footNoteClassName : "footnote" , // Le className de la note de bas de page
    12.  
  12. footNoteTagName : "span" , // Le nom de la balise de la note de bas de page
    13.  
  13. footNoteBackLink : " [back]" , // Retour au lien
    14.  
  14.  
    15.  
  15. format : function ( contentID, footnoteID )
    16.  
  16. {
    17.  
  17. if ( ! document.getElementById ) return false ;
    18.  
  18.  
    19.  
  19. var content = document.getElementById ( contentID ) ;
    20.  
  20. var footnote = document.getElementById ( footnoteID ) ;
    21.  
  21.  
    22.  
  22. var spans = content. getElementsByTagName ( ceci . footNoteTagName ) ;
    23.  
  23.  
    24.  
  24. var noteArr = [ ] ;
    25.  
  25. var note = 0 ;
    26.  
  26. var elContent;
    27.  
  27.  
    28.  
  28. var len = travées. longueur ;
    29.  
  29. pour ( i= 0 ; i)
    30.  
  30. {
    31.  
  31. note ++;
    32.  
  32.  
    33.  
  33. if ( spans [ i ] . className == this . footNoteClassName )
    34.  
  34. {
    35.  
  35. // Récupère le contenu de la note de bas de page
    36.  
  36. elContent = spans [ i ] .
    37.  
  37.  
    38.  
  38. noteArr.push ( elContent ) ;
    39.  
  39.  
    40.  
  40. // Crée un lien vers la note de bas de page
    41.  
  41. var newEle
    42.  
  42. = document. createElement ( "a" ) ;
    43.  
  43. '#ftn_' + footnoteID + '_' + note
    44.  
  44. ; 'ftnlink_' +footnoteID+ '_' + note;
    45.  
  45. newEle. innerHTML = note;
    46.  
  46. // Effacer le contenu original
    47.  
  47. while ( spans [ i ] . childNodes
    48.  
  48. .
    49.  
  49. length ) { spans [ i ] .
    50.  
  50. }
    51.  
  51. s'étend sur [ i ] . appendChild ( newEle
    52.  
  52. )
    53.  
  53. ;
    54.  
  54.  
    55.  
  55. //Créer une liste de notes
    56.  
  56. var ul = this .__buildNoteList ( noteArr, footnoteID ) ;
    57.  
  57.  
    58.  
  58. note de bas de page.appendChild ( ul ) ;
    59.  
  59.  
    60.  
  60. } ,
    61.  
  61.  
    62.  
  62. __buildNoteList : function ( notes, noteID )
    63.  
  63. {
    64.  
  64. if ( !notes || notes. length < 1 ) return ;
    65.  
  65. var ul = createElement ( 'ul' ) ;
    66.  
  66.  
    67.  
  67. ul.className = this .footNoteClassName ;
    68.  
  68.  
    69.  
  69. varli ;
    70.  
  70.  
    71.  
  71. var len = notes. longueur + 1 ;
    72.  
  72. for ( i= 1 ; i)
    73.  
  73. {
    74.  
  74. li = document. createElement ( ' li
    75.  
  75. ' ) ;
    76.  
  76.  
    77.  
  77. li.innerHTML = notes [ i -1 ] ;
    78.  
  78.  
    79.  
  79. // Créer un lien [retour]
    80.  
  80. var link = document. createElement ( "a" )
    81.  
  81. href = "#ftnlink_" + noteID + "_" + i;
    82.  
  82.  
    83.  
  83. lien . innerHTML = this .
    84.  
  84.  
    85.  
  85. li.appendChild ( lien ) ;
    86.  
  86.  
    87.  
  87. ul.appendChild ( li )
    88.  
  88. ;
    89.  
  89.  
    90.  
  90. retourner ul;
    91.  
  91. }
    92.  
  92. } ;
    93.  
  93.  
    94.  
    95.  
  95.  
Pour implémenter les notes de bas de page, nous avons besoin des éléments suivants :
HTML : 
  1.  
    2.  
  2. < identifiant div = "article1" >
    3.  
  3.  
    4.  
  4. CSS  class = "footnote" > CSS est l'abréviation de Cascading Style Sheet. Traduit par « Feuilles de style en cascade ». Il s'agit d'un langage de balisage utilisé pour le contrôle (amélioré) des styles de pages Web et qui permet de séparer les informations de style du contenu de la page Web. 
    5.  
  5.  
    6.
  • id = "artnotes1" class = "footnoteHolder" >
  •  
    • dans:
    article1 est le corps principal de l'article pour lequel vous avez besoin de notes de bas de page
    .. est le contenu de l'annotation, et les balises span et class peuvent être configurées.
    artnotes1 est l'endroit où les notes de bas de page sont affichées

    Selon la méthode d'appel des paramètres par défaut :
    Javascript : 
    1.  
      2.  
    2. "texte/javascript" >
      3.  
    3.  
      4.  
    4. var note de bas de page = nouveau footNotes ( ) ;
      5.  
    5. format de note de bas de page ( 'article1' , 'artnotes1' ) ;
      6.  
    6.  
      7.  

      9.  


    9. Si vous souhaitez personnaliser certains contenus, vous pouvez utiliser les méthodes suivantes :
       Javascript :
    1.  
      2.  
    2. "texte/javascript" >
      3.  
    3.  
      4.  
    4. var footnote = new footNotes ( ) ;
      5.  
    5. footNoteClassName = "footnote2" ;
      6.  
    6. footNoteTagName = "em" ;
      7.  
    7. footNoteBackLink = " [retour &
      8.  
    8. laquo ; ] " ;
      9.  
    9.  
      10.