Bootstrap原始碼分析之dropdown

小龍女先生發表於2016-05-21
boot原始碼

 

原始碼分析：

Dropdowns.scss：下拉框模組
Javascripts/bootstrap/dropdown.js：實現下拉框響應

實現功能及原理：

下拉選項卡，預設不能實現顯示選中項的功能

原理：

1、利用dropdown類作為定位點，然後讓子級的列表dropdown-menu絕對定位實現，還需要加一個單擊點作為設定data-toggle=”dropdown”才能做關聯。
2、 需要js外掛的支援

 

原始碼分析：

1、caret：實現向下的三角形，利用邊框實現的
    1.1、邊框顏色預設是字型顏色
    1.2、三角形的實現：邊框要有寬度，然後相鄰兩邊需有寬度，但顏色透明；最後還需要元素為行內塊元素，才能使其高、寬為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事件的監聽，監聽型別為data-toggle=”dropdown”。
3、Js外掛寫的Plugin函式，和類的建構函式是用於js方式呼叫外掛；
4、而data-*模式呼叫外掛，用到是向document注入事件實現的，程式碼如下：

$(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)

程式碼直接呼叫了Dropdown定義的方法，這裡經妙的設計在於外掛的框架，data-*模式的呼叫與Js外掛模式的呼叫，而這兩種呼叫模式卻利用了同一份程式碼。
5、如果用Js外掛呼叫，基礎方法都要自己呼叫才行，在建立例項時只會繫結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”：是為了實現單擊，展開指定的下拉選單，預設是展開與按鈕後面兄弟節點：

<ul class="nav nav-pills navbar-nav">
   <li><a>Index</a></li>
   <li><a>產呂</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、實現向上彈出子選單，用bottom:100%（彈出子選單bottom的定位）實現
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>

相關文章