前端那点事儿——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自动生成文档目录的更多相关文章

使用swagger在netcorewebapi项目中自动生成文档
一.背景随着前后端分离模式大行其道,我们需要将后端接口撰写成文档提供给前端,前端可以查看我们的接口,并测试,提高我们的开发效率,减少无效的沟通.在此情况下,通过代码自动生成文档,这种需求应运而生,s ...
使用 Swagger 自动生成 ASP.NET Core Web API 的文档、在线帮助测试文档（ASP.NET Core Web API 自动生成文档）
对于开发人员来说,构建一个消费应用程序时去了解各种各样的 API 是一个巨大的挑战.在你的 Web API 项目中使用 Swagger 的 .NET Core 封装 Swashbuckle 可以帮助你 ...
MVC WEB api 自动生成文档
最近在一直在用webapi做接口给移动端用.但是让我纠结的时候每次新加接口或者改动接口的时候,就需要重新修改文档这让我很是苦恼.无意中发现.webapi居然有自动生成文档的功能....真是看见了救星啊 ...
eoLinker 新功能发布，增加了识别代码注释自动生成文档功能
产品地址:https://www.eolinker.com开源代码:https://www.eolinker.com/#/os/download在线生成代码注释工具:http://tool.eolin ...
SpringBoot 集成Swagger2自动生成文档和导出成静态文件
目录 1. 简介 2. 集成Swagger2 2.1 导入Swagger库 2.2 配置Swagger基本信息 2.3 使用Swagger注解 2.4 文档效果图 3. 常用注解介绍 4. Swagg ...
【Sphinx】为Python自动生成文档
sphinx 前言 Sphinx是一个可以用于Python的自动文档生成工具,可以自动的把docstring转换为文档,并支持多种输出格式包括html,latex,pdf等开始建一个存放文档的do ...
使用doctest代码测试和Sphinx自动生成文档
python代码测试并自动生成文档 Tips:两大工具:doctest--单元测试.Sphinx--自动生成文档 1.doctest doctest是python自带的一个模块.doctest有两种使 ...
用doxygen自动生成文档
1. 添加符合doxygen解析规则的注释 (比如函数说明,函数参数/返回值说明) 用qt-creator可以在函数上方一行键入“/**”,然后直接回车,就可以自动生成默认的格式. 2. 安装doxy ...
使用Sphinx为你的python模块自动生成文档
Sphinx是一个可以用于Python的自动文档生成工具,可以自动的把docstring转换为文档,并支持多种输出格式包括html,latex,pdf等. 安装创建一个sphinx项目下面的命令会 ...

随机推荐

VS2013正确设置DLL环境变量目录的方法
VS有个比较迷惑人的选项,就是在工程>>属性中有个Executable Directories设置项, 几乎所有地球人都认为这个选项是设置exe可执行文件依赖的DLL目录用的,这无疑会方便 ...
linux split 命令将一个大的文件拆分成若干小文件
. 以行数拆分 -l 参数: 原始文件拆分后文件名前缀例:以50行对文件进行拆分 big.txt small_ 拆分后会生成 small_aa small_ab small_ac ... . 以大 ...
Java学习笔记 01 基本数据类型、标识符、关键字和运算符
一.基本数据类型基本数据类型数据类型内存空间(8位等于1字节) 取值范围备注 byte 8位 -128~127 short 16位 -32768~32767 int 32位 -2147 ...
viewpage滑动查看图片并再有缩略图预览
首先看下效果图, 主要功能分为3大块一是滑动查看,通过viewpage来实现,方法见 http://www.cnblogs.com/lovemo1314/p/6109312.html 二.点击放大 ...
vs2013的安装以及单元测试
一.安装过程 1.下载vs2013安装包,打开进行安装.安装过程时间有点长,大概用了一个小时. 2.安装完成.需要登录,可以选择以后再说. 3.选择颜色主题. 4.打开vs2013的界面. 5.添加密 ...
.NET环境下导出Excel表格的两种方式和导入两种类型的Excel表格
一.导出Excel表格的两种方式,其中两种方式指的是导出XML数据类型的Excel(即保存的时候可以只需要修改扩展名为.xls)和真正的Excel这两种. using System; using Sy ...
XML dom
将文件解析为文档三步过程为了使用 XML 文件中的信息,必须解析文件以创建一个 Document 对象. Document 对象是一个接口,因而不能直接将它实例化:一般情况下,应用程序会相应使用一 ...
linux系统用户以及用户组管理
本系列的博客来自于:http://www.92csz.com/study/linux/ 在此,感谢原作者提供的入门知识这个系列的博客的目的在于将比较常用的liunx命令从作者的文章中摘录下来,供自己 ...
Encrypt
begin#BE37F2FB34350DCA6242ADC91F33FA9ABDB6F502F5CA07E3D0CE0C3FAF8799AB3F4622564487B3729F111D9E132A08 ...
Ubuntu 14.4 下安装 Tomcat + Solr5.2
okbt.net 网站采用 Lucene.net 3.03 做数据引擎..不是很理想...后来试用了 Solr 后感觉很不错.多点同步.原子更新等很方便..抽空安装学习了下.. 1. ubuntu ...

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

效果

框架

举个栗子

前端那点事儿——Tocify自动生成文档目录的更多相关文章

随机推荐

热门专题