jQuery plug-in Tocify dynamic node implements directory menu

This time I will bring you the jQuery plug-in Tocify dynamic node to implement the directory menu. What are the precautions for the jQuery plug-in Tocify dynamic node to implement the directory menu. The following is a practical case, let's take a look.

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. Clicking on the directory can smoothly scroll to the corresponding node. Of course, when scrolling the page, Directory structureWill switch to the current directory based on the currently monitored nodeState.

Effect Display             Source code download

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

Introducing 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 p tag, and then add an ID or Class to this tag, for example: toc

<p id="toc"></p>

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

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

You can modify the above HTML structure code 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 node can be associated to generate a directory	"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 top of the page is in line with the table of contents The interval between	0
showAndHideOnScroll	Whether to show and hide the directory submenu when scrolling the page	true
theme	Content display style, which can be "bootstrap", "jqueryui", or "none"	"bootstrap"

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

jQuery plug-in limits upload file size and format usage

jQuery parsing XML files and dynamic addition How to implement js files

Detailed explanation of the steps of jQuery reading and analyzing xml files

The above is the detailed content of jQuery plug-in Tocify dynamic node implements directory menu. For more information, please follow other related articles on the PHP Chinese website!