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

插件特点在线实例

实例演示

使用方法<div id="toc"></div>$(function() {   //Calls the tocify method on your HTML div.   $("#toc").tocify(); });参数详解

选项说明默认值

context任意可用的jQuery选择器"body"

selectors文章节点，可以关联生成目录"h1,h2,h3"

showAndHide是否展示二级目录结构true

showEffect目录展示效果："none", "fadeIn", "show", or "slideDown""slideDown"

showEffectSpeed目录展示速度："slow", "medium", "fast", 或数字(毫秒)"medium"

hideEffect目录隐藏效果："none", "fadeOut", "hide", "slideUp""none"

hideEffectSpeed目录隐藏速度："slow", "medium", "fast", 或数字(毫秒)"medium"

smoothScroll当点击目录节点菜单时，是否平滑滚动到文章对应的节点内容true

smoothScrollSpeed平滑滚动速率，可以是数字(毫秒) or String: "slow", "medium", or "fast""medium"

scrollTo当页面滚动时，页面顶端与目录之间的间隔0

showAndHideOnScroll当滚动页面时，是否显示和隐藏目录子菜单true

theme内容展示风格，可以是"bootstrap", "jqueryui", or "none""bootstrap"

NameTypeDefaultOptions

contextString“body”Any valid jQuery selector

selectorsString“h1,h2,h3”Each comma separated selector must be a header element.

showAndHideBooleantruetrue or false

showEffectString“slideDown”“none”, “fadeIn”, “show”, or “slideDown”, or any of the other jQuery show effects

showEffectSpeedString or Number“medium”“slow”, “medium”, “fast”, or any numeric number (milliseconds)

hideEffectString“none”“none”, “fadeOut”, “hide”, “slideUp”, or any of the jQuery hide effects

hideEffectSpeedString or Number“medium”“slow”, “medium”, “fast”, or any numeric number (milliseconds)

smoothScrollBooleantruetrue or false

smoothScrollSpeedNumber or String“medium”Accepts Number (milliseconds) or String: “slow”, “medium”, or “fast”

scrollToNumber or Function0Accepts any number (pixels) or Function

showAndHideOnScrollBooleantruetrue or false

highlightOnScrollBooleantruetrue or false

highlightOffsetNumber40Accepts any number (pixels)

themeString“bootstrap”“bootstrap”, “jqueryui”, or “none”

extendPageBooleantruetrue or false

extendPageOffsetNumber100Any number (pixels)

historyBooleantruetrue or false

hashGeneratorString or Function“compact”“compact”, “pretty”, function(text, element){}.
Compact – #CompressesEverythingTogether.
Pretty – #looks-like-a-nice-url-and-is-easily-readable.
function(text, element){} – Your own hash generation function that accepts the text as an argument, and returns the hash value.

highlightDefaultBooleantruetrue or false

ignoreSelectorStringnullAny valid jQuery selector

scrollHistoryBooleanfalsetrue or false

设置参数

所有的选项可以设置插件时，称为。某些选项也可以设置插件后使用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()方法检索。目前所有的选项可以通过引用选项属性检索。