Bootstrap框架動態(tài)生成Web頁面文章內(nèi)目錄的方法
引言
在寫博客的時候，為了條理性起見，經(jīng)常會使用許多小標題，當文章長時，需要來回在不同的標題之間穿梭，如果手動添加目錄，添加錨點，實在是麻煩，為此，可以動態(tài)生成一塊目錄區(qū)域，并使用Bootstrap提供的Affix插件將目錄區(qū)域固定在頁面上。Bootstrap文檔便使用了它
準備工作-引入bootstrap.min.js
將bootstrap.min.js放入body之前的script標簽中，uikit.min.js暫時不引入。
引入相關(guān)插件之后，我們的思路是首先根據(jù)文章自動生成錨點以及菜單內(nèi)容，隨后為其添加Affix產(chǎn)生固定效果，再使用uikit的scrollSpy插件(bootstrap中也有scrollspy,使用方法幾乎一致)。
引-學(xué)習(xí)Affix的使用
Affix插件尅幫助我們固定導(dǎo)航部分的位置，并且根據(jù)用戶的滾動情況來為固定的元素增加垂直偏移量，使得nav在三個類之間進行切換：
1.affix-top:表示在頂端
2.affix:表示在頁面滾動，增加fixed屬性，同時使用自定義的offset偏移量
3.affix-bottom:表示到達最底端
啟用Affix只需要以下代碼：
$('#nav').affix({
offset: {
top:$('header').offset().top,
bottom: ($('footer').outerHeight(true) +
$('.application').outerHeight(true)) + 40
}
});
一、組織HTML代碼部分
<ul id="mysidebar" class="nav affix" > </ul>
一定要注意為ul添加nav和affix類。
二、生成封裝代碼
將本代碼段引入到你自己的script腳本中
;$.fn.extend({
"createAffix": function(selector) {
$list = $("" + selector),
length = $list.length,
affixValue = "";
for (var i = 0; i < length; i++) {
//給每一個標題增加name屬性
$list.eq(i).attr("id", ("node" + i));
var text = $list.eq(i).text();
if (i == 0) {
affixValue += "<li><a href=#node" + i + " class='active' >" + text + "</a></li>";
} else {
affixValue += "<li><a href=#node" + i + ">" + text + "</a></li>";
}
}
this.append(affixValue);
this.affix({
offset: {
top: this.offset().top//在固定之后距離頂部的偏移量
}
});
return this;
}
});
上述代碼的原理是為createAffix函數(shù)傳入需要被認為是標題單元的標簽或者類，在遍歷過程中為其增加錨點鏈接。
三、使用方法
書寫HTML部分
<ul id="mysidebar" class="nav affix" > <li><a href="#node1"></a></li> <li><a href="#node2"></a></li> <li><a href="#node3"></a></li> </ul> <h3 id="node1">標題1</h3> <h3 id="node2">標題2</h3> <h3 id="node3">標題3</h3>
書寫Javascript部分
$(function(){
$(' #mysidebar').createAffix('h3');
//表示在文章中，使用`h3`標簽的是 需要被添加錨點的地方。
});
解決錨點偏移的問題
因為錨點默認將頁面偏移到錨點元素的頂部，也就是如果我們對標題1進行了上述操作，當我們點擊錨點時，頁面會偏移到'標題1'所在的頂端位置，如果頂端有菜單欄，那么將會被遮住，通過設(shè)置css樣式來解決。
.class{
/*
添加padding可以讓錨點向下偏移num px，也就是跳過菜單欄的高度，
通過設(shè)置margin-top為負值來`彌補`因為padding-top帶來的空白部分
*/
padding-top: num px;
margin-top: -num px;
}
添加滾動監(jiān)聽
目前我們的DOM文檔是這樣的。
<ul id="mysidebar" class="nav affix" > <li><a href="#node1"></a></li> <li><a href="#node2"></a></li> <li><a href="#node3"></a></li> </ul>
加工一下，引入uikit屬性,具體查看文檔
<ul id="mysidebar" class="nav affix uk-nav uk-nav-side" data-uk-scrollspy-nav="{closest:'li',smoothscrool:true}" >
<li><a href="#node1"></a></li>
<li><a href="#node2"></a></li>
<li><a href="#node3"></a></li>
</ul>
引入uikit.min.js
由于我們的菜單項(li)是在文檔加載后執(zhí)行的，那么如果在生成菜單項之前變執(zhí)行uikit的scrollspy，那么必定不起作用，所以要在菜單項生成后引入uikit.min.js，代碼如下：
$(function(){
$(' #mysidebar').createAffix('h3');//生成菜單
$.getScript("uikit.min.js");//異步載入uikit.min.js，滾動監(jiān)聽生效。
});
相關(guān)文章
javascript獲取鼠標位置部分的實例代碼(兼容IE,FF)
這篇文章介紹了javascript獲取鼠標位置部分的實例代碼，有需要的朋友可以參考一下2013-08-08
微信小程序目前的火熱程度相信不用多言，最近利用空余時間用小程序?qū)崿F(xiàn)了個動態(tài)的登錄頁效果，所以下面這篇文章主要給大家介紹了利用微信小程序?qū)崿F(xiàn)登錄頁云層漂浮動畫效果的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
微信小程序8種數(shù)據(jù)通信的方式小結(jié)
這篇文章主要介紹了微信小程序8種數(shù)據(jù)通信的方式小結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
javascript導(dǎo)出csv文件（excel）的方法示例
這篇文章主要給大家介紹了關(guān)于javascript導(dǎo)出csv文件（excel）的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
javascript實現(xiàn)了照片拖拽點擊置頂?shù)恼掌瑝Υa
這篇文章主要介紹了javascript實現(xiàn)了照片拖拽點擊置頂?shù)恼掌瑝Υa，效果非常不錯，這里推薦給大家，有需要的小伙伴可以參考下。2015-04-04
這篇文章主要介紹了JS數(shù)組方法reduce的用法,結(jié)合實例形式詳細分析了JS數(shù)組方法reduce的基本功能、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下2020-03-03
JavaScript中的appendChild()方法示例詳解
這篇文章主要介紹了JavaScript中的appendChild()方法,appendChild()方法是向節(jié)點添加最后一個子節(jié)點,也可以使用此方法從一個元素向另一個元素移動元素,本文結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2023-10-10
echarts實現(xiàn)中國地圖下鉆進入下一級(地圖鉆取)
最近在學(xué)習(xí)echarts,今天就來介紹一下echarts實現(xiàn)中國地圖下鉆進入下一級,具有一定的參考價值,感興趣的可以了解一下2023-08-08
文檔對象模型 (DOM) 表示 HTML 文檔的結(jié)構(gòu),導(dǎo)航或“遍歷”此結(jié)構(gòu)是 Web 開發(fā)的基本方面,使開發(fā)人員能夠在網(wǎng)頁上選擇、修改、刪除或添加內(nèi)容,本文深入研究了使用 JavaScript 進行 DOM 遍歷的藝術(shù),提供了一個強大的工具包來處理各種遍歷場景2023-09-09
JS實用技巧小結(jié)(屏蔽錯誤、div滾動條設(shè)置、背景圖片位置等)
這篇文章主要介紹了JS實用技巧,包括常見的js屏蔽錯誤、div滾動條設(shè)置以及背景圖片位置等,代碼簡潔易懂,非常實用,需要的朋友可以參考下2016-06-06