Tocify是一個(gè)能夠動(dòng)態(tài)生成文章節(jié)點(diǎn)目錄的jQuery插件。假如我們有一篇很長(zhǎng)的文章，文章有多個(gè)節(jié)點(diǎn)，那么使用Tocify可以根據(jù)節(jié)點(diǎn)元素動(dòng)態(tài)生成文章目錄，點(diǎn)擊目錄可以平滑滾動(dòng)到對(duì)應(yīng)的節(jié)點(diǎn)，當(dāng)然當(dāng)滾動(dòng)頁面時(shí)，目錄結(jié)構(gòu)會(huì)根據(jù)當(dāng)前監(jiān)聽到的節(jié)點(diǎn)進(jìn)行切換到當(dāng)前目錄狀態(tài)。

效果展示         源碼下載

Tocify目前支持Twitter Bootstrap和jQueryUI Themeroller兩種主題風(fēng)格，我們可以根據(jù)實(shí)際項(xiàng)目任選其中一種風(fēng)格，另外必要條件jQuery 1.7.2+和jQueryUI Widget Factory 1.8.21+。放心在IE7+即現(xiàn)代瀏覽器上使用。

引入CSS和Javascript文件

css文件

<link type="text/css" rel="stylesheet" href="jquery.tocify.css" /> 
<link type="text/css" rel="stylesheet" href="bootstrap.css" /> 

JavaScript文件

<script src="jquery-1.7.2.min.js"></script> 
<script src="jquery-ui-1.9.1.custom.min.js"></script> 
<script src="jquery.tocify.min.js""></script> 

HTML結(jié)構(gòu)

創(chuàng)建一個(gè)DIV標(biāo)簽，然后給這個(gè)標(biāo)簽添加一個(gè)ID或者Class，例如：toc

<div id="toc"></div>

這個(gè)div#toc它默認(rèn)是空的內(nèi)容，它用來動(dòng)態(tài)生成文章目錄，那文章目錄如何動(dòng)態(tài)關(guān)聯(lián)文章節(jié)點(diǎn)的呢？我們還需要把文章節(jié)點(diǎn)做一些規(guī)劃，如：

<div class="wrap"> 
<h1>Tocify</h1> 
<br /> 
<section> 
<h2>節(jié)點(diǎn)1</h2> 
<p>內(nèi)容</p> 
</section> 
<br /> 
<section> 
<h2>節(jié)點(diǎn)2</h2> 
<p>內(nèi)容</p> 
</section> 
... 
</div>

以上的HTML結(jié)構(gòu)代碼大家可以修改tocify的CSS文件來滿足你項(xiàng)目視覺的需求。

Javascript

使用jQuery選擇選中我們的toc元素，然后通過tocify()方法調(diào)用Tocify插件。

$(function() { 
$("#toc").tocify(); 
});

如此，運(yùn)行網(wǎng)頁，一個(gè)動(dòng)態(tài)的文章目錄就生成了。

選項(xiàng)設(shè)置

Tocify提供了豐富的選項(xiàng)設(shè)置，我們可以根據(jù)項(xiàng)目實(shí)際需求設(shè)置不同的選項(xiàng)參數(shù)。以下是主要的幾個(gè)參數(shù)選項(xiàng)介紹：

最新評(píng)論