博客添加浮动目录

一直都想给自己的博客添加一个浮动的目录,在网上也找也几个,从易用性方面都不是太理想,所以今天才有了想法自己去写一个插件 。

需求

 1. 当打开博客的时候在右下角自动生成对应的目录  

 2. 支持拖拽移动  

 3. 可以点击展开和收缩  (目前未实现)

易用性方面,希望能够直接引用 js后,来执行一句代码来完成对应的动作 。

实现逻辑


  1. 读取页面的所有h1,h2,h3,h4,h5
  2. 根据对应的元素和排序,生成对应的数据,格式如下:
  [
    {
        text: "目录",
        level: 2,
        achorName: "目录",
        order: 1,
        chapterIndex: "1"
    }, {
        text: "UTF8的出现",
        level: 3,
        achorName: "utf8的出现",
        order: 6,
        chapterIndex: "1.5"
    }
]

3. 根据数据生成对应的html

相关使用

代码地址:ICatalogJs

使用时候只需要引用js后,执行init方法:

	<script type="text/javascript">
		catalog.init();
	</script>

本篇对应的效果可以看右下角

(本文完)

作者:老付 如果觉得对您有帮助,可以下方的订阅,或者选择右侧捐赠作者,如果有问题,请在捐赠后咨询,谢谢合作 如有任何知识产权、版权问题或理论错误,还请指正。 自由转载-非商用-非衍生-保持署名,请遵循:创意共享3.0许可证 交流请加群113249828: 点击加群   或发我邮件 laofu_online@163.com

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯NEXT学位

双十一狂欢的背后和NODE.JS不得不说的故事

41590
来自专栏微信小程序开发

小程序view中的节点数最多是多大?

前言:做前端开发的同学,都遇到过页面节点过多,从而导致页面加载很慢,或者浏览器直接崩溃~ ? 在小程序开发中,下拉刷新数据的用法应该比较多,那么小程序页面节点最...

65480
来自专栏架构师小秘圈

亿级浏览型网站静态化架构演变

作者徐昭,花名长恭,主要负责天猫详情系统的架构优化工作。毕业于浙江大学计算机专业,热爱Java Web技术,多关注服务端性能优化,热衷开源技术的研究和分享。 在...

40850
来自专栏lestat's blog

一个投票项目的总结

最近开发了一个只有3个页面的微信投票小项目 基本流程:一个微信号一天只能对一个参与者投一次票且一天总共可以对不同参与者投10次票 首页内容:展示所有投票参与者以...

32250
来自专栏开源优测

接口测试 | 26 基础及简要验证清单

## 什么是API API(应用程序编程接口)可以被看作是软件系统、服务、组件之间进行通信的桥梁。它约束了通信的基本规则。 简单的说,API接收用户的输入,并返...

377130
来自专栏跟着阿笨一起玩NET

C#轻量级高性能日志组件EasyLogger(六)

40820
来自专栏FreeBuf

利用Wireshark任意获取QQ好友IP实施精准定位

虽然网上已经有了很多获取IP的qq插件,但是其原理大致都是相同的,但是插件的安全性而言就不敢恭维了,下面介绍如何利用wireshark获取好友ip。 一、打开w...

1.4K30
来自专栏FreeBuf

十大跨浏览器测试工具

在多个平台上测试多种浏览器不但是很困难的 – 它几乎不可能的,因为没有那些好的测试工具。今天,我们就为大家提供很多涉及到跨浏览器测试的选择,并且告诉你那些“顶级...

27160
来自专栏kwcode

popcorn-js视频Video框架简单用法

<div> <video class="video" id="ourvideobig" preload="auto" control...

51080
来自专栏Albert陈凯

Hadoop离线数据分析平台实战——500事件数据展示Hadoop离线数据分析平台实战——500事件数据展示

Hadoop离线数据分析平台实战——500事件数据展示 项目进度 模块名称 完成情况 1. 程序后台框架搭建 完成 2. 用户基本信息展示 完...

38170

扫码关注云+社区

领取腾讯云代金券