jQuery外掛Tocify動態節點實作目錄選單

這次帶給大家jQuery外掛Tocify動態節點實作目錄選單，jQuery外掛Tocify動態節點實作目錄選單的注意事項有哪些，下面就是實戰案例，一起來看一下。

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

建立一個p標籤，然後為這個標籤新增一個ID或Class，例如：toc

<p id="toc"></p>

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

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

以上的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	#平滑滾動速率，可以是數字(毫秒) 或 String: "slow", "medium", or "fast"	"medium"
scrollTo	當頁面捲動時，頁面頂端與目錄之間的間隔	0
showAndHideOnScroll	當捲動頁面時，是否顯示並隱藏目錄子選單	true
theme	內容展示風格，可以是"bootstrap", "jqueryui", or "none"	"bootstrap"

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

jQuery外掛限制上傳檔案大小與格式使用方法

##jQuery解析XML檔案與動態增加js檔案如何實作

jQuery讀取分析xml檔案步驟詳解

以上是jQuery外掛Tocify動態節點實作目錄選單的詳細內容。更多資訊請關注PHP中文網其他相關文章！