當(dāng)頁面內(nèi)容比較多的時候，清晰的頁面結(jié)構(gòu)加目錄導(dǎo)航能幫助用戶方便的找到所需要的信息，接下來介紹如何利用jQuery自動為頁面生成目錄結(jié)構(gòu)。網(wǎng)上其實(shí)已經(jīng)有好多jQuery的插件可以實(shí)現(xiàn)同樣的目的，我的這邊文章就介紹過其中一個[通過jQuery自動給wordpress博文添加目錄結(jié)構(gòu)]，而本文還有個目的是介紹其是如何實(shí)現(xiàn)的并順帶介紹創(chuàng)建jQuery插件的一些注意點(diǎn)。
下面的代碼片斷是典型的jQuery插件的結(jié)構(gòu)，這里有2點(diǎn)值得注意：
- 因?yàn)槭莏Query實(shí)例擴(kuò)展，所以是
jQuery.fn.extend，如果是在jQuery類上擴(kuò)展，則應(yīng)該使用jQuery.extend。 - 使用了自調(diào)用的匿名函數(shù)，這樣處理的好處是a）保證該javascript文件被載入后就被調(diào)用；b）保證內(nèi)部使用$代替jQuery而不會跟其它模塊沖突。
(function($){
$.fn.extend({
plugin: function(options){
//實(shí)現(xiàn)代碼
}
});
)(jQuery);
如何自動添加目錄結(jié)構(gòu)（前提是頁面本身具有良好的組織結(jié)構(gòu)，正確使用H1，H2，H3等Heading標(biāo)簽）。思路是這樣的：
- 在所有的H1，H2和H3標(biāo)簽前添加<span>元素并設(shè)定其Id，使得可以通過<a>元素定位到該Heading標(biāo)簽。
- 構(gòu)建如<ul><li><a/></li><li><a/></li></ul>形式的目錄結(jié)構(gòu)，并是所有<a>標(biāo)簽分別指向?qū)?yīng)的<span>。
- 將該目錄結(jié)構(gòu)放入用戶指定的HTML元素中。
如下面代碼所示：
(function($){
$.fn.extend({
mytoc: function(options){
//默認(rèn)參數(shù)
var defaultParams = {
prefix:'toc', //生成目錄結(jié)構(gòu)中元素的class屬性的前綴
selectors:'h1, h2, h3', //頁面由h1,h2,h3來組織
context:'body' //處理body標(biāo)簽下面的selectors
};
//用戶可以通過傳入自定義參數(shù)來覆蓋默認(rèn)設(shè)置
var opts = $.extend({}, defaultParams, options);
//獲取所有需要加入到目錄結(jié)構(gòu)中的“頭”元素
var headings = $(opts.selectors, opts.context);
//在所有的“頭”元素前加上錨標(biāo)簽,如<span id="toc0">
headings.each(function(i, heading){
$('<span/>').attr('id', opts.prefix + i).insertBefore(heading);
});
//必須返回$(this).each(function(){}); 只有這樣才能兼容jQuery的$.a().b().c()這種連續(xù)調(diào)用
return $(this).each(function(i, toc){
//構(gòu)建目錄結(jié)構(gòu)
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);
});
//將生成的目錄結(jié)構(gòu)ul對象添加到用戶指定的HTML對象中
$(toc).html(ul);
});
}
});
})(jQuery);
如何使用：
<html>
<head>
<title>Test TOC</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src='jquery.mytoc.js'></script>
</head>
<body>
<div id="toc"></div>
<h1>Heading 1</h1>
<h2>Sub Heading 1</h2>
<h2>Sub Heading 2</h2>
<h2>Sub Heading 3</h2>
<h1>Heading 2</h1>
<h2>Sub Heading 1</h2>
<h2>Sub Heading 2</h2>
<h2>Sub Heading 3</h2>
<h1>Heading 3</h1>
<h2>Sub Heading 1</h2>
<h2>Sub Heading 2</h2>
<h2>Sub Heading 3</h2>
<h2>Sub Heading 4</h2>
<script>
jQuery('div#toc').mytoc();
</script>
</body>
</html>
源代碼已經(jīng)放到github上 – mytoc。真正將上述代碼用到產(chǎn)品環(huán)境自動生成目錄結(jié)構(gòu)還需要編寫相應(yīng)的CSS代碼，而且目錄結(jié)構(gòu)的層次關(guān)系還需要通過CSS代碼體現(xiàn)出來。
本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請
點(diǎn)擊舉報(bào)。
