你的位置:首页 > Java教程

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


今天偶然间看到文档服务器有一个动态目录功能,点击目录能跳转到指定的位置;窗口滑动也能自动更新目录的焦点。

效果

框架

原来使用的是一个开源的jquery-ui控件——tocify.js,它可以遍历页面,把指定的DOM元素抽取出来形成目录。
下载地址参考gitub : [gfranko/jquery.tocify.js]

开发者可以直接下载zip包使用,压缩包里面的内容包括:

  • demos 演示页面(里面有一个google的链接,访问会超时,去掉即可)
  • images 可以忽略
  • libs 额外使用的文件,如jquery,jquery-ui,bootstrap等等
  • src 源文件(包括js以及css)——重点
  • test 忽略
  • 其他忽略

举个栗子

 

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><link href="styles/bootstrap.css" rel="stylesheet"><link href="../src/stylesheets/jquery.tocify.css" rel="stylesheet"><link href="styles/prettify.css" type="text/css" rel="stylesheet" /><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><div class="container-fluid"><div class="row-fluid"><div class="span3"><div id="toc"></div><!--/.well --></div><!--/span--><div class="span9"><div class="hero-unit"><h1>h1-test-aaa</h1><h2>h2-test-aaa</h2><p>test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p><h1>h1-test-bbb</h1><h2>h2-test-bbb</h2><p>test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p><h1>h1-test-ccc</h1><h2>h2-test-ccc1</h2><h2>h2-test-ccc2</h2><p>test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p></div><!--/span--></div><!--/row--></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>$(function() {var toc = $("#toc").tocify({selectors: "h1,h2,h3,h4,h5"});});</script></body></html>

效果就像前面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