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

1、Bootstrap框架動態(tài)生成Web頁面文章內(nèi)名目的方法_ 這篇文章主要介紹了Bootstrap框架動態(tài)生成Web頁面文章內(nèi)名目的方法,利用Bootstrap中的Affix和ScrollSpy插件便可以實現(xiàn),需要的伴侶可以參考下 引言 在寫博客的時候，為了條理性起見，常常會用法很多小標(biāo)題，當(dāng)文章長時，需要來回在不同的標(biāo)題之間穿梭，假如手動添加名目，添加錨點，實在是麻煩，為此，可以動態(tài)生成一塊名目區(qū)域，并用法Bootstrap供應(yīng)的Affix插件將名目區(qū)域固定在頁面上。Bootstrap文檔便用法了它 預(yù)備工作-引入bootstrap.min.js 將bootstrap.min.js放入body

2、之前的script標(biāo)簽中，uikit.min.js臨時不引入。 引入相關(guān)插件之后，我們的思路是首先依據(jù)文章自動生成錨點以及菜單內(nèi)容，隨后為其添加Affix產(chǎn)生固定效果，再用法uikit的scrollSpy插件(bootstrap中也有scrollspy,用法方法幾乎全都)。 引-學(xué)習(xí)Affix的用法 Affix插件尅關(guān)心我們固定導(dǎo)航部分的位置，并且依據(jù)用戶的滾動狀況來為固定的元素增加垂直偏移量，使得nav在三個類之間進行切換： 1.affix-top:表示在頂端 2.affix:表示在頁面滾動，增加fixed屬性，同時用法自定義的offset偏移量 3.affix-bottom:表示到達(dá)最底端

3、 啟用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) $li

4、st = $( + selector), length = $list.length, affixValue = ; for (var i = 0; i length; i+) /給每一個標(biāo)題增加name屬性 $list.eq(i).attr(id, (node + i); var text = $list.eq(i).text(); if (i = 0) affixValue += lia href=#node + i + class=active + text + /a/li; else affixValue += lia href=#node + i + + text + /a/li;

5、this.append(affixValue); this.affix( offset: top: this.offset().top/在固定之后距離頂部的偏移量 ); return this; ); 上述代碼的原理是為createAffix函數(shù)傳入需要被認(rèn)為是標(biāo)題單元的標(biāo)簽或者類，在遍歷過程中為其增加錨點鏈接。 三、用法方法 書寫HTML部分 ul id=mysidebar class=nav affix lia href=#node1/a/li lia href=#node2/a/li lia href=#node3/a/li /ul h3 id=node1標(biāo)題1/h3 h3 id=nod

6、e2標(biāo)題2/h3 h3 id=node3標(biāo)題3/h3 書寫Javascript部分 $(function() $( #mysidebar).createAffix(h3); /表示在文章中，用法h3標(biāo)簽的是 需要被添加錨點的地方。 ); 解決錨點偏移的問題 由于錨點默認(rèn)將頁面偏移到錨點元素的頂部，也就是假如我們對標(biāo)題1進行了上述操作，當(dāng)我們點擊錨點時，頁面會偏移到標(biāo)題1所在的頂端位置，假如頂端有菜單欄，那么將會被遮住，通過設(shè)置css樣式來解決。 .class /* 添加padding可以讓錨點向下偏移num px，也就是跳過菜單欄的高度， 通過設(shè)置margin-top為負(fù)值來彌補由于paddi

7、ng-top帶來的空白部分 */ padding-top: num px; margin-top: -num px; 添加滾動監(jiān)聽 目前我們的DOM文檔是這樣的。 ul id=mysidebar class=nav affix lia href=#node1/a/li lia href=#node2/a/li lia 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 lia href=#node1/a/li lia href=#node2/a/li lia href=#node3/a/li /ul 引入uikit.min.js 由于我們的菜單項(li)是在文檔加載后執(zhí)行的，那么假如在生成菜單項之前變執(zhí)行uikit的scrollspy，那么必定不起作用，所以要在菜單項生成后引入uikit.