» » Tocify: Dynamic Node Contents Menu Builder

 

Tocify: Dynamic Node Contents Menu Builder

Author: bamboo06 on 17-08-2016, 01:00, views: 4770

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/

Category: Javascript / Plugins

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
27 March 2017 02:32

Eadhelm

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
This is some pretty good information, which I have not been able to get from else where. I tried going through a couple of essay writing services but it did not work out. I must say it has been delightful being here.

<
  • 0 Comments
  • 0 Articles
19 June 2017 03:09

Limo Party Bus

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Marvelous article! I need individuals to know exactly how great this data is in your article. It's intriguing, convincing substance. Your perspectives are much like my own particular concerning this subject. Limo Party Bus

<
  • 0 Comments
  • 0 Articles
24 June 2017 07:56

sending a pr release

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Thanks so much with this fantastic new web site. I’m very fired up to show it to anyone. It makes me so satisfied your vast understanding and wisdom have a new channel for trying into the world. sending a pr release

<
  • 0 Comments
  • 0 Articles
10 August 2017 21:10

Alex Sam

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
The main individuals who might need to exchange cash by means of Western Union through an individual record would be a trickster or a tax criminal. movie production companies. It doesn't make a difference in the event that they can see your other record or not. In the event that they move cash into your record, let you exchange it out and afterward surprisingly the first exchange wasn't legitimate.

<
  • 0 Comments
  • 0 Articles
22 September 2017 17:52

Deanna Williams

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
By and large, bootstrapping ordinarily alludes to a self-beginning procedure that should continue without outside info. In PC innovation the term (normally abbreviated to booting) more often than not alludes to the way toward stacking the fundamental programming into the memory of a PC after power-on or general reset, particularly the working framework which will then deal with stacking other programming as required. Jaime Lannister Jacket

<
  • 2 Comments
  • 0 Articles
27 September 2017 21:34

Emilyjack

Reply
  • Group: Members
  • РRegistered date: 27.09.2017
  • Status: Currently Offline
 
Outstanding amongst other approaches to guarantee that you get the correct outcomes frame the opportune individuals is to endeavor to remain on top of it. I will Purchase An Assignment on this and ensure that I have to get the best outcomes shape the perfect individuals.

<
  • 0 Comments
  • 0 Articles
20 October 2017 20:28

Galang

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
tes saja lah
htlm code
<a href="http://www.undangancinta.com">undangan pernikahan</a>
<a href="http://www.undangancinta.com">undangan pernikahan unik</a>
<a href="http://www.undangancinta.com">undangan pernikahan unik</a>


ini cuma pake ling
http://www.undangancinta.com

bb code
undangan pernikahan
undangan pernikahan simple
undangan pernikahan unik

ژðƂ

<
  • 0 Comments
  • 0 Articles
27 November 2017 21:06

Heather Rosado

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Most present day pianos have a column of 88 high contrast keys, 52 white keys for the notes of the C significant scale (C, D, E, F, G, An and B) and 36 shorter dark keys, which are raised over the white keys, and set further back on the console. Dave Franco Biker Jacket

<
  • 0 Comments
  • 0 Articles
17 February 2018 17:00

FilmoraGo

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Information
Comment on the news site is possible only within (days) days from the date of publication.