今天偶然間看到文檔服務器有一個動態目錄功能，點擊目錄能跳轉到指定的位置；窗口滑動也能自動更新目錄的焦點。
效果
框架
原來使用的是一個開源的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 contents
context: "body",
// **ignoreSelector**: Accepts String: Any jQuery selector
// A selector to any element that would be matched by selectors that you wish to be ignored
ignoreSelector: 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 structure
selectors: "h1, h2, h3",
// **showAndHide**: Accepts a boolean: true or false
// Used to determine if elements should be shown and hidden
showAndHide: true,
// **showEffect**: Accepts String: "none", "fadeIn", "show", or "slideDown"
// Used to display any of the table of contents nested items
showEffect: "slideDown",
// **showEffectSpeed**: Accepts Number (milliseconds) or String: "slow", "medium", or "fast"
// The time duration of the show animation
showEffectSpeed: "medium",
// **hideEffect**: Accepts String: "none", "fadeOut", "hide", or "slideUp"
// Used to hide any of the table of contents nested items
hideEffect: "slideUp",
// **hideEffectSpeed**: Accepts Number (milliseconds) or String: "slow", "medium", or "fast"
// The time duration of the hide animation
hideEffectSpeed: "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 page
smoothScroll: true,
// **smoothScrollSpeed**: Accepts Number (milliseconds) or String: "slow", "medium", or "fast"
// The time duration of the smoothScroll animation
smoothScrollSpeed: "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 scrolled
scrollTo: 0,
// **showAndHideOnScroll**: Accepts a boolean: true or false
// Determines if table of contents nested items should be shown and hidden while scrolling
showAndHideOnScroll: true,
// **highlightOnScroll**: Accepts a boolean: true or false
// Determines if table of contents nested items should be highlighted (set to a different color) while scrolling
highlightOnScroll: true,
// **highlightOffset**: Accepts a number
// The offset distance in pixels to trigger the next active table of contents item
highlightOffset: 40,
// **theme**: Accepts a string: "bootstrap", "jqueryui", or "none"
// Determines if Twitter Bootstrap, jQueryUI, or Tocify classes should be added to the table of contents
theme: "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 increased
extendPage: true,
// **extendPageOffset**: Accepts a number: pixels
// How close to the bottom of the page a user must scroll before the page is extended
extendPageOffset: 100,
// **history**: Accepts a boolean: true or false
// Adds a hash to the page url to maintain history
history: true,
// **scrollHistory**: Accepts a boolean: true or false
// Adds a hash to the page url, to maintain history, when scrolling to a TOC item
scrollHistory: 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