amazeui學習筆記--js插件（UI加強4）--下拉組件Dropdown
1、總結
一、am-dropdown（及其孩子）：控制下拉列表的樣式javascript
二、data-am-dropdown（及其孩子）：控制下拉列表的事件，這部分事件固然能夠用jquery來代替java
三、下拉列表樣例：jquery
1 <div class="am-dropdown" data-am-dropdown> 2 <button class="am-btn am-btn-primary am-dropdown-toggle" data-am-dropdown-toggle>下拉列表 <span class="am-icon-caret-down"></span></button> 3 <ul class="am-dropdown-content"> 4 <li class="am-dropdown-header">標題</li> 5 <li><a href="#">快樂的方式不僅一種</a></li> 6 <li class="am-active"><a href="#">最榮幸是</a></li> 7 <li><a href="#">誰都是造物者的光榮</a></li> 8 <li class="am-disabled"><a href="#">就站在光明的角落</a></li> 9 <li class="am-divider"></li> 10 <li><a href="#">天空海闊 要作最堅強的泡沫</a></li> 11 </ul> 12 </div>
am-dropdown樣式：am-dropdown am-dropdown-content toggle headergit
data-am-dropdown事件：data-am-dropdown data-am-dropdown-togglegithub
2、下拉組件Dropdown
Dropdown
使用演示
下拉列表
Copy
下拉列表
<div class="am-dropdown" data-am-dropdown> <button class="am-btn am-btn-primary am-dropdown-toggle" data-am-dropdown-toggle>下拉列表 <span class="am-icon-caret-down"></span></button> <ul class="am-dropdown-content"> <li class="am-dropdown-header">標題</li> <li><a href="#">快樂的方式不僅一種</a></li> <li class="am-active"><a href="#">最榮幸是</a></li> <li><a href="#">誰都是造物者的光榮</a></li> <li class="am-disabled"><a href="#">就站在光明的角落</a></li> <li class="am-divider"></li> <li><a href="#">天空海闊 要作最堅強的泡沫</a></li> </ul> </div>
上拉列表
在 .am-dropdown 上添加 .am-dropdown-up class，在上面彈出內容。api
Copy
上拉列表
<div class="am-dropdown am-dropdown-up" data-am-dropdown> <button class="am-btn am-btn-danger am-dropdown-toggle" data-am-dropdown-toggle>上拉列表 <span class="am-icon-caret-up"></span></button> <ul class="am-dropdown-content"> <li class="am-dropdown-header">標題</li> <li><a href="#">快樂的方式不僅一種</a></li> <li class="am-active"><a href="#">最榮幸是</a></li> <li><a href="#">誰都是造物者的光榮</a></li> <li class="am-disabled"><a href="#">就站在光明的角落</a></li> <li class="am-divider"></li> <li><a href="#">天空海闊 要作最堅強的泡沫</a></li> </ul> </div>
下拉內容
Copy
下拉內容
<div class="am-dropdown" data-am-dropdown> <button class="am-btn am-btn-success am-dropdown-toggle">Dropdown <span class="am-icon-caret-down"></span></button> <div class="am-dropdown-content"> <h2>I am what I am</h2> <p> 多麼高興 在琉璃屋中快樂生活 對世界說 甚麼是光明和磊落 我就是我 是顏色不同的煙火 </p> </div> </div>
寬度適應
下拉內容 .am-dropdown-content 爲絕對定位，寬度會根據內容縮放（最小爲 160px）。瀏覽器
在 data-am-dropdown 裏指定要適應到的元素，下拉內容的寬度會設置爲該元素的寬度。固然能夠直接在 CSS 裏設置下拉內容的寬度。ide
Copy
寬度適應下拉
<div id="doc-dropdown-justify"> <div class="am-dropdown" data-am-dropdown="{justify: '#doc-dropdown-justify'}"> <button class="am-btn am-btn-success am-dropdown-toggle">寬度適應下拉 <span class="am-icon-caret-down"></span></button> <div class="am-dropdown-content"> <h2>I am what I am</h2> <p> 多麼高興 在琉璃屋中快樂生活 對世界說 甚麼是光明和磊落 我就是我 是顏色不同的煙火 </p> </div> </div> </div>
調用方式
經過 Data API
如上面的演示所示，根據示例組織好 HTML 結構，而後在 .am-dropdown 上添加 data-am-dropdown 屬性，相關選項能夠設置在該屬性的值裏。學習
經過 JS
按照示例組織好 HTML 結構（不加 data-am-dropdown 屬性），而後經過 JS 來調用。ui
Copy
經過 JS 調用
<div id="doc-dropdown-justify-js" style="width: 400px"> <div class="am-dropdown" id="doc-dropdown-js"> <button class="am-btn am-btn-danger am-dropdown-toggle">經過 JS 調用 <span class="am-icon-caret-down"></span></button> <div class="am-dropdown-content">...</div> </div> </div> <script> $(function() { $('#doc-dropdown-js').dropdown({justify: '#doc-dropdown-justify-js'}); }); </script>
方法
$(element).dropdown(options)激活下拉功能；$(element).dropdown('toggle')下拉狀態交替；$(element).dropdown('close')隱藏下拉菜單；$(element).dropdown('open')顯示下拉菜單。
Copy
調用 Toggle 調用 Open 調用 Close
<button class="am-btn am-btn-secondary" id="doc-dropdown-toggle">調用 Toggle</button> <button class="am-btn am-btn-success" id="doc-dropdown-open">調用 Open</button> <button class="am-btn am-btn-warning" id="doc-dropdown-close">調用 Close</button> <script> $(function() { var $dropdown = $('#doc-dropdown-js'), data = $dropdown.data('amui.dropdown'); $('#doc-dropdown-toggle').on('click', function(e) { $dropdown.dropdown('toggle'); return false; }); $('#doc-dropdown-open').on('click', function(e) { data.active ? alert('已經打開了，施主又何須再糾纏呢！') : $dropdown.dropdown('open'); return false; }); $('#doc-dropdown-close').on('click', function(e) { data.active ? $dropdown.dropdown('close') : alert('沒有開哪有關，沒有失哪有得！'); return false; }); $dropdown.on('open.dropdown.amui', function (e) { console.log('open event triggered'); }); }); </script>
參數說明
| 參數 | 類型 | 默認 | 描述 |
|---|---|---|---|
boundary |
選擇器 | window |
下拉內容邊界，避免下拉內容超過邊界被遮蓋截斷 |
justify |
選擇器 | undefined |
下拉內容適應寬度的元素 |
自定義事件
下拉框的自定義事件在 .am-dropdown 上觸發。
| 事件名稱 | 描述 |
|---|---|
open.dropdown.amui |
調用顯示下拉框方法時當即觸發 |
opened.dropdown.amui |
下拉框顯示完成時觸發 |
close.dropdown.amui |
調用隱藏方法時觸發 |
closed.dropdown.amui |
下拉框關閉完成時觸發 |
Copy
$(function() { $dropdown.on('open.dropdown.amui', function (e) { console.log('open event triggered'); }); });