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中常见陷阱小结
Apr 27 Javascript
基于jQuery的js分页代码
Jun 10 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
js分页工具实例
Jan 28 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
代码详解Vuejs响应式原理
Dec 20 Javascript
vue 循环加载数据并获取第一条记录的方法
Sep 26 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
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 中文和编码判断代码
2010/05/16 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
python中实现定制类的特殊方法总结
2014/09/28 Python
深入理解python中的atexit模块
2017/03/07 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
波兰购物网站:MALL.PL
2019/05/01 全球购物
Linux操作面试题
2012/05/16 面试题
思想品德自我评价
2014/02/04 职场文书
毕业晚会主持词
2014/03/24 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
六年级学生评语大全
2014/12/26 职场文书
城管个人总结
2015/02/28 职场文书
Golang获取List列表元素的四种方式
2022/04/20 Golang