位置: 编程技术 - 正文

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)

  • 购买方收取的违约金怎么入账
  • 以房抵债的房子交房产税吗
  • 生产部的管理人员简介范文
  • 房开企业预售阶段预交的税费
  • 未取得发票的费用,在汇算清缴中按利润计算吗
  • 股东投资的钱放在哪里
  • 房租雇东不开发票只有收据怎么处理?
  • 项目差旅费能计入项目费用吗
  • 购房发票是不是增值税
  • 小微企业免税销售额和未达起征点销售额
  • 采购商品成本包括
  • 资产负债表损益表模板
  • 利润表管理费用怎么算
  • 投资盈利后可以买股票吗
  • 小规模纳税人小微企业免税销售额
  • 房产税按租金收入
  • 税控盘忘记抄报反写怎么办
  • 蓝字发票未入账收到红字发票处理?
  • 车辆保险代交车船使用税会计分录怎么写?
  • 年终奖需要扣除个人所得税吗
  • 滞纳金是否有上限
  • 银行存款二级明细科目有哪些
  • 预收的销售商品货款通过什么科目核算
  • 吸收合并后被合并的公司
  • 诉讼过程中
  • 如何修改去年的智慧团建评议结果
  • steam怎么退款申请退款要多久
  • 未取得发票入账违反什么规定
  • conda不是内部或外部命令
  • 出口退税率为0怎么处理
  • 宝塔部署django
  • 毕业设计2022年幼儿园
  • 前端高手
  • 公司是否可以开具在职证明
  • 发票 加工费
  • 新旧所得税法转换规定
  • 总公司如何成立子公司
  • 差旅费津贴与差旅费补助
  • 土地增值税可以抵扣吗
  • 经营活动现金净流量与净利润的关系
  • div不规则排版
  • 公司缴纳社保如何做账
  • 母子公司资产划转税收政策
  • 租赁公司一般都有什么税
  • 营业额和营业收入怎么算
  • 商品流通企业的进货费用
  • 限售股算不算账户资产
  • 不符合资本化的长期借款利息计入什么科目
  • 免税收入不征税收入计入收入总额吗
  • 注销时其他应付款借方余额怎么账务处理
  • 企业开负数发票退货后如何处理?
  • 如何核算购进商品
  • 出口视同内销账务处理?
  • 公司注销其他应付款法人借款
  • 补缴上年度所得税的会计分录
  • 收到其他企业投资是属于其他业务收入吗
  • 收到采购免费赔偿怎么办
  • 农业项目土地流转
  • 企业注销递延所得税资产怎么处理
  • 分配股利需要缴纳个税吗
  • 进项税额转出的几种情况
  • freebsd常用命令
  • 怎么检测软件有没有毒
  • centos安装位置选择
  • .exe是什么软件
  • apache版本查看命令
  • icqlite.exe进程的详细介绍 icqlite进程的查询 作用是什么
  • 修改linux启动项
  • win7系统安装ie11浏览器
  • linux中fdisk -l
  • win7唤醒后屏幕黑屏
  • win10 build 21277
  • JavaScript浏览器打开
  • node搭建本地服务器运行html
  • javascript如何学
  • android隐藏图片
  • 金税全国客服电话
  • 湖南省株洲市税务局
  • 税控盘开票怎么赋码的教程
  • 所有企业都要做应急预案吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设