文章目錄自動(dòng)生成器

felix0913 發(fā)布于2019-08-02 10:59 / 3295人閱讀

摘要：提供一個(gè)插件，可以實(shí)現(xiàn)的文章目錄效果啦不止點(diǎn)擊跳轉(zhuǎn)還滾動(dòng)激活當(dāng)前鏈接地址使用很簡單文章容器目錄容器支持以上和主流的瀏覽器文章容器，選擇器目錄容器，選擇器每個(gè)目錄項(xiàng)的類當(dāng)前激活的目錄項(xiàng)的類可選選擇目錄的標(biāo)題元素，

提供一個(gè)插件，可以實(shí)現(xiàn)segmentfault的文章目錄效果啦~~

不止點(diǎn)擊跳轉(zhuǎn)還滾動(dòng)激活當(dāng)前鏈接

demo地址

使用很簡單

new Katelog({
    contentEl: "kCatelog",
    catelogEl: "catelogList",
    linkClass: "k-catelog-link",
    linkActiveClass: "k-catelog-link-active",
    supplyTop: 20,
    selector: ["h2", "h3"],
    active: function (el) {
        console.log(el);
    }
});

支持IE8以上和主流的瀏覽器

contentEl

文章容器，id選擇器

catelogEl

目錄容器，id選擇器

linkClass

每個(gè)目錄項(xiàng)的類

linkActiveClass

當(dāng)前激活的目錄項(xiàng)的類

selector（可選）

選擇目錄的標(biāo)題元素，默認(rèn)支持6級(jí)樹形結(jié)構(gòu)

默認(rèn)值: ["h1", "h2", "h3", "h4", "h5", "h6"]

selector: ["h2", "h3"]

supplyTop（可選）

每個(gè)目錄需要補(bǔ)充的高度，比如fixed頭部布局會(huì)擋住實(shí)現(xiàn)，可以設(shè)置supplyTop來修正

如果對(duì)你有用的話，給個(gè)小星星吧！https://github.com/KELEN/k-ca...

GPU云服務(wù)器云服務(wù)器自動(dòng)生成文章自動(dòng)創(chuàng)建目錄 php生成目錄樹 java的目錄生成

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52691.html

相關(guān)文章

Markdown 的文章目錄在 Vim 里的終極解決方案

摘要：目前支持的解析引擎更新已經(jīng)存在的文章目錄。生成鏈接風(fēng)格的文章目錄。默認(rèn)值用于控制保存文件時(shí)是否自動(dòng)更新已有文章目錄。我使用的與相關(guān)的插件解決文章目錄的問題。如果你使用 Vim 編輯 Markdown，而且也為如何生成和更新文章目錄（Table of Contents）而煩惱，那么如下的內(nèi)容將帶你脫離刀耕火種手寫 Toc 的體驗(yàn)，回歸使用 Markdown 是為了專注于內(nèi)容的初心。一...

cpupro 2019-06-28 10:18 評(píng)論0 收藏0
一個(gè)騷氣的文章目錄自動(dòng)生成器了解一下

摘要：左邊的邊欄線則是使用的來畫出來的，根據(jù)層級(jí)相應(yīng)做一些調(diào)整，輔以的的效果就可以呈現(xiàn)出不錯(cuò)的移動(dòng)效果。這個(gè)插件根據(jù)選定的目錄內(nèi)容中的 h1, h2, h3, h4, h5, h6 標(biāo)簽來自動(dòng)生成目錄插入到選定的目錄容器中，并且提供一個(gè)漂亮的樣式效果監(jiān)聽內(nèi)容區(qū)滾動(dòng) 點(diǎn)擊跳轉(zhuǎn)功能兼容性：IE10+ (由于使用了 node.classList) 地址戳這里 github地址，歡迎sta...

Cympros 2019-08-23 10:53 評(píng)論0 收藏0
文章目錄自動(dòng)生成器

摘要：提供一個(gè)插件，可以實(shí)現(xiàn)的文章目錄效果啦不止點(diǎn)擊跳轉(zhuǎn)還滾動(dòng)激活當(dāng)前鏈接地址使用很簡單文章容器目錄容器支持以上和主流的瀏覽器文章容器，選擇器目錄容器，選擇器每個(gè)目錄項(xiàng)的類當(dāng)前激活的目錄項(xiàng)的類可選選擇目錄的標(biāo)題元素，提供一個(gè)插件，可以實(shí)現(xiàn)segmentfault的文章目錄效果啦~~ 不止點(diǎn)擊跳轉(zhuǎn)還滾動(dòng)激活當(dāng)前鏈接 demo地址使用很簡單 new Katelog({ con...

CloudDeveloper 2019-08-26 17:40 評(píng)論0 收藏0
如何利用showdoc自動(dòng)生成API文檔

摘要：仿照此種寫法，在你的項(xiàng)目中插入類似的注釋，也能達(dá)到自動(dòng)生成文檔的效果。執(zhí)行以下命令，腳本會(huì)自動(dòng)遞歸掃描本目錄和子目錄的所有文本代碼文件，并生成文檔。如果是，程序會(huì)自動(dòng)進(jìn)行格式化展示。介紹 showdoc是一個(gè)適合IT團(tuán)隊(duì)的文檔工具，閱讀本文前需要對(duì)showdoc有基本了解 ?；窘榻B可看：https://www.showdoc.cc/help 對(duì)于寫API文檔這件事，雖然說文本編輯...

linkin 2019-07-01 10:32 評(píng)論0 收藏0
如何利用showdoc自動(dòng)生成API文檔

摘要：仿照此種寫法，在你的項(xiàng)目中插入類似的注釋，也能達(dá)到自動(dòng)生成文檔的效果。執(zhí)行以下命令，腳本會(huì)自動(dòng)遞歸掃描本目錄和子目錄的所有文本代碼文件，并生成文檔。如果是，程序會(huì)自動(dòng)進(jìn)行格式化展示。介紹 showdoc是一個(gè)適合IT團(tuán)隊(duì)的文檔工具，閱讀本文前需要對(duì)showdoc有基本了解 ?；窘榻B可看：https://www.showdoc.cc/help 對(duì)于寫API文檔這件事，雖然說文本編輯...

周國輝 2019-08-26 12:16 評(píng)論0 收藏0