当前位置: 首页 > 工具软件 > Tocify > 使用案例 >

jQuery Tocify 定位导航

孔建柏
2023-12-01

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
contextString“body”Any valid jQuery selector
selectorsString“h1,h2,h3”Each comma separated selector must be a header element.
showAndHideBooleantruetrue or false
showEffectString“slideDown”“none”, “fadeIn”, “show”, or “slideDown”, or any of the other jQuery show effects
showEffectSpeedString or Number“medium”“slow”, “medium”, “fast”, or any numeric number (milliseconds)
hideEffectString“none”“none”, “fadeOut”, “hide”, “slideUp”, or any of the jQuery hide effects
hideEffectSpeedString or Number“medium”“slow”, “medium”, “fast”, or any numeric number (milliseconds)
smoothScrollBooleantruetrue or false
smoothScrollSpeedNumber or String“medium”Accepts Number (milliseconds) or String: “slow”, “medium”, or “fast”
scrollToNumber or Function0Accepts any number (pixels) or Function
showAndHideOnScrollBooleantruetrue or false
highlightOnScrollBooleantruetrue or false
highlightOffsetNumber40Accepts any number (pixels)
themeString“bootstrap”“bootstrap”, “jqueryui”, or “none”
extendPageBooleantruetrue or false
extendPageOffsetNumber100Any number (pixels)
historyBooleantruetrue or false
hashGeneratorString 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.
highlightDefaultBooleantruetrue or false
ignoreSelectorStringnullAny valid jQuery selector
scrollHistoryBooleanfalsetrue 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. });
复制

 

 类似资料: