yaffs.net Git - yaffs-website/blob - web/libraries/jquery.tocify.js-master/test/spec/javascripts/fixtures/tocifyFixture.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <meta http-equiv="X-UA-Compatible" content="chrome=1">
   6     <title>Tocify by gfranko</title>
   7     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
   8
   9   </head>
  10   <body>
  11 <div id="toc">
  12   <div class="toc-title">
  13     <h1>Tocify</h1>
  14     <p>A jQueryUI Table of Contents Plugin</p>
  15     <div id="switcher" align="center"></div>
  16   </div>
  17 </div>
  18 <div class="documentation well">
  19 <br /><b />
  20 <h1>Description</h1>
  21 <br />
  22 <div class="github-widget" data-repo="gfranko/jquery.tocify.js"></div>
  23 <br />
  24 <h3>Notable Features</h3>
  25 <br />
  26 <p>Supports <span class="headerDoc">HTML5 History pushstate API</span> (via History.js) for forward and back button support</p>
  27 <br />
  28 <p>Supports styling with <span class="headerDoc">jQueryUI Themeroller</span></p>
  29 <br />
  30 <p>Supports show/hide animations with <span class="headerDoc">jQuery effects</span></p>
  31 <br />
  32 <p>Supports <span class="headerDoc">smooth scrolling animations</span>
  33 </p>
  34 <br />
  35 <p>Supports <span class="headerDoc">dynamic scroll highlighting</span></p>
  36 <br />
  37 <p>Supports <span class="headerDoc">dynamic scroll show/hide effects</span></p>
  38 <br />
  39 <p>Supports <span class="headerDoc">page extender</span> option to make sure a page is big enough to scroll to all table of content items</p>
  40 <br />
  41 <h1>Requirements</h1>
  42 <br />
  43 <h4>jQuery 1.7.2+</h4>
  44 <p>The latest version of jQuery is always recommended</p>
  45 <br />
  46 <h4>jQueryUI Widget Factory 1.8.20+</h4>
  47 <p>The latest version of the jQueryUI Widget Factory is always recommended</p>
  48 <br />
  49 <h1>Optional Dependencies</h1>
  50 <br />
  51 <h4>History.js</h4>
  52 <p>History.js is required if you want forward and back button support.
  53 <br /><br />
  54 Note: If you do not include History.js, then Tocify will not have history support, but it will still be functional.
  55 </p>
  56 <br />
  57 <h1 class="getting-started-test-marker">Getting Started</h1>
  58 <br />
  59 <h3>Downloads</h3>
  60 <br />
  61 <p>Download the latest versions of...</p>
  62 1. <a href="http://www.jquery.com" target="_blank">jQuery</a>
  63 <br />
  64 2. <a href="http://jqueryui.com/download" target="_blank">jQueryUI Widget Factory</a> (You only need the Widget component underneath the UI Core dependency)
  65 <br />
  66 3. <a href="https://github.com/balupton/History.js/" target="_blank">History.js</a> (If you want forward and back button support)
  67
  68 <br /><br />
  69 <h1>Options</h1>
  70 <br />
  71 <h3>context</h3>
  72 <p>The container element that holds all of the elements used to generate the table of contents.</p>
  73 <br />
  74 <p>Accepts String: Any jQuery selector</p>
  75 <br />
  76 <h6>Default</h6>
  77 <p>context: "body"</p>
  78 <br /><br />
  79 <h3>selectors</h3>
  80 <p>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</p>
  81 <br />
  82 <p>Accepts a String Array: Each string must be a valid jQuery selector</p>
  83 <br />
  84 <h6>Default</h6>
  85 <p>selectors: ["h1"]</p>
  86 <br /><br />
  87 <h3>showEffect</h3>
  88 <p>Used to display any of the table of contents nested items</p>
  89 <br />
  90 <p>Accepts String: "none", "fadeIn", "show", "slideDown", or any of the jQueryUI show effects (i.e. "bounce")</p>
  91 <br />
  92 <h6>Default</h6>
  93 <p>showEffect: "slideDown"</p>
  94 <br /><br />
  95 <h3>showEffectSpeed</h3>
  96 <p>The time duration of the show animation</p>
  97 <br />
  98 <p>Accepts Number (milliseconds) or String: "slow", "medium", or "fast"</p>
  99 <br />
 100 <h6>Default</h6>
 101 <p>showEffectSpeed: "medium"</p>
 102 <br /><br />
 103 <h3>hideEffect</h3>
 104 <p>Used to hide any of the table of contents nested items</p>
 105 <br />
 106 <p>Accepts String: "none", "fadeOut", "hide", "slideUp", or any of the jQueryUI hide effects (i.e. "explode")</p>
 107 <br />
 108 <h6>Default</h6>
 109 <p>hideEffect: "slideUp"</p>
 110 <br /><br />
 111 <h3>hideEffectSpeed</h3>
 112 <p>The time duration of the hide animation</p>
 113 <br />
 114 <p>Accepts Number (milliseconds) or String: "slow", "medium", or "fast"</p>
 115 <br />
 116 <h6>Default</h6>
 117 <p>hideEffectSpeed: "medium"</p>
 118 <br /><br />
 119 <h3>smoothScroll</h3>
 120 <p>Animates the page scroll when specific table of content items are clicked and the page moves up or down</p>
 121 <br />
 122 <p>Accepts a boolean: true or false</p>
 123 <br />
 124 <h6>Default</h6>
 125 <p>smoothScroll: true</p>
 126 <br /><br />
 127 <h3>smoothScrollSpeed</h3>
 128 <p>The time duration of the smoothScroll animation</p>
 129 <br />
 130 <p>Accepts Number (milliseconds) or String: "slow", "medium", or "fast"</p>
 131 <br />
 132 <h6>Default</h6>
 133 <p>smoothScrollSpeed: "medium"</p>
 134 <br /><br />
 135 <h3>showAndHideOnScroll</h3>
 136 <br />
 137 <p>Determines if table of content nested items should be shown and hidden while a user scrolls the page</p>
 138 <br />
 139 <p>Accepts a boolean: true or false</p>
 140 <br />
 141 <h6>Default</h6>
 142 <br />
 143 <p>showAndHideOnScroll: true</p>
 144 <br /><br />
 145 <h3>highlightOnScroll</h3>
 146 <br />
 147 <p>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</p>
 148 <br />
 149 <p>Accepts a boolean: true or false</p>
 150 <br />
 151 <h6>Default</h6>
 152 <br />
 153 <p>highlightOnScroll: true</p>
 154 <br /><br />
 155
 156 <h3>highlightOffset</h3>
 157 <br />
 158 <p>The offset distance in pixels to trigger the next active table of contents item</p>
 159 <br />
 160 <p>Accepts a number</p>
 161 <br />
 162 <h6>Default</h6>
 163 <br />
 164 <p>highlightOffset: 40</p>
 165 <br /><br />
 166
 167 <h3>jqueryUI</h3>
 168 <br />
 169 <p>Determines if jqueryUI or regular CSS classes will be added to the table of contents</p>
 170 <br />
 171 <p>Accepts a boolean: true or false</p>
 172 <br />
 173 <h6>Default</h6>
 174 <br />
 175 <p>jqueryUI: true</p>
 176 <br /><br />
 177
 178 <h3>extendPage</h3>
 179 <br />
 180 <p>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</p>
 181 <br />
 182 <p>Accepts a boolean: true or false</p>
 183 <br />
 184 <h6>Default</h6>
 185 <br />
 186 <p>extendPage: true</p>
 187
 188 </div>
 189
 190   </body>
 191 </html>