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

dn001 2009-06-01 01:48:44

;;;;脚注（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>