前端那点事儿——Tocify自动生成文档目录
时间:2022-04-22
本文章向大家介绍前端那点事儿——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
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android使用MulticastSocket实现多点广播图片
- Android自定义view仿微信刷新旋转小风车
- sqlmap手册
- Android绘制动态折线图
- Python PIL库图片灰化处理
- django 实现简单的插入视频
- 快速解决Django关闭Debug模式无法加载media图片与static静态文件
- Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
- Django media static外部访问Django中的图片设置教程
- Python图片处理模块PIL操作方法(pillow)
- Android自定义View实现圆环带数字百分比进度条
- Python按照list dict key进行排序过程解析
- Java并发编程的艺术(一)
- Python3.7 读取音频根据文件名生成脚本的代码
- python如何判断IP地址合法性