java前端目录_[Java教程]前端那点事儿——Tocify自动生成文档目录

[Java教程]前端那点事儿——Tocify自动生成文档目录

0 2016-06-29 22:00:07 今天偶然间看到文档服务器有一个动态目录功能，点击目录能跳转到指定的位置；窗口滑动也能自动更新目录的焦点。

效果

框架

原来使用的是一个开源的jquery-ui控件——tocify.js，它可以遍历页面，把指定的DOM元素抽取出来形成目录。

下载地址参考gitub : [gfranko/jquery.tocify.js]

开发者可以直接下载zip包使用，压缩包里面的内容包括：demos 演示页面(里面有一个google的链接，访问会超时，去掉即可)

images 可以忽略

libs 额外使用的文件，如jquery,jquery-ui,bootstrap等等

src 源文件(包括js以及css)——重点

test 忽略

其他忽略

举个栗子

h1-test-aaa

h2-test-aaa

test

h1-test-bbb

h2-test-bbb

test

h1-test-ccc

h2-test-ccc1

h2-test-ccc2

test

效果就像前面flash中一样

这个控件支持很多的参数,源码中说的比较详细了,下面是默认的参数// **context**: Accepts String: Any jQuery selector// The container element that holds all of the elements used to generate the table of contentscontext: "body",// **ignoreSelector**: Accepts String: Any jQuery selector// A selector to any element that would be matched by selectors that you wish to be ignoredignoreSelector: null,// **selectors**: Accepts an Array of Strings: Any jQuery selectors// 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 structureselectors: "h1, h2, h3",// **showAndHide**: Accepts a boolean: true or false// Used to determine if elements should be shown and hiddenshowAndHide: true,// **showEffect**: Accepts String: "none", "fadeIn", "show", or "slideDown"// Used to display any of the table of contents nested itemsshowEffect: "slideDown",// **showEffectSpeed**: Accepts Number (milliseconds) or String: "slow", "medium", or "fast"// The time duration of the show animationshowEffectSpeed: "medium",// **hideEffect**: Accepts String: "none", "fadeOut", "hide", or "slideUp"// Used to hide any of the table of contents nested itemshideEffect: "slideUp",// **hideEffectSpeed**: Accepts Number (milliseconds) or String: "slow", "medium", or "fast"// The time duration of the hide animationhideEffectSpeed: "medium",// **smoothScroll**: Accepts a boolean: true or false// Determines if a jQuery animation should be used to scroll to specific table of contents items on the pagesmoothScroll: true,// **smoothScrollSpeed**: Accepts Number (milliseconds) or String: "slow", "medium", or "fast"// The time duration of the smoothScroll animationsmoothScrollSpeed: "medium",// **scrollTo**: Accepts Number (pixels)// The amount of space between the top of page and the selected table of contents item after the page has been scrolledscrollTo: 0,// **showAndHideOnScroll**: Accepts a boolean: true or false// Determines if table of contents nested items should be shown and hidden while scrollingshowAndHideOnScroll: true,// **highlightOnScroll**: Accepts a boolean: true or false// Determines if table of contents nested items should be highlighted (set to a different color) while scrollinghighlightOnScroll: true,// **highlightOffset**: Accepts a number// The offset distance in pixels to trigger the next active table of contents itemhighlightOffset: 40,// **theme**: Accepts a string: "bootstrap", "jqueryui", or "none"// Determines if Twitter Bootstrap, jQueryUI, or Tocify classes should be added to the table of contentstheme: "bootstrap",// **extendPage**: Accepts a boolean: true or false// 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 increasedextendPage: true,// **extendPageOffset**: Accepts a number: pixels// How close to the bottom of the page a user must scroll before the page is extendedextendPageOffset: 100,// **history**: Accepts a boolean: true or false// Adds a hash to the page url to maintain historyhistory: true,// **scrollHistory**: Accepts a boolean: true or false// Adds a hash to the page url, to maintain history, when scrolling to a TOC itemscrollHistory: false,// **hashGenerator**: How the hash value (the anchor segment of the URL, following the// # character) will be generated. "compact" (default) - #CompressesEverythingTogether// "pretty" - #looks-like-a-nice-url-and-is-easily-readable// function(text, element){} - Your own hash generation function that accepts the text as an// argument, and returns the hash value.hashGenerator: "compact",// **highlightDefault**: Accepts a boolean: true or false// Set's the first TOC item as active if no other TOC item is active.highlightDefault: true

本文网址：http://www.shaoqun.com/a/235360.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

前端

0