JQuery Tocify navigation, jquerytocify

JQuery Tocify navigation, jquerytocify

Tocify is a jQuery plug-in that can dynamically generate document directories. Tocify can freely set optional animations and jQuery display/hide effects supported by Twitter Bootstrap or jQueryUI Themeroller, tocify also supports smooth scrolling and forward and backward buttons. You can monitor the browser's scrolling display of the current directory structure.

Plug-in features online instances

Instance demo

Usage

1. <Div id = "toc"> </div>

Copy

1. $ (Function (){
2. // Callthe tocify method on your HTML div.
3. $ ("# Toc"). tocify ();
4. });

Detailed description of copy Parameters

Option	Description	Default Value
Context	Any available jQuery Selector	"Body"
Selectors	Article node, which can be associated to generate Directories	"H1, h2, h3"
ShowAndHide	Whether to display the second-level directory structure	True
ShowEffect	Directory display effect: "none", "fadeIn", "show", or "slideDown"	"SlideDown"
ShowEffectSpeed	Directory display speed: "slow", "medium", "fast", or number (MS)	"Medium"
HideEffect	Directory hiding effect: "none", "fadeOut", "hide", "slideUp"	"None"
Hidemo-tspeed	Directory hiding speed: "slow", "medium", "fast", or number (MS)	"Medium"
SmoothScroll	Whether to smoothly scroll to the node content corresponding to the article when you click the directory node menu	True
SmoothScrollSpeed	Smooth rolling rate, which can be a number (MS) or String: "slow", "medium", or "fast"	"Medium"
ScrollTo	The interval between the top of the page and the directory when the page is rolling	0
ShowAndHideOnScroll	Whether to display and hide the directory sub-menu when scrolling the page	True
Theme	Content display style, which 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
Hidemo-tspeed	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-# compresseverythingtogether. 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

Set parameters

All options can be set when the plug-in is called. Some options can also be set after the plug-in is called using the setoption () or setoptions () method.

Here is an example called when setting an option plug-in:

1. // Executes your code when the DOM is ready. Acts the same as $ (document). ready ().
2. $ (Function (){
3. // Callthe selectBoxIt method on your HTML select box and updates the showEffect option
4. Var toc = $ ("# toc"). tocify ({showEffect: "fadeIn "});
5. });

Copy

Here is an example of calling the SetOption method after setting an option plug-in:

1. // Executes your code when the DOM is ready. Acts the same as $ (document). ready ().
2. $ (Function (){
3. // Callthe 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. });

Copy

Here is an example of calling the setOptions method after setting a plug-in with multiple options:

1. // Executes your code when the DOM is ready. Acts the same as $ (document). ready ().
2. $ (Function (){
3. // Callthe 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. });

Copy to get Parameters

A single option can be retrieved using the option () method. Currently, all options can be retrieved by referencing option attributes.

Here is an example of the option () method used by the retrieval plug-in after an option:

1. // Executes your code when the DOM is ready. Acts the same as $ (document). ready ().
2. $ (Function (){
3. // Callthe 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. });

Copy

Here is an example of using the option feature After retrieving all the plug-ins of the current option:

1. // Executes your code when the DOM is ready. Acts the same as $ (document). ready ().
2. $ (Function (){
3. // Callthe 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. });

Copy Download