Bootstrap中的 JavaScript 特效 — 下拉菜單和滾動監聽插件

一．下拉菜單

　　　　常規使用中，和組件方法同樣，代碼以下：

 1 //聲明式用法
 2 <div class="dropdown">
 3 　　<button class="btn btn-primary" data-toggle="dropdown">
 4 　　　　下拉菜單
 5 　　　　<span class="caret"></span>
 6　　 </button>
 7 　　<ul class="dropdown-menu">
 8　　　　 <li><a href="#">首頁</a></li>
 9 　　　　<li><a href="#">產品</a></li>
10 　　　　<li><a href="#">資訊</a></li>
11 　　　　<li><a href="#">關於</a></li>
12 　　</ul>
13 </div>

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

　　　　

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

 

　　　　下拉菜單支持4 種事件，分別對應彈出前、彈出後、關閉前和關閉後。

　　　　

　　　　//事件，其餘雷同
　　　　$('#dropdown').on('show.bs.dropdown', function () {
　　　　　　　　alert('在調用show 方法時當即觸發！');
　　　　});

 

二．滾動監聽　　

　　　　滾動監聽插件是用來根據滾動條所處在的位置自動更新導航項目，顯示導航項目高亮顯示。

 1 　　//基本示例
 2    <nav class="navbar navbar-default">
 3         <a href="#" class="navbar-brand">web開發</a>
 4         <ul class="nav navbar-nav">
 5             <li><a href="#HTML5">HTML5</a></li>
 6             <li><a href="#bootstrap">bootstrap</a></li>
 7             <li class="dropdown">
 8                 <a href="#" data-toggle="dropdown">JavaScript<span class="caret"></span></a>
 9                 <ul class="dropdown-menu">
10                     <li><a href="#jquery">jquery</a></li>
11                     <li><a href="#Yui">Yui</a></li>
12                     <li><a href="#ExtJS">ExtJS</a></li>
13                 </ul>
14             </li>
15 
16         </ul>
17    </nav>
18     <div data-offset="0" data-spy="scroll" style="padding: 0 10px; height: 200px;overflow: auto; position: relative;">
19         <h4 id="HTML5">HTML5</h4>
20         <p>標準通用標記語言下的一個應用HTML 標準自1999 年12 月發佈的HTML4.01後，後繼的HTML5 和其它標準被束之高閣，爲了推進Web 標準化運動的發展，一些</p>
21         <h4 id="bootstrap">bootstrap</h4>
22         <p>標準通用標記語言下的一個應用HTML 標準自1999 年12 月發佈的HTML4.01後，後繼的HTML5 和其它標準被束之高閣，爲了推進Web 標準化運動的發展，一</p>
23         <h4 id="jquery">jquery</h4>
24         <p>標準通用標記語言下的一個應用HTML 標準自1999 年12 月發佈的HTML4.01後，後繼的HTML5 和其它標準被束之高閣，爲了推進Web 標準化運動的發展，一些</p>
25         <h4 id="Yui">Yui</h4>
26         <p>標準通用標記語言下的一個應用HTML 標準自1999 年12 月發佈的HTML4.01後，後繼的HTML5 和其它標準被束之高閣，爲了推進Web 標準化運動的發展，一。</p>
27         <h4 id="ExtJS">ExtJS</h4>
28         <p>標準通用標記語言下的一個應用HTML 標準自1999 年12 月發佈的HTML4.01後，後繼的HTML5 和其它標準被束之高閣，爲了推進Web 標準化運動的發展，一。</p>
29     </div>

　　　　　　　

　　　　　PS：在一個菜單和一個容器的時候，data-target 不設置也能夠穩定實現滾動監聽高亮。但多個導航時，你不關聯其中一個，會致使錯誤，因此，通常要加上。

　　　　

　　　　   若是使用JavaScript 腳本方式，能夠去掉data-*，使用腳本屬性定義：offset、spy和target。具體方法以下：

1 //使用腳本方式定義屬性
2 $('#content').scrollspy({
3 　　offset : 0,
4 　　target : '#nav',
5 });

　　　　滾動監聽還有一個切換到新條目的事件

　　　　

1 //事件綁定在導航上
2 $('#nav').on('activate.bs.scrollspy', function () {
3　　 alert('新條目被激活後觸發此事件！');
4 });

　　　　滾動監聽還有一個更新容器DOM 的方法。

//HTML 部分
<section class="sec">
　　<h4 id="html5">HTML5<a href="#" onclick="removeSec(this)">刪除此項</a></h4>
　　<p>...</p>
</section>
//刪除內容時，刷新一下DOM，避免導航監聽錯位
function removeSec(e) {
　　$(e).parents('.sec').remove();
　　$('#content').scrollspy('refresh');
}
注意：這個方法必須使用data-*聲明式。