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

 
 
<type de script= "texte/javascript" >
 
 
 
// Description : utilisez Javascript et CSS pour obtenir un effet de note de bas de page
 
// Auteur : CodeBit.cn ( http://www.CodeBit.cn )
 
 
 
var footNotes = function ( ) { } ;
 
 
 
notes de pied de page prototype = {
 
 
 
footNoteClassName : "footnote" , // Le className de la note de bas de page
 
footNoteTagName : "span" , // Le nom de la balise de la note de bas de page
 
footNoteBackLink : " [back]" , // Retour au lien
 
 
 
format : function ( contentID, footnoteID )
 
{
 
if ( ! document.getElementById ) return false ;
 
 
 
var content = document.getElementById ( contentID ) ;
 
var footnote = document.getElementById ( footnoteID ) ;
 
 
 
var spans = content. getElementsByTagName ( ceci . footNoteTagName ) ;
 
 
 
var noteArr = [ ] ;
 
var note = 0 ;
 
var elContent;
 
 
 
var len = travées. longueur ;
 
pour ( i= 0 ; i<len; i++ )
 
{
 
note ++;
 
 
 
if ( spans [ i ] . className == this . footNoteClassName )
 
{
 
// Récupère le contenu de la note de bas de page
 
elContent = spans [ i ] .
 
 
 
noteArr.push ( elContent ) ;
 
 
 
// Crée un lien vers la note de bas de page
 
var newEle
 
= document. createElement ( "a" ) ;
 
'#ftn_' + footnoteID + '_' + note
 
; 'ftnlink_' +footnoteID+ '_' + note;
 
newEle. innerHTML = note;
 
// Effacer le contenu original
 
while ( spans [ i ] . childNodes
 
.
 
length ) { spans [ i ] .
 
}
 
s'étend sur [ i ] . appendChild ( newEle
 
)
 
;
 
 
 
//Créer une liste de notes
 
var ul = this .__buildNoteList ( noteArr, footnoteID ) ;
 
 
 
note de bas de page.appendChild ( ul ) ;
 
 
 
} ,
 
 
 
__buildNoteList : function ( notes, noteID )
 
{
 
if ( !notes || notes. length < 1 ) return ;
 
var ul = createElement ( 'ul' ) ;
 
 
 
ul.className = this .footNoteClassName ;
 
 
 
varli ;
 
 
 
var len = notes. longueur + 1 ;
 
for ( i= 1 ; i<len; i++ )
 
{
 
li = document. createElement ( ' li
 
' ) ;
 
 
 
li.innerHTML = notes [ i -1 ] ;
 
 
 
// Créer un lien [retour]
 
var link = document. createElement ( "a" )
 
href = "#ftnlink_" + noteID + "_" + i;
 
 
 
lien . innerHTML = this .
 
 
 
li.appendChild ( lien ) ;
 
 
 
ul.appendChild ( li )
 
;
 
 
 
retourner ul;
 
}
 
} ;
 
 
 
</script>
 
 

 
 
< identifiant div = "article1" >
 
 
 
CSS <span 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. </span>
 
 
 
</div>
 
<div id = "artnotes1" class = "footnoteHolder" > </div>
 
 

 
 
<type de script= "texte/javascript" >
 
 
 
var note de bas de page = nouveau footNotes ( ) ;
 
format de note de bas de page ( 'article1' , 'artnotes1' ) ;
 
 
 
</script>

 


Si vous souhaitez personnaliser certains contenus, vous pouvez utiliser les méthodes suivantes :
 Javascript :

 
 
<type de script= "texte/javascript" >
 
 
 
var footnote = new footNotes ( ) ;
 
footNoteClassName = "footnote2" ;
 
footNoteTagName = "em" ;
 
footNoteBackLink = " [retour &
 
laquo ; ] " ;
 
 
 
</script>