jQuery Tocify positioning navigation

Tocify is a jQuery plugin that can dynamically generate article directories. Tocify can optionally set optional animations supported by Twitter Bootstrap or jQueryUI Themeroller and jQuery's show/hide effects. Tocify also supports smooth scrolling, forward and backward button support, You can monitor the scrolling of the browser to display the current directory structure.

Plugin Features

1. The theme supports Twitter Bootstrap or jQueryUI Themeroller style.

2. Supports dynamic scrolling and jQuery's click show/hide effect.

3. Support forward and back button click effects

4. Supports smooth scrolling animation effects

5. Supports monitoring web page scroll events and dynamically displays the current directory structure.

6. Supports page expansion options, ensuring a page has enough scrolling table for all content items

7. Perfect without error through jsHint

Online instance

Example demonstration

Instructions

1. <divid="toc"></div> 

copy

1. $(function(){ 
2.   //Calls the tocify method on your HTML div.
3.   $("#toc").tocify();
4. });

copy

Detailed parameter explanation

Options	illustrate	Defaults
context	Any available jQuery selector	"body"
selectors	Article node, which can be associated to generate a directory	"h1,h2,h3"
showAndHide	Whether to show the secondary directory structure	true
showEffect	Catalog display effect: "none", "fadeIn", "show", or "slideDown"	"slideDown"
showEffectSpeed	Directory display speed: "slow", "medium", "fast", or a number (milliseconds)	"medium"
hideEffect	Directory hiding effects: "none", "fadeOut", "hide", "slideUp"	"none"
hideEffectSpeed	Directory hiding speed: "slow", "medium", "fast", or a number (milliseconds)	"medium"
smoothScroll	When clicking the directory node menu, whether to scroll smoothly to the node content corresponding to the article	true
smoothScrollSpeed	Smooth scrolling rate, can be a number (milliseconds) or String: "slow", "medium", or "fast"	"medium"
scrollTo	When the page is scrolled, the gap between the top of the page and the table of contents	0
showAndHideOnScroll	Whether to show and hide the table of contents submenu when scrolling the page	true
theme	Content display style, can be "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()方法称为。

这里是设置一个选项的插件时，首先调用的一个例子：

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. });

复制

下载