jQuery插件之Tocify动态节点目录菜单生成器附源码下载
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" |
相关文章
- 最近由于项目的需要,需要动态的添加和删除table中的tr,感觉用JS可以实现,但是在网上找了一下,单纯的自己写JS,感觉太麻烦,而且也不好维护。于是想到了最近学的jQuery。这篇文章给大家用实例介绍了jQuery动态添加与删除tr行的方法,有需要的朋友们可以参考借鉴。...2016-10-20
- 下面小编就为大家带来一篇jQuery为动态生成的select元素添加事件的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-09-01
- 本篇文章主要介绍了vue2 中如何实现动态表单增删改查实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-06-15
- 这篇文章主要介绍了javascript+css3 实现动态按钮菜单特效的相关资料,需要的朋友可以参考下...2016-02-12
- 这篇文章主要介绍了jquery及js实现动态加载js文件的方法,结合实例形式分别讲述了基于jQuery以及基于JavaScript的文件动态加载方法,需要的朋友可以参考下...2016-01-24
- 这篇文章主要介绍了Treegrid的动态加载实例代码的相关资料,需要的朋友可以参考下...2016-05-04
- 本文给大家分享一段JS实例代码介绍动态创建按钮的方法,需要的朋友参考下本文...2016-02-01
- 这篇文章主要介绍了在WordPress的后台中添加顶级菜单和子菜单的函数详解,需要的朋友可以参考下...2016-01-14
- 这篇文章主要为大家详细介绍了js css实现垂直方向自适应的三角提示菜单的相关资料,需要的朋友可以参考下...2016-07-01
- 本文给大家介绍js动态生成二维码图片的相关内容,感兴趣的朋友一起学习吧...2016-04-22
- 这篇文章主要介绍了使用OpenLayers3 添加地图鼠标右键菜单的相关资料,需要的朋友可以参考下...2016-01-02
- 本篇文章主要介绍了jquery DataTable实现前后台动态分页。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-06-24
- 这篇文章主要为大家详细介绍了Bootstrap实现下拉菜单效果的相关资料...2016-05-05
- 这篇文章主要介绍了Jquery实现纵向横向菜单的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-01-25
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
下面小编就为大家带来一篇Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-06-15- jQuery on()方法是官方推荐的绑定事件的一个方法。使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件,通过本文给大家介绍jQuery on()绑定动态元素出现的问题小结,需要的朋友参考下...2016-02-21
javascript的document中的动态添加标签实现方法
下面小编就为大家带来一篇浅谈javascript的document中的动态添加标签实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25- 这篇文章主要介绍了WordPress中注册菜单与调用菜单的方法详解,分别依靠register_nav_menus()函数与wp_nav_menu()函数的使用,需要的朋友可以参考下...2015-12-21
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
这篇文章主要介绍了基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理的相关资料,小编认为非常具有参考借鉴价值,感兴趣的朋友一起学习吧...2016-05-14- 本文给大家介绍使用js实现下拉菜单可选择互相移动并实现菜单排序,代码简单易懂,具有参考价值,需要的朋友参考下吧...2016-02-26