腳本之家服務器常用軟件

快捷導航

Bootstrap框架動態(tài)生成Web頁面文章內(nèi)目錄的方法

更新時間：2016年05月12日 18:06:48 作者：LuckyJing

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

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

準備工作-引入bootstrap.min.js
將bootstrap.min.js放入body之前的script標簽中，uikit.min.js暫時不引入。
引入相關插件之后，我們的思路是首先根據(jù)文章自動生成錨點以及菜單內(nèi)容，隨后為其添加Affix產(chǎn)生固定效果，再使用uikit的scrollSpy插件(bootstrap中也有scrollspy,使用方法幾乎一致)。
引-學習Affix的使用
Affix插件尅幫助我們固定導航部分的位置，并且根據(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'所在的頂端位置，如果頂端有菜單欄，那么將會被遮住，通過設置css樣式來解決。

.class{
    /*
    添加padding可以讓錨點向下偏移num px，也就是跳過菜單欄的高度，
    通過設置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)聽生效。
});

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Bootstrap框架動態(tài)生成Web頁面文章內(nèi)目錄的方法

相關文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具