jQuery-生成目录
本教程将根据HTML页面中的标题(" h1"至" h3"元素)展示如何使用jQuery在HTML页面内生成目录。
假设我们有一个使用标题HTML标签<h1>，<h2>和<h3>的带有标题的HTML页面。还要想象一下，我们需要为此页面生成一个内部目录。
<h1>元素包含页面标题，因此我们实际上并不希望将其作为内部目录的一部分。我们只希望目录在页面中包含<h2>，<h3>元素。
这是上面提到的HTML页面的示例：
<html>
<head>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
</head>
<body>
<h1>Title</h1>
<div id="tocDiv">
<ul id="tocList">
</ul>
</div>
<h2>Chapter 1</h2>
<h3>Section 1.1</h3>
<h2>Chapter 2</h2>
<h3>Section 2.1</h3>
<h2>Chapter 3</h2>
<h3>Section 3.1</h3>
<h3>Section 3.2</h3>
<script>
$(document).ready(function() {
});
</script>
</body>
</html>
注意id为" tocDiv"的div，以及ID为" tocList"的" ul"。我们希望目录位于内部的ul元素内，就像里面带有嵌套ul和li元素的li元素一样。
还要注意传递给$(document).ready()函数的空函数。在此函数内部，我们将放置生成目录的代码。
" h2"和" h3"元素的列表是我们要在目录中列出的内容。 " h2"和" h3"元素的主体内容，即加上指向" h2"或者" h3"元素所在位置的链接。
目录jQuery代码
这是生成目录的代码：
$(document).ready(function() {
$(tocList).empty();
var prevH2Item = null;
var prevH2List = null;
var index = 0;
$("h2, h3").each(function() {
//insert an anchor to jump to, from the TOC link.
var anchor = "<a name='" + index + "'></a>";
$(this).before(anchor);
var li = "<li><a href='#" + index + "'>" + $(this).text() + "</a></li>";
if( $(this).is("h2") ){
prevH2List = $("<ul></ul>");
prevH2Item = $(li);
prevH2Item.append(prevH2List);
prevH2Item.appendTo("#tocList");
} else {
prevH2List.append(li);
}
index++;
});
});
这段代码使用jQuery调用$(" h2，h3")。each(...)遍历所有h2和h3元素。
对于每个" h2"或者" h3"元素，在HTML文档之前的<a name="index"> </a>中会插入一个<a name="index"> </a>。这是必需的，以便目录中的链接可以跳至相应的" h2"或者" h3"元素。插入的索引变量从0开始递增。
h2和h3元素都有一个li元素，创建该li元素以将链接保留在目录中。 " h2"元素还创建了一个内部ul元素，该元素将保存在此元素与下一个" h2"元素之间的" h3"元素。这就是h3元素嵌套在最新的h2元素之前的方式。
将上面的代码插入到前面显示的HTML页面中，将在页面顶部生成以下目录：
- 第一章1.1节
- 第2章2.1节
- 第三章3.1节
- 第3.2节
创建目录jQuery插件
让我们尝试将目录代码表转换为jQuery插件。然后，我们将看到如何将实际示例转换为jQuery插件。我的《 jQuery插件教程》介绍了如何创建jQuery插件，因此在此不再赘述。
首先，将$(document).ready(...)函数调用中的代码移到其自己的函数中。现在，<script>元素中的代码如下所示：
$(document).ready(function() {
tableOfContents("#tocList");
});
function tableOfContents(tocList) {
$(tocList).empty();
var prevH2Item = null;
var prevH2List = null;
var index = 0;
$("h2, h3").each(function() {
//insert an anchor to jump to, from the TOC link.
var anchor = "<a name='" + index + "'></a>";
$(this).before(anchor);
var li = "<li><a href='#" + index + "'>" +
$(this).text() + "</a></li>";
if( $(this).is("h2") ){
prevH2List = $("<ul></ul>");
prevH2Item = $(li);
prevH2Item.append(prevH2List);
prevH2Item.appendTo(tocList);
} else {
prevH2List.append(li);
}
index++;
});
}
由于所有代码都适合单个函数，因此自然适合单个函数jQuery插件。这是jQuery插件代码的外观：
jQuery.tableOfContents =
function (tocList) {
jQuery(tocList).empty();
var prevH2Item = null;
var prevH2List = null;
var index = 0;
jQuery("h2, h3").each(function() {
var anchor = "<a name='" + index + "'></a>";
jQuery(this).before(anchor);
var li = "<li><a href='#" + index + "'>" +
jQuery(this).text() + "</a></li>";
if( jQuery(this).is("h2") ){
prevH2List = jQuery("<ul></ul>");
prevH2Item = jQuery(li);
prevH2Item.append(prevH2List);
prevH2Item.appendTo(tocList);
} else {
prevH2List.append(li);
}
index++;
});
}
这段代码应该放在名为jQuery.tocPlugin.js的文件中。
注意，现在如何将$()函数的所有用法替换为jQuery()函数。创建jQuery插件时，应始终使用jQuery()函数。
jQuery插件现在可以像这样使用：
<html>
<head>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script type="text/javascript"
src="jquery.tocPlugin.js">
</script>
</head>
<body>
<div id="tocDiv">
<ul id="tocList">
</ul>
</div>
<h2>Chapter 1</h2>
<h3>Section 1.1</h3>
<h2>Chapter 2</h2>
<h3>Section 2.1</h3>
<h2>Chapter 3</h2>
<h3>Section 3.1</h3>
<h3>Section 3.2</h3>
<script>
$(document).ready(function() {
jQuery.tableOfContents("#tocList");
});
</script>
</body>
</html>
用粗体标记的代码是HTML页面中要更改的内容，以便使用目录插件。
