Home > Article > Web Front-end > 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
JavaScript file
HTML structure
Create a p tag, and then add an ID or Class to this tag, for example: toc
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:
Tocify
节点1
内容
... 节点2
内容
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!