Bootstrap學習js外掛程式篇之下拉式功能表

標籤：style   blog   http   color   io   os   ar   java   for   

案例

通過此外掛程式可以為幾乎所有東西添加下拉式功能表，包括導航條、標籤頁、膠囊式按鈕。

 

用於導航條

 

導航條分為四個部分。第一部分導航頭，第二部分導航列，第三部分form查詢表單，第四部分導航列。

[javascript] view plaincopy

1. <nav class="navbar navbar-default" role="navigation">  
2.  <div class="navbar-header">  
3.    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myCollapse">  
4.      <span class="sr-only">Toggle navigation</span>  
5.      <span class="icon-bar"></span>  
6.      <span class="icon-bar"></span>  
7.      <span class="icon-bar"></span>  
8.    </button>  
9.    <a class="navbar-brand" href="#">Brand</a>  
10.  </div>  
11.   
12.  <div class="collapse navbar-collapse" id="myCollapse">  
13.    <ul class="nav navbar-nav">  
14.      <li class="active"><a href="#">Link</a></li>  
15.      <li><a href="#">Link</a></li>  
16.      <li class="dropdown">  
17.        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>  
18.        <ul class="dropdown-menu">  
19.          <li><a href="#">Action</a></li>  
20.          <li><a href="#">Another action</a></li>  
21.          <li><a href="#">Something else here</a></li>  
22.          <li class="divider"></li>  
23.          <li><a href="#">Separated link</a></li>  
24.          <li class="divider"></li>  
25.          <li><a href="#">One more separated link</a></li>  
26.        </ul>  
27.      </li>  
28.    </ul>  
29.    <form class="navbar-form navbar-left" role="search">  
30.      <div class="form-group">  
31.        <input type="text" class="form-control" placeholder="Search">  
32.      </div>  
33.      <button type="submit" class="btn btn-default">Submit</button>  
34.    </form>  
35.    <ul class="nav navbar-nav navbar-right">  
36.      <li><a href="#">Link</a></li>  
37.      <li class="dropdown">  
38.        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>  
39.        <ul class="dropdown-menu">  
40.          <li><a href="#">Action</a></li>  
41.          <li><a href="#">Another action</a></li>  
42.          <li><a href="#">Something else here</a></li>  
43.          <li class="divider"></li>  
44.          <li><a href="#">Separated link</a></li>  
45.        </ul>  
46.      </li>  
47.    </ul>  
48.  </div>  
49. lt;/nav>  

效果就是

 

用法一--通過data屬性

 

通過向連結或按鈕添加data-toggle="dropdown"可以開啟或關閉下拉式功能表。

      <li class="dropdown">        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>        <ul class="dropdown-menu">          <li><a href="#">Action</a></li>          <li><a href="#">Another action</a></li>          <li><a href="#">Something else here</a></li>          <li class="divider"></li>          <li><a href="#">Separated link</a></li>          <li class="divider"></li>          <li><a href="#">One more separated link</a></li>        </ul>      </li>

 

用法二--通過JavaScript

 

通過JavaScript開啟或關閉下拉式功能表：

刪除data-toggle屬性，那麼再次點擊就不會出現下來菜單了，接下來我們通過給這個a標籤添加一個onclick事件。

 

<script type="text/javascript">     function Test()    {        $(‘#myDropDown‘).dropdown();        } </script>

 

然後點擊a標籤就可以出現下拉式功能表了。

 

可以綁定事件，然後在元素進行相應處理的時候會自動綁定到元素，並進行執行相關的代碼。

$(‘#myDropdown‘).on(‘show.bs.dropdown‘, function () {  // 在顯示的時候做一些處理代碼})

Bootstrap學習js外掛程式篇之下拉式功能表