Js和CSS实现脚注(Footnote)效果

2009-07-31/13:29

正文

脚注（Footnote）是向用户提供更多信息的一个最佳途径，也是主体信息的一个有效补充，常见于各种印刷书籍中。不过，既然脚注有这些好处，我们当然要在网页中也加以利用，本文向您介绍了用 Javascript 和 CSS 实现脚注效果的方法。
Javascript:

 
<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>

要实现脚注，我们需要下列元素：
HTML:

 
<div id="article1"> 
 
CSS <span class="footnote">CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</span> 
 
</div> 
     
<div id="artnotes1" class="footnoteHolder"></div>

其中：
article1 是你需要脚注的文章主体
<span class="footnote"> .. </span> 是注释内容，标签 span 和 class 均可配置。
artnotes1 是显示脚注的地方

按照默认的设置调用方式：
Javascript:

 
<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','artnotes1'); 
 
</script>