码迷,mamicode.com
首页 > Web开发 > 详细

jQuery Tocify 定位导航

时间:2017-02-11 11:06:03      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:eth   enum   smo   twitter   rip   后退   api   example   contain   

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"
NameTypeDefaultOptions
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. });
复制

 

jQuery Tocify 定位导航

标签:eth   enum   smo   twitter   rip   后退   api   example   contain   

原文地址:http://www.cnblogs.com/niuboren/p/6388651.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!