jQuery Tocify 定位導航

Tocify是一個jQuery插件，能夠動態的生成文章目錄，Tocify可以隨意的設置Twitter Bootstrap 或者 jQueryUI Themeroller支持的可選動畫和jQuery的顯示/隱藏效果，Tocify還支持平滑滾動，向前和向後按鈕支持，可以監聽瀏覽器的滾動顯示當前的目錄結構。

插件特點

1. 主題支持 Twitter Bootstrap 或者 jQueryUI Themeroller 風格。

2. 支持動態滾動和jQuery的點擊顯示/隱藏效果。

3. 支持前進和後退按鈕點擊效果

4. 支持平滑滾動動畫效果

5. 支持監聽網頁滾動事件，動態顯示當前的目錄結構。

6. 支持頁面擴展選項，確保一個頁面有足夠大的滾動表的所有內容項目

7. 通過 jsHint 完美沒有錯誤提示

線上實例

實例演示

使用方法

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

1. $(function() {
2.   //Calls the tocify method on your HTML div.
3.   $("#toc").tocify();
4. });

參數詳解

設置參數

所有的選項可以設置插件時，稱為。某些選項也可以設置插件後使用setoption()或setoptions()方法稱為。

這裡是設置一個選項的插件時，首先調用的一個例子：

1. //Executes your code when the DOM is ready.  Acts the same as $(document).ready().
2. $(function() {
3.   // Calls the selectBoxIt method on your HTML select box and updates the showEffect option
4.   var toc = $("#toc").tocify({ showEffect: "fadeIn" });
5. });

這裡是設置一個選項的插件後首先調用使用SetOption方法的一個例子：

1. //Executes your code when the DOM is ready.  Acts the same as $(document).ready().
2. $(function() {
3.   // Calls the selectBoxIt method on your HTML select box
4.   var toc = $("#toc").tocify().data("toc-tocify");
5.   // Sets the smoothScroll option to false
6.   toc.setOption("showEffect", "fadeIn");
7. });

這裡是設置多個選項的插件後首先調用使用setOptions方法的一個例子：

1. //Executes your code when the DOM is ready.  Acts the same as $(document).ready().
2. $(function() {
3.   // Calls the selectBoxIt method on your HTML select box and updates the showEffect option
4.   var toc = $("#toc").tocify().data("toc-tocify");
5.   // Sets the showEffect, scrollTo, and smoothScroll options
6.   toc.setOptions({ showEffect: "fadeIn", scrollTo: 50, smoothScroll: false });
7. });

獲取參數

一個單一的選項可以通過使用option()方法檢索。目前所有的選項可以通過引用選項屬性檢索。

這裡是一個選項後檢索插件使用option()方法稱為例：

1. //Executes your code when the DOM is ready.  Acts the same as $(document).ready().
2. $(function() {
3.   //Calls the tocify method on your HTML div
4.   var toc = $("#toc").tocify().data("toc-tocify");
5.   // Writes the showEffect option to the console
6.   console.log(toc.option("showEffect"));
7. });

這裡是檢索所有當前選項的插件後利用期權特性稱為例：

1. //Executes your code when the DOM is ready.  Acts the same as $(document).ready().
2. $(function() {
3.   //Calls the selectBoxIt method on your HTML select box
4.   var toc = $("#toc").tocify().data("toc-tocify");
5.   // Writes all of the current plugin options to the console
6.   console.log(toc.options);
7. });