jQuery plug-in Tocify dynamic node directory menu generator with source code download_jquery

Tocify is a jQuery plug-in that can dynamically generate a directory of article nodes. If we have a long article with multiple nodes, we can use Tocify to dynamically generate an article directory based on node elements. Click the directory to smoothly scroll to the corresponding node. Of course, when scrolling the page, the directory structure will be based on the current monitoring The node is switched to the current directory state.

Effect display Source code download

Tocify currently supports two theme styles: Twitter Bootstrap and jQueryUI Themeroller. We can choose one of the styles according to the actual project. In addition, the necessary requirements are jQuery 1.7.2 and jQueryUI Widget Factory 1.8.21. Safe to use on IE7, a modern browser.

Introduce CSS and Javascript files

css file

<link type="text/css" rel="stylesheet" href="jquery.tocify.css" /> 
<link type="text/css" rel="stylesheet" href="bootstrap.css" /> 

JavaScript file

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

HTML structure

Create a DIV tag, and then add an ID or Class to this tag, for example: toc

<div id="toc"></div>

This div#toc has empty content by default. It is used to dynamically generate an article directory. How does the article directory dynamically associate with article nodes? We also need to make some plans for the article nodes, such as:

<div class="wrap"> 
<h1>Tocify</h1> 
<br /> 
<section> 
<h2>节点1</h2> 
<p>内容</p> 
</section> 
<br /> 
<section> 
<h2>节点2</h2> 
<p>内容</p> 
</section> 
... 
</div>

For the above HTML structure code, you can modify tocify’s CSS file to meet the visual needs of your project.

Javascript

Use jQuery to select our toc element, and then call the Tocify plug-in through the tocify() method.

$(function() { 
$("#toc").tocify(); 
});

In this way, run the web page and a dynamic article directory will be generated.

Option settings

Tocify provides a wealth of option settings, and we can set different option parameters according to the actual needs of the project. The following is an introduction to the main parameter options:

Options	Description	Default value
context	Any available jQuery selector	"body"
selectors	Article nodes can be associated to generate directories	"h1,h2,h3"
showAndHide	Whether to display the secondary directory structure	true
showEffect	Directory display effect: "none", "fadeIn", "show", or "slideDown"	"slideDown"
showEffectSpeed	Directory display speed: "slow", "medium", "fast", or number (milliseconds)	"medium"
hideEffect	Directory hiding effects: "none", "fadeOut", "hide", "slideUp"	"none"
hideEffectSpeed	Directory hiding speed: "slow", "medium", "fast", or number (milliseconds)	"medium"
smoothScroll	When clicking the directory node menu, whether to smoothly scroll 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 scrolls, the gap 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"