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 相关文章推荐
form中限制文本字节数js代码
Jun 10 Javascript
JS 遮照层实现代码
Mar 31 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
学习javascript文件加载优化
Feb 19 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
详解JavaScript中分解数字的三种方法
Jan 05 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
用cookies来跟踪识别用户
2006/10/09 PHP
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
jQuery的一些注意
2006/12/06 Javascript
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
Python解惑之整数比较详解
2017/04/24 Python
浅谈python迭代器
2017/11/08 Python
python属于跨平台语言码
2020/06/09 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
Java的五个基础面试题
2016/02/26 面试题
国庆节文艺活动方案
2014/02/03 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书