给页面添加脚注功能

FontSize:- + Date: 2006-03-13

摘要：
利用javascript&css实现脚注功能，在公司企业站点，计划说明，注释等相关页面十分适用，简洁，大方，方便实用。

资料来源：网络文/佚名

Having read Daring Fireball's post on footnotes in blogs, I thought it shouldn't be that difficult to come up with a css/javascript solution.

Here's the result.

There are two divs, "content" and "footnotes". "Content" holds the content, "footnotes" is empty. The footnotes are added in-line in span tags (with class="footnote“) within the content.

When the button is clicked, the javascript function looks for spans with class "footnote" in the "content" div. It then swaps the text in the span for a superscripted link, and places the footnote in a div within the "footnote" div.

Normally, the function would be called onLoad.

The function can be called for multiple content and footnote divs.

Advantages:

You don't have to worry about numbering, for one thing.
The footnotes can be edited at their insertion point.
You could give users the choice of how footnotes are formatted, or whether they are shown at all.

Disadvantages:

Without Javascript, footnotes are left in-line.

Tested on a Mac (Firefox/Safari) and a PC (Firefox/Explorer6).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<title>Format footnotes with Javascript & CSS | brandspankingnew</title>


<style type="text/css">

body {
  font-family: Lucida Grande, Arial, sans-serif;
  font-size: 10px;
  text-align: center;
}

a {
  font-weight: bold;
  text-decoration: none;
  color: #f30;
}

a:hover {
  color: #fff;
  background-color: #f30; 
}

#wrapper {
  width: 400px;
  margin: 0 auto;
  text-align: left;
}

#content {
  font-size: 1.2em;
  line-height: 1.8em;
}

#content h1 {
  font-size: 1.6em;
  border-bottom: 1px solid #ccc;
  padding: 5px 0 5px 0;
}

#content span.footnote {
  color: #f30;
}

#content a.footnote {
  vertical-align: super;
  font-size: 0.7em;
}

#footnotes {
  border-top: 1px solid #ccc;
  margin: 20px 0 20px 0;
  padding: 10px 0 0 0;
}

#footnotes div.footnote {
  margin: 0 0 5px 0;
}

</style>

<script type="text/javascript">
<!--

function footnotes(contID,noteID)
{
  var cont = document.getElementById(contID);
  var noteholder = document.getElementById(noteID);
  var spans = cont.getElementsByTagName("span");
  var notes = 0;
  
  for (i=0;i<spans.length;i++)
  {
    if (spans[i].className == "footnote")
    {
      notes++;
      noteholder.innerHTML += "<div class='footnote'><a name='note"+notes+"'></a>" + notes + ". " + spans[i].innerHTML + " <a href='#nlink"+notes+"' title='return to text'>↩</a></div>";
      spans[i].innerHTML = "<a name='nlink"+notes+"' href='#note" + notes + "' title='view footnote' class='footnote'>" + notes + "</a>";
    }
  }
  
  // hide button
  document.getElementById("btn").style.display = 'none';
  
}

-->
</script>

</head>
<body>

<div id="wrapper">

<div id="content">

  <p><a href="http://www.brandspankingnew.net/archive/2005/07/format_footnote.html">www.brandspankingnew.net</a></p>
  
  <h1>Footnotes with Javascript & CSS.</h1>

  <p>
  <input id="btn" type="button" onClick="footnotes('content','footnotes')" value="reformat footnotes" />
  </p>

  <p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <span class="footnote">This is a footnote.</span> Integer accumsan placerat magna. Duis tincidunt adipiscing mi. Mauris tincidunt, ante nec mollis consequat, nibh lectus consectetuer massa, vitae vestibulum nisl nunc dapibus sem. Suspendisse ligula dui, ornare et, vulputate eu, laoreet non, ligula. Suspendisse malesuada tincidunt tortor. Curabitur sagittis tristique diam. Cras sem wisi, tincidunt et, condimentum id, aliquam sed, velit. Phasellus sapien velit, tempor in, rhoncus sed, ultricies eget, urna. Cras orci neque, facilisis sit amet, iaculis ut, tristique vulputate, lorem. Vivamus pretium diam sed neque.
  </p>
  
  <p>
  Phasellus tortor odio, convallis sit amet, consequat id, eleifend vitae, lorem. Proin vitae nibh. Nulla velit felis, condimentum sit amet, luctus eu, auctor ut, quam. <span class="footnote">Sed molestie. In nibh risus, aliquet in, sodales id, imperdiet sit amet, risus.</span> Sed eros ante, malesuada non, varius ornare, porttitor lobortis, ligula. Vivamus semper arcu a nibh. Mauris congue, eros quis ullamcorper dapibus, pede justo rhoncus urna, sit amet sollicitudin sapien velit quis ante. Donec rutrum blandit ligula. Aliquam id nibh. Mauris metus nulla, dapibus ut, iaculis vitae, tincidunt in, metus. Phasellus vestibulum.
  </p>
  
  <p>
  Quisque elementum massa vitae ante. Aenean in diam. Nam non metus. Proin dapibus enim in diam. Phasellus et eros non dui interdum aliquam. Integer eleifend venenatis tortor. Suspendisse potenti. In a arcu. Praesent hendrerit enim ut tellus molestie dictum. Morbi mattis, ipsum ac tempus imperdiet, purus neque hendrerit augue, nec suscipit sem tortor sed tortor. Maecenas et nunc non ante sollicitudin commodo. Ut felis. Nam euismod tortor sed lorem. Pellentesque pharetra. Praesent vel risus. Aliquam erat volutpat. Vivamus porttitor metus in augue. Nullam id mi vel ligula imperdiet tristique. Suspendisse ante elit, volutpat eu, fringilla et, dictum vitae, nunc.
  </p>

  <p>
  Aenean lacus metus, pulvinar sed, consectetuer eget, tempor ut, enim. <span class="footnote">Praesent porta, odio ac commodo pulvinar, wisi risus interdum tellus, vel facilisis nunc sem et elit. Curabitur placerat interdum felis.</span> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent eleifend magna vitae ligula gravida tristique. Vivamus bibendum odio ac enim. Donec sagittis auctor libero. Sed metus arcu, accumsan eget, dapibus et, lobortis quis, dolor. Etiam nec lectus sed ipsum facilisis mattis. Morbi non ligula quis pede fringilla egestas. Donec vitae enim ac lorem consectetuer pulvinar. Praesent vitae orci id metus adipiscing fringilla. Mauris gravida lorem quis diam. Nunc non massa aliquam pede iaculis condimentum. Vivamus tincidunt. Quisque ornare orci ac massa. Ut malesuada condimentum lectus. Proin vitae sapien ac eros vulputate ultrices.
  </p>

  <p>
  Fusce aliquet ante sed pede. Vivamus vitae nibh. Nulla est lacus, consequat ut, interdum ut, ullamcorper at, enim. Duis placerat sem sed mauris. Donec in odio. Nulla a erat ut diam eleifend tempor. Aenean vel magna nec metus vestibulum vestibulum. Nam ac orci varius lorem ultrices aliquam. Praesent gravida, quam at hendrerit rutrum, quam pede iaculis sem, eget sodales risus risus iaculis risus. Morbi mattis mauris.
  </p>

</div>

<div id="footnotes"></div>



</div>

</body>
</html>

原文地址：www.brandspankingnew.net

效果演示地址：http://www.brandspankingnew.net/specials/footnote.html

本文链接地址：http://leafor.com/Leafor-blog/Footnotes-with-Javascript&CSS.html
如果你也喜欢本文，记得顶一下，支持我。你的支持是我继续发好文章的最大动力！谢谢！

Get TrackBack URI 发布:爱你无名 | 分类:web技术 | 评论:3 | 引用:0 | 浏览:

Tags:优化功能 js css 网页特效国外资源

CSS hack:区分IE6，IE7，firefox (2007-8-8 17:39:48)
目前较流行的几种lightbox (2006-6-6 2:43:22)
让用户选择链接打开方式：新窗口or当前 (2006-4-21 12:38:45)
让用户自由调整页面字体大小 (2006-4-19 23:50:21)
Smart‘back to top’link (2006-4-17 22:22:4)
Resources for web developers (2006-4-14 9:33:9)

Comments

[Quote] [Reply] 1 爱你无名 Said,
[Mail]08-01-14 15:18:25
比较实用的功能，如果不能浏览，可点进入原文件网址，效果可见。Z-blog没有提供代码运行功能，Leafor正在修改中。

[Quote] [Reply] 2 密陀僧 Said,
[Mail]08-01-14 21:37:26
貌似你已经修改成功了
leafor 于 08-01-18 17:44:52 回复
还是没有哦，都换成字符了，还有，没有换行……

[Quote] [Reply] 3 密陀僧 Said,
[Mail]08-01-18 20:36:51
If Instr(para,"[space]")>0 Then source=Replace(source," "," ")

这句代码注释掉了吗？

注意，修改后文章内容中的代码部分重新编辑一下。
leafor 于 08-01-19 00:25:03 回复
解决了，我是在html编辑模式下写[code][/code]的，所以会出错。我直接在ubb代码下写，就可以了。谢谢啦。

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

第四片叶子's 博客