Bootstrap 下拉菜單和滾動監(jiān)聽插件

一．下拉菜單
常規(guī)使用中，和組件方法一樣，代碼如下：
//聲明式用法
<div class="dropdown">
<button class="btn btn-primary" data-toggle="dropdown">
下拉菜單
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">首頁</a></li>
<li><a href="#">產(chǎn)品</a></li>
<li><a href="#">資訊</a></li>
<li><a href="#">關(guān)于</a></li>
</ul>
</div>

聲明式用法的關(guān)鍵核心：
1.外圍容器使用 class="dropdown"包裹；
2.內(nèi)部點擊按鈕事件綁定 data-toggle="dropdown"；
3.菜單元素使用 class="dropdown-menu"。

//如果按鈕在容器外部，可以通過 data-target 進行綁定。
<button class="btn btn-primary" id="btn" data-toggle="dropdown" data-target="#dropdown">

在 JavaScript 調(diào)用中，沒有屬性，方法并不好用，下面介紹四個基本事件。
//下拉菜單方法，但仍然需要 data-*
$('#btn').dropdown();
$('#btn').dropdown('toggle');

下拉菜單支持 4 種事件，分別對應(yīng)彈出前、彈出后、關(guān)閉前和關(guān)閉后。

//事件，其他雷同
$('#dropdown').on('show.bs.dropdown', function () {
alert('在調(diào)用 show 方法時立即觸發(fā)！');
});

二．滾動監(jiān)聽
滾動監(jiān)聽插件是用來根據(jù)滾動條所處在的位置自動更新導(dǎo)航項目，顯示導(dǎo)航項目高亮顯
示。
//基本實例
<nav id="nav" class="navbar navbar-default">
<a href="#" class="navbar-brand">Web 開發(fā)</a>
<ul class="nav navbar-nav">
<li><a href="#html5">HTML5</a></li>
<li><a href="#bootstrap">Bootstrap</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">JavaScript <span
class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#jquery">jQuery</a></li>
<li><a href="#yui">Yui</a></li>
<li><a href="#extjs">Extjs</a></li>
</ul>
</li>
</ul>
</nav>

<div data-offset="0" data-target="#nav" data-spy="scroll" >
<h5 id="html5">HTML5</h5>
<p>標準通用標記語言下的一個應(yīng)用 HTML 標準自 1999 年 12 月發(fā)布的 HTML4.01 后，后繼的 HTML5 和其它標準被束之高閣，為了推動 Web 標準化運動的發(fā)展，一些公司聯(lián)合起來，成立了一個叫做 Web Hypertext Application Technology Working Group
（Web 超文本應(yīng)用技術(shù)工作組 -WHATWG） 的組織。WHATWG 致力于 Web 表單和應(yīng)用程序， 而 W3C（World Wide Web Consortium，萬維網(wǎng)聯(lián)盟） 專注于 XHTML2.0。在 2006 年，

雙方?jīng)Q定進行合作，來創(chuàng)建一個新版本的 HTML。</p>
<h5 id="bootstrap">Bootstrap</h5>
<p>Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。[1]    它由 Twitter 的設(shè)計師 Mark Otto 和 Jacob Thornton 合作開發(fā)，是一個 CSS/HTML 框架。Bootstrap 提供了優(yōu)雅的 HTML 和 CSS 規(guī)范，它即是由動態(tài) CSS 語言 Less 寫成。Bootstrap 一經(jīng)推出后頗受歡迎，一直是 GitHub 上的熱門開源項目，包括 NASA 的 MSNBC（微軟全國廣播公司） 的 Breaking News 都使用了該項目。[2]  國內(nèi)一些移動開發(fā)者較為熟悉的框架，如 WeX5 前端開源框架等，也是基于 Bootstrap 源碼進行性能優(yōu)化而來。[3] </p>
<h5 id="jquery">jQuery</h5>
<p>JQuery 是繼 prototype 之后又一個優(yōu)秀的 Javascript 庫。它是輕量級的 js
庫 ，它兼容 CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），
jQuery2.0 及后續(xù)版本將不再支持 IE6/7/8 瀏覽器。jQuery 使用戶能更方便地處理 HTML
（標準通用標記語言下的一個應(yīng)用）、events、實現(xiàn)動畫效果，并且方便地為網(wǎng)站提供 AJAX 交互。jQuery 還有一個比較大的優(yōu)勢是，它的文檔說明很全，而且各種應(yīng)用也說得很詳細， 同時還有許多成熟的插件可供選擇。jQuery 能夠使用戶的 html 頁面保持代碼和 html 內(nèi)容分離，也就是說，不用再在 html 里面插入一堆 js 來調(diào)用命令了，只需要定義 id 即可。</p>
<h5 id="yui">Yui</h5>
<p>近幾年隨著 jQuery、Ext 以及 CSS3 的發(fā)展，以 Bootstrap 為代表的前端開發(fā)框架如雨后春筍般擠入視野，可謂應(yīng)接不暇。不論是桌面瀏覽器端還是移動端都涌現(xiàn)出   很多優(yōu)秀的框架，極大豐富了開發(fā)素材，也方便了大家的開發(fā)。這些框架各有特點，本文對   這些框架進行初步的介紹與比較，希望能夠為大家選擇框架提供一點幫助，也為后續(xù)詳細研   究這些框架的拋磚引玉。</p>
<h5 id="extjs">Extjs</h5>
<p>ExtJS 可以用來開發(fā) RIA 也即富客戶端的 AJAX 應(yīng)用，是一個用 javascript 寫的，主要用于創(chuàng)建前端用戶界面，是一個與后臺技術(shù)無關(guān)的前端 ajax 框架。因此，可以把 ExtJS 用在.Net、Java、Php 等各種開發(fā)語言開發(fā)的應(yīng)用中。ExtJs 最開始基于 YUI 技術(shù)，由開發(fā)人員 JackSlocum 開發(fā)，通過參考 JavaSwing 等機制來組織可視化組件，無論從 UI 界面上 CSS 樣式的應(yīng)用，到數(shù)據(jù)解析上的異常處理，都可算是一款不可多得的
JavaScript 客戶端技術(shù)的精品。</p>
</div>

這里有兩個重要的屬性，如下圖：

PS：在一個菜單和一個容易的時候，data-target 不設(shè)置也可以穩(wěn)定實現(xiàn)滾動監(jiān)聽高亮。但多個導(dǎo)航時，你不關(guān)聯(lián)其中一個，會導(dǎo)致錯誤，所以，一般要加上。

如果使用 JavaScript 腳本方式，可以去掉 data-*，使用腳本屬性定義：offset、spy

和 target。具體方法如下：
//使用腳本方式定義屬性
$('#content').scrollspy({ offset : 0,
target : '#nav',
});

滾動監(jiān)聽還有一個切換到新條目的事件。

//事件綁定在導(dǎo)航上
$('#nav').on('activate.bs.scrollspy', function () {
alert('新條目被激活后觸發(fā)此事件！');
});

滾動監(jiān)聽還有一個更新容器 DOM 的方法。

//HTML 部分
<section class="sec">
<h5 id="html5">HTML5
<a href="#" onclick="removeSec(this)">刪除此項</a></h5>
<p>...</p>
</section>

//刪除內(nèi)容時，刷新一下 DOM，避免導(dǎo)航監(jiān)聽錯位function removeSec(e) {
$(e).parents('.sec').remove();
$('#content').scrollspy('refresh');
}

注意：這個方法必須使用 data-*聲明式。