用 Javascript 和 CSS 实现脚注(Footnote)效果

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

用 Javascript 和 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>

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

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

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

如果你想自定义一些内容,可以用下面的方式:

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>