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 相关文章推荐
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
简单了解JavaScript异步
May 23 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
Dec 01 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
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
php简单分页类实现方法
2015/02/26 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
php提取微信账单的有效信息
2018/10/01 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
python实现动态创建类的方法分析
2019/06/25 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
使用Python实现批量ping操作方法
2020/05/06 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
单位提档介绍信
2014/01/17 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
超市开店计划书
2014/09/15 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
计算机实训心得体会
2016/01/14 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers