本文介紹了Bootstrap下拉框模塊dropdown的使用方法，供大家參考，具體內(nèi)容如下
一、源碼分析：
Dropdowns.scss：下拉框模塊
Javascripts/bootstrap/dropdown.js：實現(xiàn)下拉框響應
二、功能及原理：
下拉選項卡，默認不能實現(xiàn)顯示選中項的功能
原理：
1、利用dropdown類作為定位點，然后讓子級的列表dropdown-menu絕對定位實現(xiàn)，還需要加一個單擊點作為設置data-toggle=”dropdown”才能做關聯(lián)。
2、 需要js插件的支持
三、源碼分析：
1、caret：實現(xiàn)向下的三角形，利用邊框?qū)崿F(xiàn)的
1.1、邊框顏色默認是字體顏色
1.2、三角形的實現(xiàn)：邊框要有寬度，然后相鄰兩邊需有寬度，但顏色透明；最后還需要元素為行內(nèi)塊元素，才能使其高、寬為0。
1.3、代碼如下
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注入事件實現(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)妙的設計在于插件的框架，data-*模式的調(diào)用與Js插件模式的調(diào)用，而這兩種調(diào)用模式卻利用了同一份代碼。
5、如果用Js插件調(diào)用，基礎方法都要自己調(diào)用才行，在創(chuàng)建實例時只會綁定toggle事件。
var Dropdown = function (element) { $(element).on('click.bs.dropdown', this.toggle)} 6、clearMenu：只會清除data-toggle=”dropdown”的元素
7、dropdown-backdrop：用于移動沒有單擊事件的處理
8、keydown：當dropdown按鈕獲取焦點的時候，按下鍵可以展開，按上鍵收縮的功能
9、data-target和herf=”#id”：是為了實現(xiàn)單擊，展開指定的下拉列表，默認是展開與按鈕后面兄弟節(jié)點：
<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" >實用工具</a></li></ul><div id="name" > <ul class="dropdown-menu" > <li><a>關于我們</a></li> </ul></div>
10、實現(xiàn)向上彈出子菜單，用bottom:100%（彈出子菜單bottom的定位）實現(xiàn)
11、應用示例
<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>
以上就是本文的全部內(nèi)容，希望對大家學習javascript程序設計有所幫助。
