jQuery插件之Tocify动态节点目录菜单生成器附源码下载


Posted in Javascript onJanuary 08, 2016

Tocify是一个能够动态生成文章节点目录的jQuery插件。假如我们有一篇很长的文章,文章有多个节点,那么使用Tocify可以根据节点元素动态生成文章目录,点击目录可以平滑滚动到对应的节点,当然当滚动页面时,目录结构会根据当前监听到的节点进行切换到当前目录状态。

jQuery插件之Tocify动态节点目录菜单生成器附源码下载

效果展示         源码下载

Tocify目前支持Twitter Bootstrap和jQueryUI Themeroller两种主题风格,我们可以根据实际项目任选其中一种风格,另外必要条件jQuery 1.7.2+和jQueryUI Widget Factory 1.8.21+。放心在IE7+即现代浏览器上使用。

引入CSS和Javascript文件

css文件

<link type="text/css" rel="stylesheet" href="jquery.tocify.css" /> 
<link type="text/css" rel="stylesheet" href="bootstrap.css" />

JavaScript文件

<script src="jquery-1.7.2.min.js"></script> 
<script src="jquery-ui-1.9.1.custom.min.js"></script> 
<script src="jquery.tocify.min.js""></script>

HTML结构

创建一个DIV标签,然后给这个标签添加一个ID或者Class,例如:toc

<div id="toc"></div>

这个div#toc它默认是空的内容,它用来动态生成文章目录,那文章目录如何动态关联文章节点的呢?我们还需要把文章节点做一些规划,如:

<div class="wrap"> 
<h1>Tocify</h1> 
<br /> 
<section> 
<h2>节点1</h2> 
<p>内容</p> 
</section> 
<br /> 
<section> 
<h2>节点2</h2> 
<p>内容</p> 
</section> 
... 
</div>

以上的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"
Javascript 相关文章推荐
项目实践之javascript技巧
Dec 06 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
Angularjs 基础入门
Dec 26 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
vuex vue简单使用知识点总结
Aug 29 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 Javascript
javascript匀速运动实现方法分析
Jan 08 #Javascript
js如何改变文章的字体大小
Jan 08 #Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 #Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 #Javascript
基于javascript实现右下角浮动广告效果
Jan 08 #Javascript
jQuery数据类型小结(14个)
Jan 08 #Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 #Javascript
You might like
php 图片上传类代码
2009/07/17 PHP
PHP的autoload机制的实现解析
2012/09/15 PHP
PHPEXCEL 使用小记
2013/01/06 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
php并发加锁示例
2016/10/17 PHP
javascript 面向对象编程 万物皆对象
2009/09/17 Javascript
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
python3.6.3安装图文教程 TensorFlow安装配置方法
2020/06/24 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
Python常用数据分析模块原理解析
2020/07/20 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
私有程序集与共享程序集有什么区别
2013/04/05 面试题
机械制造与自动化应届生求职信
2013/11/16 职场文书
法学毕业生自我鉴定
2014/01/31 职场文书
房屋授权委托书范本
2014/10/07 职场文书
办公室主任岗位职责
2015/01/31 职场文书
先进个人自荐书
2015/03/06 职场文书
2015年度女工工作总结
2015/10/22 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android
Java SSM配置文件案例详解
2021/08/30 Java/Android
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL