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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏移动开发之家

通用RecylerAdapter,内置XRecyclerView,兼容上下拉与动画,高复用,一个Adapter通用所有页面,支持空页面,懒人专属

这是欢迎各位践踏的Github:https://github.com/CarGuo

11150
来自专栏移动开发的那些事儿

内存泄露的一些坑

如上,在Activity内部如果声明一个这样的Handler,那么myHandler就默认持有Activity引用,假设Activity退出了,但是可能这时候才...

30520
来自专栏向治洪

Android的DataBinding原理介绍

Activity在inflate layout时,通过DataBindingUtil来生成绑定,从代码看,是遍历contentView得到View数组对象,然后...

50880
来自专栏battcn

Spring解密 - 默认标签的解析

紧跟上篇 Spring解密 - XML解析 与 Bean注册 ,我们接着往下分析源码

11610
来自专栏difcareer的技术笔记

彻底弄懂dalvik字节码【三】0x01:0x02:0x03:0x04:0x05:

【一】、【二】中从代码的角度分析了dalvik字节码解释执行的过程,这篇文章以一个例子来实际分析一下。

16820
来自专栏向治洪

android自定义属性

1、引言 对于自定义属性,大家肯定都不陌生,遵循以下几步,就可以实现: 自定义一个CustomView(extends View )类 编写values/a...

214100
来自专栏技术小黑屋

如何在Android中避免创建不必要的对象

在编程开发中,内存的占用是我们经常要面对的现实,通常的内存调优的方向就是尽量减少内存的占用。这其中避免创建不必要的对象是一项重要的方面。

8120
来自专栏Android开发指南

1.ActionBar

29150
来自专栏葬爱家族

Mvvm、RxJava、Retrofit 三剑合璧

说起现在Android流行的app架构,脱口而出MVP、MVVM,要问两者区别,张口就来,balabalabala。。但是公司所有项目用的都是MVP,从没正式用...

45320
来自专栏Android开发与分享

【Android】DataBinding库(MVVM设计模式)

50470

扫码关注云+社区

领取腾讯云代金券