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. });