部落格添加浮動目錄

一直都想給自己的部落格添加一個浮動的目錄，在網上也找也幾個，從易用性方面都不是太理想，是以今天才有了想法自己去寫一個插件 。

需求

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： 點選加群   或發我郵件 [email protected]