带有源代码下载的jQuery插件的Tocify动态节点目录菜单生成器

Tocify是一个jQuery插件，可以动态生成文章节点目录。如果我们有一篇有多个节点的长文章，Tocify可以根据节点元素动态生成文章目录，点击目录平滑滚动到对应的节点。当然，滚动页面时，目录结构会根据当前监控的节点切换到当前目录状态。

下载效果显示源代码。

目前，Tocify支持Twitter Bootstrap和jQueryUI Themeroller，我们可以根据实际项目选择其中一种风格。此外，jQuery 1.7.2和jQueryUI Widget Factory 1.8.21也是必须的。你可以在IE7上随意使用，这是一款现代浏览器。

介绍CSS和Javascript文件。

Css文件

Type link=' text/CSS' rel='样式表' href=' jquery . tocify . CSS '/type link=' text/CSS ' rel='样式表' href=' bootstrap . CSS '/JavaScript文件。

script src=' http : jquery-1 . 7 . 2 . min . js '/script script src=' http : jquery-ui-1 . 9 . 1 . custom . min . js '/script script src=' http : jquery . tocify . min . js '/。

创建一个DIV标签，然后向标签中添加一个标识或类，如toc。

Div id='toc'/div此div#toc默认为空，用于动态生成文章目录。文章目录如何动态关联文章节点？我们还需要为文章节点制定一些计划，比如：

class=' wrap ' h1 to ify/h1br/section H2节点1/H2内容/p /section br/section h2节点2/H2内容/p /section./HTML结构代码在div之上。您可以修改tocify的CSS文件，以满足项目的视觉需求。

java描述语言

使用jQuery选择我们的toc元素，然后通过Tocify()方法调用tocify插件。

$(function() { $('#toc '))。tocify()；});这样，通过运行网页生成动态文章目录。

选项设置

Tocify提供了丰富的选项设置，我们可以根据项目的实际需要设置不同的选项参数。以下是几个主要参数选项的介绍：

选项默认值上下文任何可用的jQuery选择器“body”选择器文章节点都可以与生成的目录“h1，h2，h3”相关联显示和显示是否显示辅助目录结构真实的显示效果目录显示效果：“无”、“fadeIn”、“显示”或“向下滑动”“向下滑动”显示效果速度目录显示速度：“慢”、“中”、“快”或数字(毫秒)“中”隐藏效果目录隐藏效果：“无”、“fadeOut”、“隐藏”、向上滑动“无”隐藏效果速度目录隐藏速度：“慢”、“中”、“快”或数字(毫秒)“中”平滑滚动单击目录节点时是否平滑滚动到文章真正对应的节点内容平滑滚动速度平滑滚动速度可以是一个数字(毫秒)或String:页面滚动时的“慢”、“中”或“快”“中”。 页面顶部与目录的间隔为0 showAndHideOnScroll显示和隐藏目录子菜单的内容显示样式真实主题在滚动页面时可以是‘bootstrap’‘jQuery UI’，也可以是‘none’‘bootstrap’。