当前位置:Gxlcms > JavaScript > jQuery插件Tocify动态节点实现目录菜单

jQuery插件Tocify动态节点实现目录菜单

时间:2021-07-01 10:21:17 帮助过:4人阅读

这次给大家带来jQuery插件Tocify动态节点实现目录菜单,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结构

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

<p id="toc"></p>

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

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

以上的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"

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

jQuery插件限制上传文件大小与格式使用方法

jQuery解析XML文件与动态增加js文件如何实现

jQuery读取分析xml文件步骤详解

以上就是jQuery插件Tocify动态节点实现目录菜单的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行