amazeui学习笔记--js插件（UI增强4）--下拉组件Dropdown

一、总结

1、am-dropdown（及其孩子）：控制下拉列表的样式

2、data-am-dropdown（及其孩子）：控制下拉列表的事件，这部分事件当然可以用jquery来代替

3、下拉列表样例：

1 
     
       2   
      下拉列表  3   
      
        4     
       
标题
 5     
       
快乐的方式不只一种
 6     
       
最荣幸是
 7     
       
谁都是造物者的光荣
 8     
       
就站在光明的角落
 9     
       
10     
       
天空海阔 要做最坚强的泡沫
11   
      
12 
     

am-dropdown样式：am-dropdown am-dropdown-content toggle header

data-am-dropdown事件：data-am-dropdown data-am-dropdown-toggle

 

 

 

 

 

二、下拉组件Dropdown

Dropdown

---

目录

使用演示

下拉列表

 Copy

下拉列表 

     
 
      下拉列表  
      
 
       
标题
 
       
快乐的方式不只一种
 
       
最荣幸是
 
       
谁都是造物者的光荣
 
       
就站在光明的角落
 
       
 
       
天空海阔 要做最坚强的泡沫
 
      
 
     

上拉列表

在 .am-dropdown 上添加 .am-dropdown-up class，在上面弹出内容。

 Copy

上拉列表 

     
 
      上拉列表  
      
 
       
标题
 
       
快乐的方式不只一种
 
       
最荣幸是
 
       
谁都是造物者的光荣
 
       
就站在光明的角落
 
       
 
       
天空海阔 要做最坚强的泡沫
 
      
 
     

下拉内容

 Copy

下拉内容 

     
 
      Dropdown  
      
 
       
I am what I am
 
       
 多么高兴 在琉璃屋中快乐生活 对世界说 甚么是光明和磊落 我就是我 是颜色不一样的烟火 
 
      
 
     

宽度适应

下拉内容 .am-dropdown-content 为绝对定位，宽度会根据内容缩放（最小为 160px）。

在 data-am-dropdown 里指定要适应到的元素，下拉内容的宽度会设置为该元素的宽度。当然可以直接在 CSS 里设置下拉内容的宽度。

 Copy

宽度适应下拉 

     
  
      
 
       宽度适应下拉  
       
 
        
I am what I am
 
        
 多么高兴 在琉璃屋中快乐生活 对世界说 甚么是光明和磊落 我就是我 是颜色不一样的烟火 
 
       
 
      
 
     

调用方式

通过 Data API

如上面的演示所示，根据示例组织好 HTML 结构，然后在 .am-dropdown 上添加 data-am-dropdown 属性，相关选项可以设置在该属性的值里。

通过 JS

按照示例组织好 HTML 结构（不加 data-am-dropdown 属性），然后通过 JS 来调用。

 Copy

通过 JS 调用 

     
 
      
 
       通过 JS 调用  
       
        ...
       
 
      
 
     
 

方法

• $(element).dropdown(options) 激活下拉功能；
• $(element).dropdown('toggle') 下拉状态交替；
• $(element).dropdown('close') 隐藏下拉菜单；
• $(element).dropdown('open') 显示下拉菜单。

 Copy

调用 Toggle 调用 Open 调用 Close

调用 Toggle 调用 Open 调用 Close 

参数说明

参数	类型	默认	描述
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'); }); });

Issue 列表