資訊專欄INFORMATION COLUMN
摘要：使用可以快速為你的頁(yè)面生成目錄的結(jié)構(gòu)，擁有較強(qiáng)的可定制性，并且并不會(huì)擅自為你做太多的事情，以便你更容易地把應(yīng)用到你的項(xiàng)目中。
引言
為頁(yè)面中的標(biāo)題元素建立目錄索引，這是一個(gè)不起眼卻很實(shí)用的功能，特別是對(duì)于那些含有篇幅很長(zhǎng)的文章的頁(yè)面，擁有一個(gè)目錄可以讓讀者對(duì)文章的結(jié)構(gòu)一目了然，更重要的是，讀者可以很輕松地在文章的各個(gè)章節(jié)之間來(lái)回快速跳轉(zhuǎn)，極大地提高了用戶體驗(yàn)。
toc.js使用 toc.js 可以快速為你的頁(yè)面生成目錄的 HTML 結(jié)構(gòu)，toc.js 擁有較強(qiáng)的可定制性，并且 toc.js 并不會(huì)擅自為你做太多的事情，以便你更容易地把 toc.js 應(yīng)用到你的項(xiàng)目中。
項(xiàng)目主頁(yè)：GitHub
預(yù)覽 用法在你的頁(yè)面中引入 toc.js：
請(qǐng)根據(jù)項(xiàng)目實(shí)際情況自行修改 src 屬性。
toc.js 基于 jQuery，請(qǐng)確保在使用 Toc 之前引入 jQuery。
快速上手實(shí)例化 Toc：
var toc = new Toc();
然后調(diào)用 make() 方法：
make(content, toc[, callback])
該方法接受兩個(gè)必選參數(shù)：第一個(gè)參數(shù) content 是頁(yè)面中要為其中的標(biāo)題元素建立目錄索引的 jQuery 元素對(duì)象，通常就是 article 標(biāo)簽，第二個(gè)參數(shù) toc 是用于存放目錄索引的 jQuery 元素對(duì)象。
比如你的頁(yè)面中有下面元素：
something...
你要在下面的元素中為上面元素內(nèi)的標(biāo)題元素建立目錄索引：
你應(yīng)該這樣調(diào)用 make() 方法：
var content = $("article");
var wrapper = $(".toc");
toc.make(content, wrapper);
make() 方法將為 content 內(nèi)的標(biāo)題標(biāo)簽添加錨點(diǎn)，并在 toc 內(nèi)生成對(duì)應(yīng)的目錄索引，生成的目錄結(jié)構(gòu)大致如下：
如果你需要在目錄索引生成后進(jìn)行一些操作，可以給 make() 方法傳入第三個(gè)參數(shù)：
var content = $("article");
var wrapper = $(".toc");
var callback = function () {
console.log("well done!");
};
toc.make(content, wrapper, callback);
更多
如果默認(rèn)生成的目錄索引不能滿足你的需求，你可以在調(diào)用 make() 方法之前鏈?zhǔn)秸{(diào)用 setting() 方法來(lái)設(shè)定一些參數(shù)，甚至定義如何生成目錄的 HTML 結(jié)構(gòu)，setting() 方法接受一個(gè)對(duì)象作為唯一的必選參數(shù)：
setting(config)
你可以在給傳給 setting() 方法的對(duì)象定義以下屬性或方法：
| 配置項(xiàng) | 說(shuō)明 | 默認(rèn)值 |
|---|---|---|
| headingSelector | 決定哪些級(jí)別的標(biāo)題會(huì)出現(xiàn)在目錄中 | h2, h3, h4 |
| anchorPrefix | 每個(gè)標(biāo)題錨點(diǎn)名的前綴 | toc- |
| makeItem() | 如何生成目錄的每個(gè)條目 | 默認(rèn)生成被 li 標(biāo)簽包含的 a 標(biāo)簽 |
| makeWrapper() | 如何生成每個(gè)目錄層級(jí)的容器 | 默認(rèn)使用 ul 標(biāo)簽 |
headingSelector 屬性是一個(gè) jQuery 選擇器，你可以通過(guò)定義它來(lái)決定哪些標(biāo)題元素將會(huì)出現(xiàn)在目錄中：
var config = {
headingSelector: "h1, h2, h3",
};
toc.setting(config).make(content, wrapper, callback);
以上定義了只有一級(jí)標(biāo)題、二級(jí)標(biāo)題和三級(jí)標(biāo)題會(huì)出現(xiàn)在目錄中。
anchorPrefix你可以定義 anchorPrefix 屬性來(lái)決定每個(gè)標(biāo)題錨點(diǎn)名的前綴，默認(rèn)為 toc-。
makeItem()你可以定義 makeItem() 方法來(lái)告訴 Toc 如何生成目錄的每個(gè)條目：
makeItem(anchor, text, level)
該方法接受三個(gè)參數(shù)：第一個(gè)參數(shù) anchor 是對(duì)應(yīng)標(biāo)題的錨點(diǎn)；第二個(gè)參數(shù) text 是對(duì)應(yīng)標(biāo)題的文本內(nèi)容；第三個(gè)參數(shù) level 是該標(biāo)題的級(jí)別，你需要在此方法中返回目錄條目的 HTML字符串、DOM 元素或者 jQuery 對(duì)象，默認(rèn)的定義如下：
function (anchor, text, level) {
return "你還可以定義 makeItem() 方法來(lái)告訴 Toc 如何生成每個(gè)目錄層級(jí)的容器：
makeWrapper(level)
默認(rèn)的定義如下：
function (level) {
return "如果你想多帶帶設(shè)定最頂級(jí)目錄層級(jí)的容器的生成方式，你可以這樣定義 makeWrap() 方法：
function (level) {
// 其他容器的生成方式
this.makeWrapper = function (level) {
return "如果你覺(jué)得這個(gè)微不足道的項(xiàng)目能對(duì)你有所幫助，那就給我一個(gè) star 吧！——項(xiàng)目主頁(yè)：GitHub
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/93229.html
摘要：我采用了遍歷樹(shù)，然后找到文章的標(biāo)簽暫時(shí)只對(duì)標(biāo)簽建立索引，為其添加的方式建立索引。初始化文章錨點(diǎn)和目錄數(shù)據(jù)結(jié)構(gòu)找到屬于文章內(nèi)容的標(biāo)簽添加標(biāo)簽文本內(nèi)容記錄當(dāng)前標(biāo)簽的偏移量，方便后面計(jì)算滾動(dòng)距離。 一、前言 演示圖例 showImg(https://segmentfault.com/img/remote/1460000016099128?w=1547&h=894); 需求 這個(gè)目錄索引應(yīng)該包...
摘要：下載并安裝目前的最新穩(wěn)定版為，如果之后版本有升級(jí)，請(qǐng)將相應(yīng)的版本號(hào)替換掉上面的。在實(shí)現(xiàn)的過(guò)程中，貌似對(duì)中文的支持不是那么好，所以接下來(lái)會(huì)嘗試使用一下中文分詞器來(lái)看看效果，順利的話會(huì)再出一篇文章。 原文來(lái)自：https://jellybool.com/post/setup-slasticsearch-on-your-website 在我的博客按Shift+S就可以呼出搜索框，可...
摘要：提供個(gè)人博客文章搜索服務(wù)只需要配置個(gè)人博客地址載入博客數(shù)據(jù)開(kāi)啟服務(wù)即可開(kāi)啟文章搜索服務(wù)。對(duì)配置文件監(jiān)控修改后服務(wù)及時(shí)地更新博客數(shù)據(jù)。 Search-Spider-Blog 提供個(gè)人博客文章搜索服務(wù), 只需要配置個(gè)人博客地址, 載入博客數(shù)據(jù), 開(kāi)啟Server服務(wù), 即可開(kāi)啟文章搜索服務(wù)。 對(duì)blogconfig.json配置文件監(jiān)控, 修改后服務(wù)及時(shí)地更新博客數(shù)據(jù)。 本人用的為Hexo...
摘要：文章介紹如何創(chuàng)建發(fā)布一個(gè)包，包括項(xiàng)目搭建發(fā)布流程注意事項(xiàng)等。語(yǔ)義化版本號(hào)分為三位。主版本號(hào)當(dāng)進(jìn)行了大都改動(dòng)或者對(duì)有很多不兼容修改時(shí)應(yīng)該進(jìn)行版本號(hào)升級(jí)。次版本號(hào)增加了部分特性或者優(yōu)化時(shí)升級(jí)該版本。如如果你想撤回指定版本，執(zhí)行包名版本號(hào)。 文章介紹如何創(chuàng)建發(fā)布一個(gè)npm包，包括項(xiàng)目搭建、發(fā)布流程、注意事項(xiàng)等。 演示代碼GitHub地址 1. 初始化項(xiàng)目 首先在創(chuàng)建好的項(xiàng)目文件夾下面執(zhí)行 ...
閱讀 3480·2023-04-26 02:44
閱讀 1622·2021-11-25 09:43
閱讀 1510·2021-11-08 13:27
閱讀 1881·2021-09-09 09:33
閱讀 899·2019-08-30 15:53
閱讀 1762·2019-08-30 15:53
閱讀 2771·2019-08-30 15:53
閱讀 3106·2019-08-30 15:44
