位置: 编程技术 - 正文

jQuery插件之Tocify动态节点目录菜单生成器附源码下载(jquery插件之家)

编辑:rootadmin

推荐整理分享jQuery插件之Tocify动态节点目录菜单生成器附源码下载(jquery插件之家),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery插件使用教程,jquery插件之家,jquery插件大全,jquery 插件写法,jquery插件使用,jquery插件大全,jquery tooltip,jquery tooltip,内容如对您有帮助,希望把文章链接给更多的朋友!

Tocify是一个能够动态生成文章节点目录的jQuery插件。假如我们有一篇很长的文章,文章有多个节点,那么使用Tocify可以根据节点元素动态生成文章目录,点击目录可以平滑滚动到对应的节点,当然当滚动页面时,目录结构会根据当前监听到的节点进行切换到当前目录状态。

效果展示 源码下载

Tocify目前支持Twitter Bootstrap和jQueryUI Themeroller两种主题风格,我们可以根据实际项目任选其中一种风格,另外必要条件jQuery 1.7.2+和jQueryUI Widget Factory 1.8.+。放心在IE7+即现代浏览器上使用。

引入CSS和Javascript文件

css文件

JavaScript文件

HTML结构

jQuery插件之Tocify动态节点目录菜单生成器附源码下载(jquery插件之家)

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

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

以上的HTML结构代码大家可以修改tocify的CSS文件来满足你项目视觉的需求。

Javascript

使用jQuery选择选中我们的toc元素,然后通过tocify()方法调用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"

jQuery CSS3相结合实现时钟插件 废话不多说了,直接给大家贴代码了。效果图如下所示:简洁代码如下:linkrel="stylesheet"href="

jQuery页面刷新(局部、全部)问题分析 本文实例分两部分对jquery刷新问题进行介绍,第一部分介绍了呢页面局部刷新;第二部分介绍了页面全部刷新第一:页面局部刷新jQuery对Ajax操作进行了

jquery调整表格行tr上下顺序实例讲解 表格是大家比较常用的元素,有时候表格中的行需要调整顺序,下面就通过代码实例介绍一下如何利用jquery实现此功能,分享给大家供大家参考,具体

标签: jquery插件之家

本文链接地址:https://www.jiuchutong.com/biancheng/379281.html 转载请保留说明!

上一篇:jQuery抛物线运动实现方法(附完整demo源码下载)(抛物线动画演示视频)

下一篇:jQuery CSS3相结合实现时钟插件(jqueryw3c)

  • 什么公司需要缴纳印花税
  • 工商年报认缴时间填错了
  • 小型微利企业认定标准最新
  • 冲减以前年度的成本会计分录
  • 电子发票字迹不清怎么办
  • 城建税 申报表
  • 电子元器件可以带上飞机吗
  • 建筑企业应交哪几种税
  • 简易计税项目税金要计入成本吗
  • 公司聘请专家的差旅费可以税前扣除吗
  • 网银 密码器
  • 代国外佣金代扣税金账务怎么处理?
  • 保险公司多赔付的钱需要退还吗
  • 开具增值税专用发票承诺函
  • 员工疗养要扣公休假吗
  • 如何查询企业开票记录
  • 合伙企业收到对公转账
  • 长期股权投资是什么科目
  • 招待客户产生的住宿费
  • 个体户如何办税
  • 企业结算备付金怎么做账
  • 管理费用金额多做了,如何减少
  • vc_runtimeMinimum_x64.msi 找不到的解决方法
  • 存在标的资产的亏损合同,先进行减值
  • linux中tomcat如何启动
  • dedecms主页修改
  • 代发工资如何合理避税
  • 其他应付款很多
  • 在建工程可以计入资本性支出吗
  • 装修费用账务怎么处理
  • 退回的企业所得税怎么做账
  • 结算借款的账务处理办法
  • node 卸载
  • vue3加ts
  • javascript保留字有哪些
  • vue sha256加密
  • 【机器学习】支持向量回归
  • mysqlmha高可用
  • 新手为什么要买二手车
  • 新医院会计制度采用什么预算方法
  • 赠送油卡怎么使用
  • 一台设备可以分开开票吗
  • 非限定性收入属于什么科目?
  • mysql基本sql语句大全(基础用语篇)
  • 固定资产报废后累计折旧
  • 成本核算的意义是什么
  • 差旅费报销注意哪些问题
  • 辅助账簿属于会计档案吗
  • 法人向公司账户打款合法吗
  • 出口收入没有及时申报怎么处罚
  • 注册资本及构成
  • 营业外支出包括哪些?
  • 个人咨询服务费个税怎么算
  • 加工企业如何计税
  • 收据 和发票
  • SQL Server 2016 CTP2.3 的关键特性总结
  • sql server的相关技术知识
  • windowsserver2008密码规则
  • ubuntu15.10中文版
  • 任务栏安全中心的图标没有了
  • 联想e430安装win10
  • gwservice进程
  • windows超级管理员默认密码
  • linux ll不能用
  • win8系统升级
  • pln是什么文件
  • win10更新后浏览器打不开网页
  • linux就要这样学
  • 垂直翻转画布
  • js时间倒计时定时器怎么弄
  • android事件分发流程图
  • css表格设置边框
  • js移动端拖拽
  • 使用jquery实现的项目
  • linux中unzip解压完看不到文件
  • unity的gui
  • 贸易公司的税率多少
  • 法制建设包括哪三个方面
  • 福斯特会计软件下载
  • 企业税务自查报告
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设