jquery plug-in tocify dynamic node directory menu generator source download _jquery

Tocify is a jquery plug-in that dynamically generates a directory of article nodes. If we have a very long article, the article has more than one node, then use tocify can dynamically generate the article directory according to the node elements, click on the directory can be smooth scrolling to the corresponding node, of course, when scrolling page, the directory structure will be based on the current monitor to switch to the current directory state.

Effect Display source Download

Tocify currently supports the Twitter bootstrap and jQueryUI themeroller Two theme styles, we can choose one of the styles based on the actual project, additional requirements jquery 1.7.2+ and jQueryUI Widget Factory 1.8.21+. Rest assured that it is used in ie7+, a modern browser.

Introducing CSS and JavaScript files

CSS file

<link type= "Text/css" rel= "stylesheet" href= "Jquery.tocify.css"/> 

JavaScript files

<script src= "Jquery-1.7.2.min.js" ></script> 
<script src= "Jquery-ui-1.9.1.custom.min.js" > </script> 

HTML structure

Create a div tag and add an ID or class to the tag, for example: TOC

<div id= "TOC" ></div>

This DIV#TOC it by default is empty content, it is used to dynamically generate the article directory, that article directory how to dynamically correlate the article node? We also need to do some planning for the article node, such as:

<div class= "wrap" > 
 
 

The above HTML structure code you can modify tocify CSS files to meet the needs of your project vision.

Javascript

Use jquery to select our TOC element and then invoke the Tocify plug-in via the Tocify () method.

$ (function () { 
$ ("#toc"). Tocify (); 

So, running a Web page, a dynamic article directory is generated.

Option settings

Tocify provides a rich set of options, we can set different option parameters according to the actual requirements of the project. The following are some of the main parameter options introduced:

Options	Description	Default value
Context	Any available jquery selector	"Body"
Selectors	Article node, you can associate the build directory	"H1,h2,h3"
Showandhide	Whether to show level two directory structure	True
Showeffect	Catalog Display effect: "None", "FadeIn", "show", or "Slidedown"	"Slidedown"
Showeffectspeed	Catalog Show Speed: "Slow", "medium", "fast", or number (milliseconds)	"Medium"
Hideeffect	Directory shadowing Effect: "None", "fadeout", "Hide", "slideup"	"None"
Hideeffectspeed	Directory Hide Speed: "Slow", "medium", "fast", or number (milliseconds)	"Medium"
Smoothscroll	When clicking on the Directory node menu, smooth scrolling to the corresponding node content of the article	True
Smoothscrollspeed	Smooth scrolling rate, can be numeric (milliseconds) or String: "Slow", "medium", or "fast"	"Medium"
Scrollto	When the page scrolls, the spacing between the top of the page and the table of contents	0
Showandhideonscroll	Whether to show and hide the Directory submenu when scrolling the page	True
Theme	Content display style, can be "bootstrap", "jQueryUI", or "none"	"Bootstrap"