Js和CSS實作註腳(Footnote)效果

 
 
<script type= "text/javascript" >
 
 
 
// 說明：用Javascript 和CSS 實作註腳（Footnote）效果
// 作者：CodeBit.cn ( http://www.CodeBit.cn )
 
 
 
var footNotes = function ( ) { } ;
 
 
 
footNotes. prototype = {
 
 
 
footNoteClassName : "footnote" , // 腳註的className
 
footNoteTagName : "span" , // 腳註的標籤名
footNoteBackLink : " [back]" , // 返回鏈接
 
 
format : function ( contentID, footnoteID )
 
{
 
if ( !document. getElementById ) return false ;
 
 
 
var content = document. getElementById ( contentID ) ;
 
var footnote = document. getElementById ( footnoteID ) ;
 
 
 
var spans = content. getElementsByTagName ( this . footNoteTagName ) ;
 
 
 
var noteArr = [ ] ;
 
var note = 0 ;
 
var elContent;
 
 
 
var len = spans. length ;
 
for ( i= 0 ; i<len; i++ )
 
{
 
note ++;
 
 
 
if ( spans [ i ] . className == this . footNoteClassName )
 
{
 
// 取得腳註內容
elContent = spans [ i ] . innerHTML ;
 
 
 
noteArr. push ( elContent ) ;
 
 
 
// 建立一個指向腳註的連結
var newEle = document. createElement ( "a" ) ;
 
newEle. href = '#ftn_' + footnoteID + '_' + note;
 
newEle. title = "show footnote" ;
 
newEle. id = 'ftnlink_' +footnoteID+ '_' + note;
 
newEle. innerHTML = note;
 
// 清空原有內容
while ( spans [ i ] . childNodes . length )
 
{
 
spans [ i ] . removeChild ( spans [ i ] . firstChild ) ;
 
}
 
spans [ i ] . appendChild ( newEle ) ;
 
}
 
}
 
 
 
// 建立註解清單
var ul = this .__buildNoteList ( noteArr, footnoteID ) ;
 
 
 
footnote. appendChild ( ul ) ;
 
 
 
} ,
 
 
 
__buildNoteList : function ( notes, noteID )
 
{
 
if ( !notes || notes. length < 1 ) return ;
 
var ul = document. createElement ( 'ul' ) ;
 
 
 
ul. className = this . footNoteClassName ;
 
 
 
var li;
 
 
 
var len = notes. length + 1 ;
 
for ( i= 1 ; i<len; i++ )
 
{
 
li = document. createElement ( 'li' ) ;
 
li. id = "ftn_" +noteID+ "_" +i;
 
 
 
li. innerHTML = notes [ i -1 ] ;
 
 
 
// 建立【返回】連結
var link = document. createElement ( "a" ) ;
 
link. href = "#ftnlink_" + noteID + "_" + i;
 
 
 
link. innerHTML = this . footNoteBackLink ;
 
 
 
li. appendChild ( link ) ;
 
 
 
ul. appendChild ( li ) ;
 
}
 
 
 
return ul;
 
}
 
} ;
 
 
 
</script>
 
 

 
 
<div id = "article1" >
 
 
 
CSS <span class = "footnote" > CSS 是Cascading Style Sheet 的縮寫。譯作「層疊樣式表單」。是用於(增強)控制網頁樣式並允許將樣式資訊與網頁內容分開的一種標記性語言。 </span>
 
 
 
</div>
 
<div id = "artnotes1" class = "footnoteHolder" > </div>
 
 

 
 
<script type= "text/javascript" >
 
 
 
var footnote = new footNotes ( ) ;
 
footnote. format ( 'article1' , 'artnotes1' ) ;
 
 
 
</script>



如果你想自訂一些內容，可以用下面的方式：
 Javascript:

 
 
<script type= "text/javascript" >
 
 
 
var footnote = new footNotes ( ) ;
 
footnote. footNoteClassName = "footnote2" ;
 
footnote. footNoteTagName = "em" ;
 
footnote. footNoteBackLink = " [back &laquo;]" ;
 
footnote. format ( 'article1' , 'artnotes'note. ) ;
 
 
 
</script>