jQuery Tocify 定位导航

Posted 2020-08-30

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

复制

参数详解

选项	说明	默认值
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"

Name	Type	Default	Options
context	String	“body”	Any valid jQuery selector
selectors	String	“h1,h2,h3”	Each comma separated selector must be a header element.
showAndHide	Boolean	true	true or false
showEffect	String	“slideDown”	“none”, “fadeIn”, “show”, or “slideDown”, or any of the other jQuery show effects
showEffectSpeed	String or Number	“medium”	“slow”, “medium”, “fast”, or any numeric number (milliseconds)
hideEffect	String	“none”	“none”, “fadeOut”, “hide”, “slideUp”, or any of the jQuery hide effects
hideEffectSpeed	String or Number	“medium”	“slow”, “medium”, “fast”, or any numeric number (milliseconds)
smoothScroll	Boolean	true	true or false
smoothScrollSpeed	Number or String	“medium”	Accepts Number (milliseconds) or String: “slow”, “medium”, or “fast”
scrollTo	Number or Function	0	Accepts any number (pixels) or Function
showAndHideOnScroll	Boolean	true	true or false
highlightOnScroll	Boolean	true	true or false
highlightOffset	Number	40	Accepts any number (pixels)
theme	String	“bootstrap”	“bootstrap”, “jqueryui”, or “none”
extendPage	Boolean	true	true or false
extendPageOffset	Number	100	Any number (pixels)
history	Boolean	true	true or false
hashGenerator	String 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.
highlightDefault	Boolean	true	true or false
ignoreSelector	String	null	Any valid jQuery selector
scrollHistory	Boolean	false	true or false

设置参数

所有的选项可以设置插件时，称为。某些选项也可以设置插件后使用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. });

复制

下载