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