jQuery Tocify 定位导航
2017-02-11 09:22
337 查看
Tocify是一个jQuery插件,能够动态的生成文章目录,Tocify可以随意的设置Twitter Bootstrap 或者 jQueryUI Themeroller支持的可选动画和jQuery的显示/隐藏效果,Tocify还支持平滑滚动,向前和向后按钮支持,可以监听浏览器的滚动显示当前的目录结构。
支持动态滚动和jQuery的点击显示/隐藏效果。
支持前进和后退按钮点击效果
支持平滑滚动动画效果
支持监听网页滚动事件,动态显示当前的目录结构。
支持页面扩展选项,确保一个页面有足够大的滚动表的所有内容项目
通过 jsHint 完美没有错误提示
复制
$(function() {
//Calls the tocify method on your HTML div.
$("#toc").tocify();
});
复制
这里是设置一个选项的插件时,首先调用的一个例子:
//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()方法称为例:
//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);
});
复制
下载
插件特点
主题支持 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" |
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()方法称为。这里是设置一个选项的插件时,首先调用的一个例子:
//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 Tocify 定位导航
- jQuery之导航定位效果【原创】
- 基于jQuery实现定位导航位置效果
- jQuery仿京东商城楼梯式导航定位菜单
- 网页定位导航特效--jQuery学习
- jQuery网页定位导航特效实现方法
- jquery左侧导航滑动网页定位效果
- 使用jQuery做网页定位导航特效(下)
- (JQuery学习笔记)利用jquery制作网页导航定位
- jquery实现定位导航效果
- JQuery和原生JavaScript实现网页定位导航特效
- jquery控制导航定位,浮动窗跟随网页变化
- 使用jQuery实现网页定位导航
- 导航定位(利用锚点和jquery定位)
- JavaScript和jQuery实现定位导航功能
- 【jQuery】用jQuery实现定位滚动导航效果
- [Jquery]网页定位导航特效
- jquery实现网页定位导航
- jQuery滚动顶部定位导航
- jquery实现网页定位导航特效