頻道欄目
首頁 > 資訊 > JS 實例 > 正文

Bootstrap模塊dropdown實現下拉框響應

16-05-25        來源:[db:作者]  
收藏   我要投稿
這篇文章主要為大家詳細介紹了Bootstrap下拉框模塊dropdown實現下拉框響應,感興趣的朋友可以參考一下
 

本文介紹了Bootstrap下拉框模塊dropdown的使用方法,供大家參考,具體內容如下

一、源碼分析:
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>
相關TAG標簽
上一篇:臺積電:絕大多數7nm客戶都會轉向6nm_IT新聞_博客園
下一篇:最后一頁
相關文章
圖文推薦

關于我們 | 聯系我們 | 廣告服務 | 投資合作 | 版權申明 | 在線幫助 | 網站地圖 | 作品發布 | Vip技術培訓 | 舉報中心

版權所有: 紅黑聯盟--致力于做實用的IT技術學習網站

美女MM131爽爽爽毛片