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

效果展示源碼下載

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

引入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結構

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

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

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

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

以上的HTML結構代碼大家可以修改tocify的CSS文件來滿足你項目視覺的需求。

Javascript

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

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

如此，運行網頁，一個動態(tài)的文章目錄就生成了。

選項設置

Tocify提供了豐富的選項設置，我們可以根據項目實際需求設置不同的選項參數。以下是主要的幾個參數選項介紹：

選項	說明	默認值
context	任意可用的jQuery選擇器	"body"
selectors	文章節(jié)點，可以關聯生成目錄	"h1,h2,h3"
showAndHide	是否展示二級目錄結構	true
showEffect	目錄展示效果："none", "fadeIn", "show", or "slideDown"	"slideDown"
showEffectSpeed	目錄展示速度："slow", "medium", "fast", 或數字(毫秒)	"medium"
hideEffect	目錄隱藏效果："none", "fadeOut", "hide", "slideUp"	"none"
hideEffectSpeed	目錄隱藏速度："slow", "medium", "fast", 或數字(毫秒)	"medium"
smoothScroll	當點擊目錄節(jié)點菜單時，是否平滑滾動到文章對應的節(jié)點內容	true
smoothScrollSpeed	平滑滾動速率，可以是數字(毫秒) or String: "slow", "medium", or "fast"	"medium"
scrollTo	當頁面滾動時，頁面頂端與目錄之間的間隔	0
showAndHideOnScroll	當滾動頁面時，是否顯示和隱藏目錄子菜單	true
theme	內容展示風格，可以是"bootstrap", "jqueryui", or "none"	"bootstrap"