這篇文章主要為大家詳細(xì)介紹了Bootstrap下拉框模塊dropdown實(shí)現(xiàn)下拉框響應(yīng)，感興趣的朋友可以參考一下

本文介紹了Bootstrap下拉框模塊dropdown的使用方法，供大家參考，具體內(nèi)容如下

一、源碼分析：

Dropdowns.scss：下拉框模塊 

Javascripts/bootstrap/dropdown.js：實(shí)現(xiàn)下拉框響應(yīng)

二、功能及原理：

下拉選項(xiàng)卡，默認(rèn)不能實(shí)現(xiàn)顯示選中項(xiàng)的功能

原理：

1、利用dropdown類作為定位點(diǎn)，然后讓子級(jí)的列表dropdown-menu絕對(duì)定位實(shí)現(xiàn)，還需要加一個(gè)單擊點(diǎn)作為設(shè)置data-toggle=”dropdown”才能做關(guān)聯(lián)。

2、 需要js插件的支持

三、源碼分析：

1、caret：實(shí)現(xiàn)向下的三角形，利用邊框?qū)崿F(xiàn)的

1.1、邊框顏色默認(rèn)是字體顏色

1.2、三角形的實(shí)現(xiàn)：邊框要有寬度，然后相鄰兩邊需有寬度，但顏色透明；最后還需要元素為行內(nèi)塊元素，才能使其高、寬為0。

1.3、代碼如下

代碼如下:

<span style="border-left: 4px solid; border-top: 4px solid transparent; border-bottom: 4px solid transparent; height: 0px; width: 0px; line-height: normal; display: inline-block; "></span>

2、在document上綁定了click事件的監(jiān)聽，監(jiān)聽類型為data-toggle=”dropdown”。

3、Js插件寫的Plugin函數(shù)，和類的構(gòu)造函數(shù)是用于js方式調(diào)用插件；

4、而data-*模式調(diào)用插件，用到是向document注入事件實(shí)現(xiàn)的，代碼如下：

$(document)

.on('click.bs.dropdown.data-api', clearMenus)

.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })

.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)

.on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)

.on('keydown.bs.dropdown.data-api','.dropdown-menu',Dropdown.prototype.keydown)

代碼直接調(diào)用了Dropdown定義的方法，這里經(jīng)妙的設(shè)計(jì)在于插件的框架，data-*模式的調(diào)用與Js插件模式的調(diào)用，而這兩種調(diào)用模式卻利用了同一份代碼。

5、如果用Js插件調(diào)用，基礎(chǔ)方法都要自己調(diào)用才行，在創(chuàng)建實(shí)例時(shí)只會(huì)綁定toggle事件。

var Dropdown = function (element) {

 $(element).on('click.bs.dropdown', this.toggle)

}

6、clearMenu：只會(huì)清除data-toggle=”dropdown”的元素

7、dropdown-backdrop：用于移動(dòng)沒(méi)有單擊事件的處理

8、keydown：當(dāng)dropdown按鈕獲取焦點(diǎn)的時(shí)候，按下鍵可以展開，按上鍵收縮的功能

9、data-target和herf=”#id”：是為了實(shí)現(xiàn)單擊，展開指定的下拉列表，默認(rèn)是展開與按鈕后面兄弟節(jié)點(diǎn)：

<ul class="nav nav-pills navbar-nav">

 <li><a>Index</a></li>

 <li><a>產(chǎn)呂</a></li>

 <li > <a data-toggle="dropdown" href="#name" >實(shí)用工具</a></li>

</ul>

<div id="name" >

 <ul class="dropdown-menu" >

  <li><a>關(guān)于我們</a></li>

 </ul>

</div>

10、實(shí)現(xiàn)向上彈出子菜單，用bottom:100%（彈出子菜單bottom的定位）實(shí)現(xiàn)

11、應(yīng)用示例

<div id="dropdown" class="dropdown">

<a id="dropdown-btn" data-target="#dropdown" >number</a>

<ul class="dropdown-menu" >

  <li><a>3343</a></li>

<li><a>555</a></li>

</ul>

</div>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。