jQuery插件之Tocify動態節點目錄選單產生器附源碼下載_jquery

Tocify是一個能夠動態產生文章節點目錄的jQuery外掛。假如我們有一篇很長的文章，文章有多個節點，那麼使用Tocify可以根據節點元素動態生成文章目錄，點擊目錄可以平滑滾動到對應的節點，當然當滾動頁面時，目錄結構會根據當前監聽到的節點進行切換到目前目錄狀態。

效果顯示         源碼下載

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

建立一個DIV標籤，然後為這個標籤加上一個ID或Class，例如：toc

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

這個div#toc它預設是空的內容，它用來動態產生文章目錄，那文章目錄如何動態關聯文章節點的呢？我們還需要把文章節點做一些規劃，例如：

<div class="wrap"> 
<h1>Tocify</h1> 
<br /> 
<section> 
<h2>节点1</h2> 
<p>内容</p> 
</section> 
<br /> 
<section> 
<h2>节点2</h2> 
<p>内容</p> 
</section> 
... 
</div>

以上的HTML結構程式碼大家可以修改tocify的CSS檔案來滿足你專案視覺的需求。

Javascript

使用jQuery選擇選取我們的toc元素，然後透過tocify()方法呼叫Tocify外掛。

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

如此，運行網頁，一個動態的文章目錄就產生了。

選項設定

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

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