automizy-js-api

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Tocify by Greg Franko</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content="">  <link href="styles/bootstrap.css" rel="stylesheet"> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/black-tie/jquery-ui.css" rel="stylesheet"> <link href="../src/stylesheets/jquery.tocify.css" rel="stylesheet"> <link href="styles/prettify.css" type="text/css" rel="stylesheet" />    <link rel="shortcut icon" href="../assets/ico/favicon.ico"> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png"> <style> body { padding-top: 20px; } p { font-size: 16px; } .headerDoc { color: #005580; } @media (max-width: 767px) { #toc { position: relative; width: 100%; margin: 0px 0px 20px 0px; } } </style> </head> <body> <a href="https://github.com/gfranko/jquery.tocify.js" target="_blank" id="fork-me"><img style="position: fixed;top: 0; right: 0; border: 0;z-index:999999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub" alt="Fork me on GitHub"></a> <div class="container-fluid"> <div class="row-fluid"> <div class="span3"> <div id="toc"> </div> </div> <div class="span9"> <div class="hero-unit"> <h1>Tocify</h1> <br /> <h2>Description</h2> <div class="github-widget" data-repo="gfranko/jquery.tocify.js"></div> <br /> <p>The project is hosted on <a href="https://github.com/gfranko/jquery.tocify.js" target="_blank" class="projectLinks">Github</a>, and the <a href="http://gregfranko.com/jquery.tocify.js/docs/jquery.tocify.html" target="_blank" class="projectLinks">annotated source code</a> is available. Tocify is available for use under the <a href="https://github.com/gfranko/jquery.tocify.js/blob/master/MIT-LICENSE.txt" target="_blank" class="projectLinks">MIT software license</a>. You can report bugs and discuss features on the <a href="https://github.com/gfranko/jquery.tocify.js/issues?sort=created&direction=desc&state=open" target="_blank">GitHub issues page</a>, or send tweets to <a href="http://www.twitter.com/gregfranko" target="_blank">@gregfranko</a>. </p> <p><a class="btn btn-primary btn-large" href="https://github.com/gfranko/jquery.tocify.js" target="_blank">Fork on Github »</a></p> </div> <h2>Requirements</h2> <br /> <p class="well"><a href="http://jquery.com" target="_blank">jQuery 1.7.2+</a> (It is always recommended to use the latest version of jQuery) <br /><br /> <a href="http://jqueryui.com/download" target="_blank">jQueryUI Widget Factory 1.8.21+</a> (It is always recommended to use the latest version of the jQueryUI Widget Factory) </p> <br /> <h2>Optional Dependencies</h2> <br /> <p class="well"> <a href="http://twitter.github.com/bootstrap/customize.html" target="_blank">Twitter Bootstrap</a> or <a href="http://jqueryui.com/download" target="_blank">jQueryUI CSS Theme</a> <br /><br /> <span class="note"><strong>Note: </strong>A Twitter Bootstrap or jQueryUI theme is only required if you want to use either framework to style your table of contents. </span> </p> <br /> <h2>Notable Features</h2> <br /> <p class="well"> Supports <span class="headerDoc">forward and back button</span> support <br /><br /> Supports styling with <span class="headerDoc">Twitter Bootstrap</span> or <span class="headerDoc">jQueryUI Themeroller</span> <br /><br /> Supports show/hide animations with <span class="headerDoc">jQuery effects</span> <br /><br /> Supports <span class="headerDoc">smooth scrolling animations</span> <br /><br /> Supports <span class="headerDoc">dynamic scroll highlighting</span> <br /><br /> Supports <span class="headerDoc">dynamic scroll show/hide effects</span> <br /><br /> Supports <span class="headerDoc">page extender</span> option to make sure a page is big enough to scroll to all table of content items <br /><br /> <h2>Browser Support</h2> <br /> <p class="well">Tested in <span class="headerDoc">IE7+, Firefox 4+, Chrome, Safari 4+, and Opera 11+</span></p> <br /> <h2>Getting Started</h2> <br /> <h3>Downloads</h3> <br /> <p> Download the latest versions of... </p> <br /> <ol class="well"> <li><a href="http://www.jquery.com" target="_blank">jQuery</a></li> <br /> <li><a href="http://jqueryui.com/download" target="_blank">jQueryUI Widget Factory</a> (You only need the Widget component underneath the UI Core dependency)</li> <br /> <li><a href="https://github.com/gfranko/jquery.tocify.js/zipball/master">Tocify</a> (You only need jquery.tocify.js and jquery.tocify.css)</li> <br /> <li><a href="http://twitter.github.com/bootstrap/customize.html" target="_blank">Twitter Bootstrap</a> or <a href="http://jqueryui.com/download" target="_blank">jQueryUI CSS Theme</a> (Only required if you want to use either framework to style your table of contents)</li> </ol> <br /> <p> <h3>Include CSS and JavaScript files</h3> </p> <br /> <span class="note"><strong>CSS</strong></span> <pre class="prettyprint"> <link type="text/css" rel="stylesheet" href="jquery.tocify.css" /> <link type="text/css" rel="stylesheet" href="bootstrap.css" /> </pre> <br /> <span class="note"><strong>JavaScript</strong></span> <pre class="prettyprint"> <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> </pre> <span class="note"><strong>Note:</strong> This assumes that you have downloaded the CSS and JavaScript files to the same folder as your HTML page. Modify the <strong>href</strong> and <strong>src</strong> attributes if you have a different folder structure. <br /><br /> Also, if you are using jQueryUI to style your table of contents list, then add all of the jQueryUI images to your <strong>images</strong> folder. Keep in mind that depending on your folder structure, you may need to update the image paths inside of the jQueryUI CSS file. </span> <br /><br /> <p> <h3>HTML</h3> </p> <span class="note"> Create a <strong>div</strong> element with a unique id or class (eg. "toc") </span> <br /><br /> <pre class="prettyprint"> <div id="toc"></div> </pre> <br /> <h3>CSS</h3> </p> <p class="well"> <span class="note"> <strong>Note:</strong> Modify the Tocify CSS file to fit your custom needs </span> </p> <br /> <p> <h3>JavaScript</h3> </p> <p class="well"> <span class="note"> <strong>Call the plugin: </strong> In your JavaScript code, call the <strong>tocify()</strong> method on your HTML div. </span> </p> <pre class="prettyprint"> //Executes your code when the DOM is ready. Acts the same as $(document).ready(). $(function() { //Calls the tocify method on your HTML div. $("#toc").tocify(); }); </pre> <h2>Options API</h2> <br /> <h3>Options</h3> <table class="table table-striped table-bordered table-condensed"> <tr> <th>Name</th> <th>Type</th> <th>Default</th> <th>Options</th> </tr> <tr> <td class="optionName" title="context" data-content="The container element that holds all of the elements used to generate the table of contents"><a href="#">context</a></td> <td>String</td> <td>"body"</td> <td>Any valid jQuery selector</td> </tr> <tr> <td class="optionName" title="ignoreSelector" data-content="A selector to any element that would be matched by selectors that you wish to be ignored"><a href="#">ignoreSelector</a></td> <td>String</td> <td>null</td> <td>Any valid jQuery selector</td> </tr> <tr> <td class="optionName" title="selectors" data-content="The element's used to generate the table of contents. The order is very important since it will determine the table of content's nesting structure."><a href="#">selectors</a></td> <td>String</td> <td>"h1,h2,h3"</td> <td>Each comma separated selector must be a header element.</td> </tr> <tr> <td class="optionName" title="showAndHide" data-content="Used to determine if elements should be shown and hidden. Turn this to false and remove the display:none CSS property for subheader elements (in jquery.tocify.css) to have a non-animated/fully visible table of contents."><a href="#">showAndHide</a></td> <td>Boolean</td> <td>true</td> <td>true or false</td> </tr> <tr> <td class="optionName" title="showEffect" data-content="Used to display any of the table of contents nested items."><a href="#">showEffect</a></td> <td>String</td> <td>"slideDown"</td> <td>"none", "fadeIn", "show", or "slideDown", or any of the other jQuery show effects</td> </tr> <tr> <td class="optionName" title="showEffectSpeed" data-content="The time duration of the show effect."><a href="#">showEffectSpeed</a></td> <td>String or Number</td> <td>"medium"</td> <td>"slow", "medium", "fast", or any numeric number (milliseconds)</td> </tr> <tr> <td class="optionName" title="hideEffect" data-content="Used to hide any of the table of contents nested items."><a href="#">hideEffect<a/></td> <td>String</td> <td>"none"</td> <td>"none", "fadeOut", "hide", "slideUp", or any of the jQuery hide effects</td> </tr> <tr> <td class="optionName" title="hideEffectSpeed" data-content="The time duration of the hide effect."><a href="#">hideEffectSpeed</a></td> <td>String or Number</td> <td>"medium"</td> <td>"slow", "medium", "fast", or any numeric number (milliseconds)</td> </tr> <tr> <td class="optionName" title="smoothScroll" data-content="Animates the page scroll when specific table of content items are clicked and the page moves up or down."><a href="#">smoothScroll</a></td> <td>Boolean</td> <td>true</td> <td>true or false</td> </tr> <tr> <td class="optionName" title="smoothScrollSpeed" data-content="The time duration of the smoothScroll animation."><a href="#">smoothScrollSpeed</a></td> <td>Number or String</td> <td>"medium"</td> <td>Accepts Number (milliseconds) or String: "slow", "medium", or "fast"</td> </tr> <tr> <td class="optionName" title="scrollTo" data-content="The amount of space between the top of page and the selected table of contents item after the page has been scrolled."><a href="#">scrollTo</a></td> <td>Number</td> <td>0</td> <td>Accepts any number (pixels)</td> </tr> <tr> <td class="optionName" title="showAndHideOnScroll" data-content="Determines if table of content nested items should be shown and hidden while a user scrolls the page."><a href="#">showAndHideOnScroll</a></td> <td>Boolean</td> <td>true</td> <td>true or false</td> </tr> <tr> <td class="optionName" title="highlightOnScroll" data-content="Determines if table of content nested items should be highlighted (set to a different background color to show it is the currently active item) while scrolling"><a href="#">highlightOnScroll</a></td> <td>Boolean</td> <td>true</td> <td>true or false</td> </tr> <tr> <td class="optionName" title="highlightOffset" data-content="The offset distance in pixels to trigger the next active table of contents item"><a href="#">highlightOffset</a></td> <td>Number</td> <td>40</td> <td>Accepts any number (pixels)</td> </tr> <tr> <td class="optionName" title="theme" data-content="Determines if Twitter Bootstrap, jQueryUI, or Tocify classes should be added to the table of contents"><a href="#">theme</a></td> <td>String</td> <td>"twitterBootstrap"</td> <td>"twitterBootstrap", "jqueryUI", or "none"</td> </tr> <tr> <td class="optionName" title="extendPage" data-content="If a user scrolls to the bottom of the page and the page is not tall enough to scroll to the last table of contents item, then the page height is increased"><a href="#">extendPage</a></td> <td>Boolean</td> <td>true</td> <td>true or false</td> </tr> <tr> <td class="optionName" title="extendPageOffset" data-content="How close to the bottom of the page a user must scroll before the page is extended"><a href="#">extendPageOffset</a></td> <td>Number</td> <td>100</td> <td>Any number (pixels)</td> </tr> <tr> <td class="optionName" title="history" data-content="Adds a hash to the page url to maintain history"><a href="#">history</a></td> <td>Boolean</td> <td>true</td> <td>true or false</td> </tr> <tr> <td class="optionName" title="hashGenerator" data-content="How the URL hash value get's generated."><a href="#">hashGenerator</a></td> <td>String or Function</td> <td>"compact"</td> <td>"compact", "pretty", function(text, element){}. <br /> <strong>Compact</strong> - #CompressesEverythingTogether. <br /> <strong>Pretty</strong> - #looks-like-a-nice-url-and-is-easily-readable. <br /> <strong>function(text, element){}</strong> - Your own hash generation function that accepts the text as an argument, and returns the hash value.</td> </tr> <tr> <td class="optionName" title="highlightDefault" data-content="Set's the first TOC item as active if no other TOC item is active."><a href="#">highlightDefault</a></td> <td>Boolean</td> <td>true</td> <td>true or false</td> </tr> <tr> <td class="optionName" title="scrollHistory" data-content="Adds a hash to the page url, to maintain history, when scrolling to a TOC item."><a href="#">scrollHistory</a></td> <td>Boolean</td> <td>false</td> <td>true or false</td> </tr> </table> <br /> <h3>Setting Options</h3> <p class="well"> All options can be <strong>set</strong> when the plugin is called. Certain options can also be set after the plugin is called using the <strong>setOption()</strong> or <strong>setOptions()</strong> methods.</p> <span class="note">Here is an example of setting a <strong>single option</strong> when the plugin is first invoked:</span> <pre class="prettyprint"> //Executes your code when the DOM is ready. Acts the same as $(document).ready(). $(function() { // Calls the selectBoxIt method on your HTML select box and updates the showEffect option var toc = $("#toc").tocify({ showEffect: "fadeIn" }); }); </pre> <br /> <span class="note">Here is an example of setting a <strong>single option</strong> after the plugin is first invoked using the <strong>setOption</strong> method:</span> <pre class="prettyprint"> //Executes your code when the DOM is ready. Acts the same as $(document).ready(). $(function() { // Calls the selectBoxIt method on your HTML select box var toc = $("#toc").tocify().data("toc-tocify"); // Sets the smoothScroll option to false toc.setOption("showEffect", "fadeIn"); }); </pre> <br /> <span class="note">Here is an example of setting a <strong>multiple options</strong> after the plugin is first invoked using the <strong>setOptions</strong> method:</span> <pre class="prettyprint"> //Executes your code when the DOM is ready. Acts the same as $(document).ready(). $(function() { // Calls the selectBoxIt method on your HTML select box and updates the showEffect option var toc = $("#toc").tocify().data("toc-tocify"); // Sets the showEffect, scrollTo, and smoothScroll options toc.setOptions({ showEffect: "fadeIn", scrollTo: 50, smoothScroll: false }); }); </pre> <br /> <h3>Getting Options</h3> <p class="well"> A single option can be <strong>retrieved</strong> by using the <strong>option()</strong> method. All of the current options can be retrieved by referencing the <strong>options</strong> property. </p> <br /> <span class="note">Here is an example of retrieving a <strong>single option</strong> after the plugin is called using the <strong>option()</strong> method:</span> <pre class="prettyprint"> //Executes your code when the DOM is ready. Acts the same as $(document).ready(). $(function() { //Calls the tocify method on your HTML div var toc = $("#toc").tocify().data("toc-tocify"); // Writes the showEffect option to the console console.log(toc.option("showEffect")); }); </pre> <br /> <span class="note">Here is an example of retrieving <strong>all current options</strong> after the plugin is called using the <strong>options</strong> property:</span> <pre class="prettyprint"> //Executes your code when the DOM is ready. Acts the same as $(document).ready(). $(function() { //Calls the selectBoxIt method on your HTML select box var toc = $("#toc").tocify().data("toc-tocify"); // Writes all of the current plugin options to the console console.log(toc.options); }); </pre> <h2>Inspired By</h2> <br /> <h3 class="headerDoc well"><a href="http://www.canjs.us/" target="_blank">Can.js</a></h3> <br /><br /> <h3 class="headerDoc well"><a href="http://bonsaiden.github.com/JavaScript-Garden/" target="_blank">JavaScript Garden</a></h3> <br /> <h2>Donation</h2> <p class="well"> If you would like to support the Tocify project, please consider sending a donation to Greg Franko (the project maintainer). All donations (small or large) are appreciated and help the continued development of the project.   <iframe style="border: 0; margin: 0; padding: 0;" src="https://www.gittip.com/gfranko/widget.html" width="48pt" height="20pt"></iframe> </p> <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----"> <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> </form> </div> </div> </div>   <script src="../libs/jquery/jquery-1.8.3.min.js"></script> <script src="../libs/jqueryui/jquery-ui-1.9.1.custom.min.js"></script> <script src="javascripts/bootstrap.js"></script> <script src="../src/javascripts/jquery.tocify.js"></script> <script src="javascripts/prettify.js"></script> <script> $(function() { var toc = $("#toc").tocify({ selectors: "h2,h3,h4,h5" }).data("toc-tocify"); prettyPrint(); $(".optionName").popover({ trigger: "hover" }); }); </script> </body> </html>