html 目录生成器,Tocify:动态节点目录菜单生成器_html/css_WEB-ITnose
Tocify是一个能够动态生成文章节点目录的jQuery插件。假如我们有一篇很长的文章,文章有多个节点,那么使用Tocify可以根据节点元素动态生成文章目录,点击目录可以平滑滚动到对应的节点,当然当滚动页面时,目录结构会根据当前监听到的节点进行切换到当前目录状态。
查看演示 下载源码
Tocify目前支持Twitter Bootstrap和jQueryUI Themeroller两种主题风格,我们可以根据实际项目任选其中一种风格,另外必要条件jQuery 1.7.2+和jQueryUI Widget Factory 1.8.21+。放心在IE7+即现代浏览器上使用。
引入CSS和Javascript文件
css文件
JavaScript文件
HTML结构
创建一个DIV标签,然后给这个标签添加一个ID或者Class,例如:toc
这个div#toc它默认是空的内容,它用来动态生成文章目录,那文章目录如何动态关联文章节点的呢?我们还需要把文章节点做一些规划,如: Tocify
节点1
内容
节点2
内容...
以上的HTML结构代码大家可以修改tocify的CSS文件来满足你项目视觉的需求。
Javascript
使用jQuery选择选中我们的toc元素,然后通过tocify()方法调用Tocify插件。 $(function() { $("#toc").tocify();});
如此,运行网页,一个动态的文章目录就生成了。
选项设置
Tocify提供了丰富的选项设置,我们可以根据项目实际需求设置不同的选项参数。以下是主要的几个参数选项介绍: 选项 说明 默认值
context 任意可用的jQuery选择器 "body"
selectors 文章节点,可以关联生成目录 "h1,h2,h3"
showAndHide 是否展示二级目录结构 true
showEffect 目录展示效果:"none", "fadeIn", "show", or "slideDown" "slideDown"
showEffectSpeed 目录展示速度:"slow", "medium", "fast", 或数字(毫秒) "medium"
hideEffect 目录隐藏效果:"none", "fadeOut", "hide", "slideUp" "none"
hideEffectSpeed 目录隐藏速度:"slow", "medium", "fast", 或数字(毫秒) "medium"
smoothScroll 当点击目录节点菜单时,是否平滑滚动到文章对应的节点内容 true
smoothScrollSpeed 平滑滚动速率,可以是数字(毫秒) or String: "slow", "medium", or "fast" "medium"
scrollTo 当页面滚动时,页面顶端与目录之间的间隔 0
showAndHideOnScroll 当滚动页面时,是否显示和隐藏目录子菜单 true
theme 内容展示风格,可以是"bootstrap", "jqueryui", or "none" "bootstrap"
Tocify还提供setOptions()和option()分别来设置和获取选项参数。有关更多Tocify的内容有兴趣的可以参阅Tocify项目官网: http://gregfranko.com/jquery.tocify.js/
本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源:php中文网
html 目录生成器,Tocify:动态节点目录菜单生成器_html/css_WEB-ITnose相关推荐
- 创建数据目录及多节点目录
链客,专为开发者而生,有问必答! 此文章来自链客区块链技术问答社区,未经允许拒绝转载. 创建数据目录及多节点目录 mkdir -p ~/workmeta/EduEthereumServerDeploy ...
- linux命令之添加系统搜索动态库目录-ldconfig
ldconifg,/etc/ld.so.conf,/etc/ld.so.cache三个的关系 一般情况下我们可以将程序需要搜索动态库的路径配置到ld_library_path这个环境变量中,不过很多系 ...
- linux vfs 根节点名称,Linux:文件,目录项,索引节点,超级块,VFS,具体文件系统...
[笔记:http://m.blog.csdn.net/blog/zhouzhou135] 在了解文件系统之前,先了解磁盘格式化的知识. 所以要理解文件系统的数据结构,要从两个方向来理解: 1:磁盘中的 ...
- 杰信项目第三天知识点(工作表模板+动态生成目录+动态生成重名文件+购销合同增删改查)
1.工作表模板使用方法: //获取模板文件,路径为存放模板文件的路径 HSSFWorkbook wb = new HSSFWorkbook( new FileInputStream(rootpath+ ...
- Python的 sys.path.append()、os.path.dirname(os.path.abspath(file))、使用os模块动态获取目录或文件路径
sys.path.append() 当我们导入一个模块时:import xxx,默认情况下python解析器会搜索当前目录.已安装的内置模块和第三方模块,搜索路径存放在sys模块的path中: &g ...
- 操作系统之文件管理:3、文件目录(文件控制块FCB、多级目录结构、无环图目录结构、索引节点)
3.文件目录 思维导图 文件控制块FCB 目录操作 目录结构 单级目录结构 两级目录结构 多级目录结构(树形目录结构) 无环图目录结构 索引结点(FCB的改进) 思维导图 文件控制块FCB 1.什么是 ...
- 基于vue-router的从后端动态加载菜单的实现
基于vue-router的从后端动态加载菜单的实现 源码下载 前言 后端模拟加载菜单的例子实现 VueRouterController.java CorsConfig.java application ...
- linux proc 目录清理_Linux下/proc目录简介
proc简介 在linux的根目录下存在一个/proc目录,/proc文件系统是一种虚拟文件系统,以文件系统目录和文件形式,提供一个指向内核数据结构的接口,通过它能够查看和改变各种系统属性.proc目 ...
- chromedriver放在哪个目录下_python | Linux各目录及每个目录的详细介绍 - MR_黄Python之路...
[常见目录说明] 目录 /bin 存放二进制可执行文件(ls,cat,mkdir等),常用命令一般都在这里. /etc 存放系统管理和配置文件 /home 存放所有用户文件的根目录,是用户主目录的基点 ...
最新文章
- 适合初学者学java技术的书籍推荐!
- LeetCode 653. Two Sum IV - Input is a BST--Python解法
- Spring配置JDBC连接Orcale、MySql、sqlserver
- MySQL DTAETIME、TIMESTAMP、DATE、TIME、YEAR(日期和时间类型)
- ubuntu16.04下配置caffe无GPU
- Tex 表格注释实例
- java泛型程序设计——类型变量限定 + 泛型代码和虚拟机
- java maven导入导出_Java +EasyUI+SpringMvc实现Excle导入导出(上)
- 实体框架 5.0:空间数据类型、性能增强、数据库提升
- Excel中复杂跨行跨列数据
- 谁将赢得 5G 比赛?| 畅言
- pb 执行存储过程带参数_SQL高级知识——存储过程
- 第五节、矩阵分解之LU分解
- java swing结束事件_java swing清除事件队列
- 自己用GO语言编写的AliDDNS动态域名更新服务,routeros
- 22nm 与 28nm 工艺的比较
- 定义幂函数C语言,【知识点】幂函数定义与性质
- Kubernetes crictl管理命令详解
- 工作笔记-thingworx连接mongdb
- 自动擦地机器人需要怎么留电_irobot擦地机器人是否好用,需要和扫地机器人配合么?...