這篇文章主要介紹了Bootstrap框架動(dòng)態(tài)生成Web頁面文章內(nèi)目錄的方法,利用Bootstrap中的Affix和ScrollSpy插件便可以實(shí)現(xiàn),需要的朋友可以參考下

引言

在寫博客的時(shí)候，為了條理性起見，經(jīng)常會(huì)使用許多小標(biāo)題，當(dāng)文章長(zhǎng)時(shí)，需要來回在不同的標(biāo)題之間穿梭，如果手動(dòng)添加目錄，添加錨點(diǎn)，實(shí)在是麻煩，為此，可以動(dòng)態(tài)生成一塊目錄區(qū)域，并使用Bootstrap提供的Affix插件將目錄區(qū)域固定在頁面上。Bootstrap文檔便使用了它

準(zhǔn)備工作-引入bootstrap.min.js

將bootstrap.min.js放入body之前的script標(biāo)簽中，uikit.min.js暫時(shí)不引入。

引入相關(guān)插件之后，我們的思路是首先根據(jù)文章自動(dòng)生成錨點(diǎn)以及菜單內(nèi)容，隨后為其添加Affix產(chǎn)生固定效果，再使用uikit的scrollSpy插件(bootstrap中也有scrollspy,使用方法幾乎一致)。

引-學(xué)習(xí)Affix的使用

Affix插件尅幫助我們固定導(dǎo)航部分的位置，并且根據(jù)用戶的滾動(dòng)情況來為固定的元素增加垂直偏移量，使得nav在三個(gè)類之間進(jìn)行切換：

1.affix-top:表示在頂端

2.affix:表示在頁面滾動(dòng)，增加fixed屬性，同時(shí)使用自定義的offset偏移量

3.affix-bottom:表示到達(dá)最底端

啟用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++) {

       //給每一個(gè)標(biāo)題增加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ù)傳入需要被認(rèn)為是標(biāo)題單元的標(biāo)簽或者類，在遍歷過程中為其增加錨點(diǎn)鏈接。

三、使用方法

書寫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">標(biāo)題1</h3>

<h3 id="node2">標(biāo)題2</h3>

<h3 id="node3">標(biāo)題3</h3>

書寫Javascript部分

$(function(){

$(' #mysidebar').createAffix('h3');

//表示在文章中，使用`h3`標(biāo)簽的是 需要被添加錨點(diǎn)的地方。

});

解決錨點(diǎn)偏移的問題

因?yàn)殄^點(diǎn)默認(rèn)將頁面偏移到錨點(diǎn)元素的頂部，也就是如果我們對(duì)標(biāo)題1進(jìn)行了上述操作，當(dāng)我們點(diǎn)擊錨點(diǎn)時(shí)，頁面會(huì)偏移到'標(biāo)題1'所在的頂端位置，如果頂端有菜單欄，那么將會(huì)被遮住，通過設(shè)置css樣式來解決。

.class{

    /*

    添加padding可以讓錨點(diǎn)向下偏移num px，也就是跳過菜單欄的高度，

    通過設(shè)置margin-top為負(fù)值來`彌補(bǔ)`因?yàn)閜adding-top帶來的空白部分

    */

    padding-top: num px;

    margin-top: -num px;

}

添加滾動(dòng)監(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

由于我們的菜單項(xiàng)(li)是在文檔加載后執(zhí)行的，那么如果在生成菜單項(xiàng)之前變執(zhí)行uikit的scrollspy，那么必定不起作用，所以要在菜單項(xiàng)生成后引入uikit.min.js，代碼如下：

$(function(){

$(' #mysidebar').createAffix('h3');//生成菜單

$.getScript("uikit.min.js");//異步載入uikit.min.js，滾動(dòng)監(jiān)聽生效。

});