自动创建目录导航菜单
Posted Dragon_GL
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自动创建目录导航菜单相关的知识,希望对你有一定的参考价值。
1、灵感
AnchorJS 是 AutocJS 的创作灵感。既然 AnchorJS 可创建标题的链接,为什么不直接给文章生成一个目录(Table of Contents)导航呢? 于是就有了 AutocJS。
2、 What is AutocJS?
AutocJS 是一个专门用来生成文章目录(Table of Contents)导航的工具。AutocJS 会查找文章指定区域中的所有 h1~h6 的标签,并自动分析文章的层次结构,生成文章的目录导航(独立的侧边栏菜单,或者在文章的开始处生成文章目录)。
3、Why AutocJS?
AnchorJS 由于不是中国工程师开发的,所以对中文支持不好,无法给中文标题生成锚点。而 AutocJS 即支持英文也支持中文。AutocJS 在拥有 AnchorJS 的基础功能同时,还可以自动分析文章的层次结构,生成文章的目录导航。
4、 AutocJS 的特点
- 支持 AMD 和 CMD 规范;
- 可以作为独立模块使用,也可以作为 jQuery 插件使用;
- 支持中文和英文(标题文字);
- 界面简洁大方;
- 拥有 AnchorJS 的基础功能;
- 即支持生成独立文章目录导航菜单,又可以直接在文章中生成目录导航;
- 可直接在段落标题上显示段落层级索引值;
- 配置灵活,丰富,让你随心所欲掌控 AutocJS;
5、安装
npm install
npm install autocjs
bower install
bower install autocjs
6、使用
Use as a CommonJS/AMD/CMD Module
var AutocJS = require('autocjs');
new AutocJS(
article: '#article'
);
Use as a jQuery plugin
$('#article').autoc(
title: 'AutocJS v0.2.0'
);
Use as an independent Module
new AutocJS(
article: '#article',
title: 'AutocJS v0.2.0'
);
7、API
This task primarily delegates to AutocJS, so please consider the AutocJS documentation as required reading for advanced configuration.
7-1、选项
article
Type: String htmlElement
Default: ' '
必选,用来指定页面中显示文章正文的 DOM 节点或者 ID 选择器。如果没有指定它,则程序将不会执行。查看详情
selector
Type: String
Default: 'h1,h2,h3,h4,h5,h6'
可选,用来指定 article 节点下,要生成导航的标题标签的选择器。查看详情
title
Type: String
Default: 'Table of Contents'
可选,用来指定 AutocJS 自动创建的文章导读索引导航菜单的标题文字。查看详情
isAnchorsOnly
Type: Boolean
Default: false
可选,用来指定是否只创建标题链接。查看详情
isAnimateScroll
Type: Boolean
Default: true
可选,用来指定在点击段落索引导航链接时,是使用动画滚动定位,还是使用默认的锚点链接行为。查看详情
hasDirectoryInArticle
Type: Boolean
Default: false
可选,用来指定是否在文章(开始位置)中创建目录导航。查看详情
hasChapterCodeAtHeadings
Type: Boolean
Default: false
可选,用来指定是否在文章标题中显示该标题的段落索引编号。查看详情
hasChapterCodeInDirectory
Type: Boolean
Default: true
可选,用来指定是否在导航菜单中显示段落索引编号。查看详情
Properties
defaults:
Type: Objects
静态属性,存储的是 AutocJS 对象默认配置选项。查看详情
version
Type: String
存储的是 AutocJS 当前的版本号。查看详情
8、Methods
init
- 初始化程序
initElements
- 初始化 elements 属性(AutocJS 对象相关 DOM 元素)
initData
- 初始化 data 属性(文章段落章节数据)
reload
- (根据新的配置信息)重启程序
set
- 设置 attributes 属性
get
- 返回某个 attributes 属性
dom
- 返回 elements 属性
article
- 返回页面文章正文的容器 DOM 元素
headings
- 返回 article 中 selector 匹配的所有标题 DOM 元素
chapters
- 设置或者返回 data.chapters 属性
anchors
- 返回 data.anchors 属性
list
- 返回 data.list 属性
getChapterIndex
- 返回 chapter 在 data.list 中对应段落层次位置索引值
render
- 绘制 UI 界面
renderArticleDirectory
- 在文章开始处绘制目录导航
renderAnchors
- 绘制标题锚点链接和标题段落章节索引代码
renderHeadingChapterCode
- 在文章标题中绘制其对应的段落章节索引编码
renderSidebarDirectory
- 绘制侧边栏的目录导航菜单
renderSidebarOutline
- 绘制侧边栏菜单的框架
renderChapters
- 绘制文章章节索引
show
- 展开侧边栏菜单
hide
- 收起侧边栏菜单
toggle
- 收起/展开侧边栏菜单
updateLayout
- 根据当前窗口高度更新侧边栏菜单界面高度
scrollTo
- 将窗口的滚动条滚动到指定 top 值的位置
destroy
- 移除所有绘制的 DOM 节点,并移除绑定的事件处理器
9、实例
Customize selector
new AutocJS(
article: '#container',
// 只收集文章中的 h2 标题标签
selector: 'h2'
);
演示地址:http://yaohaixiao.github.io/AutocJS/examples/customize-selector.htm
Customize title
new AutocJS(
article: '#container',
title: 'Customize Title'
);
演示地址:http://yaohaixiao.github.io/AutocJS/examples/customize-title.htm
Create anchors only
new AutocJS(
article: '#container',
isAnchorsOnly: true
);
演示地址:http://yaohaixiao.github.io/AutocJS/examples/create-anchors-only.htm
Positioning behavior
new AutocJS(
article: '#container',
// 不配置 isAnimateScroll 或者设置为 true 则是默认的动画滚动定位
isAnimateScroll: false
);
演示地址:http://yaohaixiao.github.io/AutocJS/examples/positioning-behavior.htm
Create directory navigation in the article
new AutocJS(
article: '#container',
// 不配置 hasDirectoryInArticle 或者设置为 false,则不会在文章开始位置显示目录导航
hasDirectoryInArticle: true,
// 通常这个时候就不需要侧边栏的导航菜单了,当然你也可以两个都要(isAnchorsOnly: false 即可)。
onlyAnchors: true
);
演示地址:http://yaohaixiao.github.io/AutocJS/examples/create-directory-navigation-in-the-article.htm
Has chapter code at the headings:
new AutocJS(
article: '#container',
// 不配置 hasCodeAtHeadings 或者设置为 false,则不会在文章中的标题上显示段落章节索引编码
hasCodeAtHeadings: true
);
演示地址:http://yaohaixiao.github.io/AutocJS/examples/has-chapter-code-at-the-headings.htm
Release History
See the CHANGELOG.
License
Code licensed under MIT License.
API Documentation licensed under
以上是关于自动创建目录导航菜单的主要内容,如果未能解决你的问题,请参考以下文章