如何用Javascript实现自动为页面添加目录结构 | Cafe Stop

RoryShaw 2013-09-09

展开全文

当页面内容比较多的时候，清晰的页面结构加目录导航能帮助用户方便的找到所需要的信息，接下来介绍如何利用jQuery自动为页面生成目录结构。网上其实已经有好多jQuery的插件可以实现同样的目的，我的这边文章就介绍过其中一个[通过jQuery自动给wordpress博文添加目录结构]，而本文还有个目的是介绍其是如何实现的并顺带介绍创建jQuery插件的一些注意点。

下面的代码片断是典型的jQuery插件的结构，这里有2点值得注意：

因为是jQuery实例扩展，所以是jQuery.fn.extend，如果是在jQuery类上扩展，则应该使用jQuery.extend。
使用了自调用的匿名函数，这样处理的好处是a）保证该javascript文件被载入后就被调用；b）保证内部使用$代替jQuery而不会跟其它模块冲突。

View Raw Code ?

(function($){
$.fn.extend({
plugin: function(options){
//实现代码
}
});
)(jQuery);

如何自动添加目录结构（前提是页面本身具有良好的组织结构，正确使用H1，H2，H3等Heading标签）。思路是这样的：

在所有的H1，H2和H3标签前添加<span>元素并设定其Id，使得可以通过<a>元素定位到该Heading标签。
构建如<ul><li><a/></li><li><a/></li></ul>形式的目录结构，并是所有<a>标签分别指向对应的<span>。
将该目录结构放入用户指定的HTML元素中。

如下面代码所示：

View Raw Code ?

(function($){
$.fn.extend({
mytoc: function(options){
//默认参数
var defaultParams = {
prefix:'toc', //生成目录结构中元素的class属性的前缀
selectors:'h1, h2, h3', //页面由h1,h2,h3来组织
context:'body' //处理body标签下面的selectors
};
//用户可以通过传入自定义参数来覆盖默认设置
var opts = $.extend({}, defaultParams, options);
//获取所有需要加入到目录结构中的“头”元素
var headings = $(opts.selectors, opts.context);
//在所有的“头”元素前加上锚标签,如<span id="toc0">
headings.each(function(i, heading){
$('<span/>').attr('id', opts.prefix + i).insertBefore(heading);
});
//必须返回$(this).each(function(){}); 只有这样才能兼容jQuery的$.a().b().c()这种连续调用
return $(this).each(function(i, toc){
//构建目录结构
var ul = $('<ul/>').attr('id', 'toc');
headings.each(function(i, heading){
var a = $('<a/>').attr('href', '#'+opts.prefix + i).text($(heading).text());
var li = $('<li/>').addClass(heading.tagName.toLowerCase() + '-' + opts.prefix).append(a);
ul.append(li);
});
//将生成的目录结构ul对象添加到用户指定的HTML对象中
$(toc).html(ul);
});
}
});
})(jQuery);