GOOCODE - Find your code/scripts

10 Tocify is a node capable of dynamically generated articles directory jQuery plugin. If we have a very long article, the article has a plurality of nodes, use Tocify dynamically generated based on the node element article directories, click on the directory can smoothly scroll to the corresponding node, of course, when you scroll the page, according to the current directory structure will listen to node to switch to the current directory state.

Tocify currently supports Twitter Bootstrap and jQueryUI Themeroller two kinds of theme style, a style in which we can optionally be based on actual projects, in addition to the necessary conditions for jQuery 1.7.2+ and jQueryUI Widget Factory 1.8.21+. In IE7 + rest assured that the use of modern browsers.

The introduction of 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 a label to the ID or Class, for example: toc

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

The div # toc it is empty by default content, which is used to dynamically generate article directories, article directories that article how dynamic association node it? We also need to do some planning articles node, such as:

<div class="wrap"> 
    <h1>Tocify</h1> 
    <br /> 
    <section> 
        <h2>Node 1</h2> 
        <p>Content</p> 
    </section> 
    <br /> 
    <section> 
        <h2>Node 2</h2> 
        <p>Content</p> 
    </section> 
    ... 
</div> 

Above HTML code that you can modify the structure tocify CSS file to meet your project's visual needs.

javascript
Use jQuery selector to select our toc elements, then () method call Tocify plugin tocify.

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

So, run the page, a dynamic article directories is generated.

Setting Options
Tocify provides a rich set of options, we can set different options for the project according to the actual needs of the parameter.
Name Type Default Options
context String "body" Any valid jQuery selector
selectors String "h1,h2,h3" Each comma separated selector must be a header element.
showAndHide Boolean true true or false
showEffect String "slideDown" "none", "fadeIn", "show", or "slideDown", or any of the other jQuery show effects
showEffectSpeed String or Number "medium" "slow", "medium", "fast", or any numeric number (milliseconds)
hideEffect String "none" "none", "fadeOut", "hide", "slideUp", or any of the jQuery hide effects

Tocify also offers setOptions () and option () to set and get options, respectively arguments. Related Content more Tocify are interested can refer to the official website Tocify project: http: //gregfranko.com/jquery.tocify.js/