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

王朝html/css/js·作者佚名  2008-12-04
窄屏简体版  字體: |||超大  

脚注(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>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航