正文

前端那点事儿——Tocify自动生成文档目录

IP云
IP云V管理员/5 阅读
08/13
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

效果

框架

原来使用的是一个开源的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