前端那点事儿——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 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

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

java前端目录_[Java教程]前端那点事儿——Tocify自动生成文档目录
[Java教程]前端那点事儿--Tocify自动生成文档目录 0 2016-06-29 22:00:07 今天偶然间看到文档服务器有一个动态目录功能,点击目录能跳转到指定的位置:窗口滑动也能自动更新目 ...
docwizard c++程序文档自动生成工具_如何开发一个基于 TypeScript 的工具库并自动生成文档
为什么用 TypeScript? TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any ...
java接口废弃注释_Spring Boot如何让Web API自动生成文档，并解决swagger-annotations的API注解description属性废弃的问题...
前后端分离的系统架构中,前端开发人员需要查看后端WEB API的文档来进行开发.采用后端API文档自动生成的方式,可以大幅提高开发效率.swagger是一个被广泛使用的文档自动生成工具,可以与多种编程 ...
Objective-C自动生成文档工具:appledoc
作者 iOS_小松哥关注 2016.12.13 15:47* 字数 919 阅读 727评论 10喜欢 35 由于最近琐事比较多,所以好久没有写文章了.今天我们聊一聊Objective-C自动生成文 ...
Objective-C 自动生成文档工具:appledoc
来源:iOS_小松哥 www.jianshu.com/p/fd4d8d6b6177 如有好文章投稿,请点击 → 这里了解详情由于最近琐事比较多,所以好久没有写文章了.今天我们聊一聊Objective ...
java动态生成sdk_android、java制作sdk以及自动生成文档
最近一直在做android开发,昨天经理让我写个接口SDK做个接口文档,以便后面的开发. 这让我很焦灼,SDK怎么做?要是只有敲代码还好.可是那个接口文档!!!文档这东西最讨厌了,头都大了后来查了下 ...
java如何写安卓接口文档_android、java制作sdk以及自动生成文档
最近一直在做android开发,昨天经理让我写个接口SDK做个接口文档,以便后面的开发. 这让我很焦灼,SDK怎么做?要是只有敲代码还好.可是那个接口文档!!!文档这东西最讨厌了,头都大了后来查了下 ...
django集成Sphinx，为项目自动生成文档
Sphinx是一个工具,可以轻松创建智能和漂亮的文档,他与Python自带的pydoc是同一类产品,但比pydoc更加优秀,还有很多主题可以选择,平时在开发过程中,我们看到的第三方包的文档,基本上都是 ...
php代码自动生成文档-phpDocumentor
概述 PHPDocumentor 能够由你的代码自动生成文档.是一个用PHP写的强盛的文档主动生成对象,可以直接使用命令来处理.对有范例解释的php顺序,可以快速生成具有布局清楚.彼此参照.索引等功效 ...

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

效果

框架

举个栗子

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

最新文章

热门文章