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: