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" |
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网页定位导航特效
<!DOCTYPE html> <html lang="en"> <head> <script src="http://code ...
- JQuery和原生JavaScript实现网页定位导航特效
慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...
- jQuery实现网页定位导航
代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <title ...
- jQuery实现页面导航内容定位效果,并支持内容切换
需求 页面向下滚动时,需要将顶部的搜索栏信息和导航菜单吸顶,并且,搜索栏信息和导航菜单之间可以切换. 效果 https://www.iguopin.com/index.php?m=&c=ind ...
- css3圆环百分比,菜单栏定位导航
前段时间,社区个人中心改版,看了下设计图,当时隐约感觉到有两个地方(圆环百分比,菜单栏定位导航)比较麻烦.设计图大致如下: 首先看圆环百分比,网上的做法大致分两种,一种是用了CSS3中的transfo ...
- 我收集到的最好的jQuery和CSS3导航菜单
jQuery和CSS3导航菜单在网页设计和开发的重要组成部分之一.利用jQuery+CSS3实现可以做出拥有各种动画效果的漂亮菜单.在这里,我们收集了一些最好的jQuery+CSS3实现的导航菜单. ...
- 20款jquery下拉导航菜单特效代码分享
20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...
- 利用js和JQuery定义一个导航条菜单
利用js和JQuery定义一个导航条 效果: 一.html代码: <div class="Maintenance"> <div class="Title ...
随机推荐
- MySQL(四) 数据表的插入、更新、删除数据
序言 数据表的插入.更新.删除非常简单,但是简单的也要学习,细节决定成败. ---WH 一.插入数据 格式:INSERT INTO 表名(字段名...)VALUES(值...); 创建环境 使用per ...
- 那些年我们写过的T-SQL(上篇)
在当今这个多种不同数据库混用,各种不同语言不同框架融合的年代(一切为了降低成本并高效的提供服务),知识点多如牛毛.虽然大部分SQL脚本可以使用标准SQL来写,但在实际中,效率就是一切,因而每种不同厂商 ...
- Script Task 引用 package variable
Script Task 能够使用C#代码进行编程,许多复杂的逻辑都可以使用C# 脚本来实现,不仅灵活,而且强大. 1,能够传递package variable 给 Script Task ,并且Scr ...
- WPF自定义控件与样式(12)-缩略图ThumbnailImage /gif动画图/图片列表
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要针对WPF项目 ...
- hdu1962Corporative Network带权回路
/* 有N个企业,每个企业想要实现通信,要用线路来连接,线路的长度为abs(a-b)%1000; 如果企业a 链接到了企业b 那么b就是the center of the serving! 然后有两种 ...
- SharePoint Server 2013开发之旅(四):配置工作流开发和测试环境
工作流这个功能,在SharePoint Server 2013中做了很大的改动.我们可以从微软官方的文档中了解一下大概的情况 http://technet.microsoft.com/zh-cn/li ...
- 如何安装Oracle Instant Client
Oracle Instant Client是Oracle发布的轻量级数据库客户端,下面我们来看看官方的定义: Instant Client allows you to run your applica ...
- PHP的学习--图解PHP引用
在一篇文章中看到关于PHP引用的图解,对于加深对PHP引用的理解很有帮助,在这里备份一下. 如果你对PHP的引用一点也不了解,可以先看我之前的博客:PHP的学习--PHP的引用
- MAC下安装与配置MySQL
MAC下安装与配置MySQL MAC下安装与配置MySQL 一 下载MySQL 访问MySQL的官网http://www.mysql.com/downloads/ 然后在页面中会看到“MySQL ...
- Zip文件中文乱码问题解决方法(MAC->Windows)
前言: 最近收到的ZIP交互原型,打开查看中文一堆乱码.主要是产品都是高大上啊,用的都是MAC,咱酷毙用的Windows,话说安卓APP,你用MAC搞啥啊.可恨的压缩用的是zip,不是rar之类的.为 ...