jQuery Tocify 定位导航
Tocify是一个jQuery插件,能够动态的生成文章目录,Tocify可以随意的设置Twitter Bootstrap 或者 jQueryUI Themeroller支持的可选动画和jQuery的显示/隐藏效果,Tocify还支持平滑滚动,向前和向后按钮支持,可以监听浏览器的滚动显示当前的目录结构。
插件特点
主题支持 Twitter Bootstrap 或者 jQueryUI Themeroller 风格。
支持动态滚动和jQuery的点击显示/隐藏效果。
支持前进和后退按钮点击效果
支持平滑滚动动画效果
支持监听网页滚动事件,动态显示当前的目录结构。
支持页面扩展选项,确保一个页面有足够大的滚动表的所有内容项目
通过 jsHint 完美没有错误提示
在线实例
使用方法
- <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" |
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()方法称为。
这里是设置一个选项的插件时,首先调用的一个例子:
- //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);
- });
复制
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17