jQuery Tocify 定位导航

Tocify是一个jQuery插件，能够动态的生成文章目录，Tocify可以随意的设置Twitter Bootstrap 或者 jQueryUI Themeroller支持的可选动画和jQuery的显示/隐藏效果，Tocify还支持平滑滚动，向前和向后按钮支持，可以监听浏览器的滚动显示当前的目录结构。

插件特点

1. 主题支持 Twitter Bootstrap 或者 jQueryUI Themeroller 风格。

2. 支持动态滚动和jQuery的点击显示/隐藏效果。

3. 支持前进和后退按钮点击效果

4. 支持平滑滚动动画效果

5. 支持监听网页滚动事件，动态显示当前的目录结构。

6. 支持页面扩展选项，确保一个页面有足够大的滚动表的所有内容项目

7. 通过 jsHint 完美没有错误提示

在线实例

实例演示

使用方法

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

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

参数详解

设置参数

所有的选项可以设置插件时，称为。某些选项也可以设置插件后使用setoption()或setoptions()方法称为。

这里是设置一个选项的插件时，首先调用的一个例子：

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

这里是设置一个选项的插件后首先调用使用SetOption方法的一个例子：

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

这里是设置多个选项的插件后首先调用使用setOptions方法的一个例子：

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

获取参数

一个单一的选项可以通过使用option()方法检索。目前所有的选项可以通过引用选项属性检索。

这里是一个选项后检索插件使用option()方法称为例：

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

这里是检索所有当前选项的插件后利用期权特性称为例：

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

云盘内容

注意：示例只是当前的内容，【下载】的是全部jQuery插件一起打包后的文件。