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

一、总结

1、am-dropdown(及其孩子):控制下拉列表的样式

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

3、下拉列表样例

  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 header

data-am-dropdown事件:data-am-dropdown data-am-dropdown-toggle

二、下拉组件Dropdown

Dropdown


使用演示

下拉列表

 Copy
下拉列表 
  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-up class,在上面弹出内容。

 Copy
上拉列表 
  1. <div class="am-dropdown am-dropdown-up" data-am-dropdown>
  2. <button class="am-btn am-btn-danger am-dropdown-toggle" data-am-dropdown-toggle>上拉列表 <span class="am-icon-caret-up"></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>

下拉内容

 Copy
下拉内容 
  1. <div class="am-dropdown" data-am-dropdown>
  2. <button class="am-btn am-btn-success am-dropdown-toggle">Dropdown <span class="am-icon-caret-down"></span></button>
  3. <div class="am-dropdown-content">
  4. <h2>I am what I am</h2>
  5. <p>
  6. 多么高兴 在琉璃屋中快乐生活
  7. 对世界说 甚么是光明和磊落
  8. 我就是我 是颜色不一样的烟火
  9. </p>
  10. </div>
  11. </div>

宽度适应

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

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

 Copy
宽度适应下拉 
  1. <div id="doc-dropdown-justify">
  2. <div class="am-dropdown" data-am-dropdown="{justify: '#doc-dropdown-justify'}">
  3. <button class="am-btn am-btn-success am-dropdown-toggle">宽度适应下拉 <span class="am-icon-caret-down"></span></button>
  4. <div class="am-dropdown-content">
  5. <h2>I am what I am</h2>
  6. <p>
  7. 多么高兴 在琉璃屋中快乐生活
  8. 对世界说 甚么是光明和磊落
  9. 我就是我 是颜色不一样的烟火
  10. </p>
  11. </div>
  12. </div>
  13. </div>

调用方式

通过 Data API

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

通过 JS

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

 Copy
通过 JS 调用 
  1. <div id="doc-dropdown-justify-js" style="width: 400px">
  2. <div class="am-dropdown" id="doc-dropdown-js">
  3. <button class="am-btn am-btn-danger am-dropdown-toggle">通过 JS 调用 <span class="am-icon-caret-down"></span></button>
  4. <div class="am-dropdown-content">...</div>
  5. </div>
  6. </div>
  7. <script>
  8. $(function() {
  9. $('#doc-dropdown-js').dropdown({justify: '#doc-dropdown-justify-js'});
  10. });
  11. </script>

方法

  • $(element).dropdown(options) 激活下拉功能;
  • $(element).dropdown('toggle') 下拉状态交替;
  • $(element).dropdown('close') 隐藏下拉菜单;
  • $(element).dropdown('open') 显示下拉菜单。
 Copy
调用 Toggle 调用 Open 调用 Close
  1. <button class="am-btn am-btn-secondary" id="doc-dropdown-toggle">调用 Toggle</button>
  2. <button class="am-btn am-btn-success" id="doc-dropdown-open">调用 Open</button>
  3. <button class="am-btn am-btn-warning" id="doc-dropdown-close">调用 Close</button>
  4. <script>
  5. $(function() {
  6. var $dropdown = $('#doc-dropdown-js'),
  7. data = $dropdown.data('amui.dropdown');
  8. $('#doc-dropdown-toggle').on('click', function(e) {
  9. $dropdown.dropdown('toggle');
  10. return false;
  11. });
  12. $('#doc-dropdown-open').on('click', function(e) {
  13. data.active ? alert('已经打开了,施主又何必再纠缠呢!') : $dropdown.dropdown('open');
  14. return false;
  15. });
  16. $('#doc-dropdown-close').on('click', function(e) {
  17. data.active ? $dropdown.dropdown('close') : alert('没有开哪有关,没有失哪有得!');
  18. return false;
  19. });
  20. $dropdown.on('open.dropdown.amui', function (e) {
  21. console.log('open event triggered');
  22. });
  23. });
  24. </script>

参数说明

参数 类型 默认 描述
boundary 选择器 window 下拉内容边界,避免下拉内容超过边界被遮盖截断
justify 选择器 undefined 下拉内容适应宽度的元素

自定义事件

下拉框的自定义事件在 .am-dropdown 上触发。

事件名称 描述
open.dropdown.amui 调用显示下拉框方法时立即触发
opened.dropdown.amui 下拉框显示完成时触发
close.dropdown.amui 调用隐藏方法时触发
closed.dropdown.amui 下拉框关闭完成时触发
 Copy
  1. $(function() {
  2. $dropdown.on('open.dropdown.amui', function (e) {
  3. console.log('open event triggered');
  4. });
  5. });

amazeui学习笔记--js插件(UI增强4)--下拉组件Dropdown的更多相关文章

  1. amazeui学习笔记--js插件(UI增强)--警告框Alert

    amazeui学习笔记--js插件(UI增强)--警告框Alert 一.总结 1.警告框基本样式:用am-alert声明div容器, <div class="am-alert" ...

  2. amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse

    amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse 一.总结 注意点: 1.data-am-collapse:这个东西就是展开折叠事件 2.am-collapse(包括其下属 ...

  3. amazeui学习笔记--js插件(UI增强2)--按钮交互Button

    amazeui学习笔记--js插件(UI增强2)--按钮交互Button 一.总结 1.按钮loading状态: <button type="button" class=&q ...

  4. amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules

    amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...

  5. amazeui学习笔记二(进阶开发2)--Web组件简介Web Component

    amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...

  6. Jquery学习笔记:利用jquery获取select下拉框的值

    jquery不是特别熟练,每次使用不常用的就要百度,特地记录下来. 我的下拉框是: <div class="form-group"> <select class= ...

  7. .net Core学习笔记3 编辑列表并绑定下拉列

    本次主要实现列表的编辑及下拉列表的绑定 先看效果图: 主要用DropDownList绑定下拉列后端代码: 1:定义一个存下拉数据类 public class SelectItem { public s ...

  8. amazeui中的js插件有哪些(详解功能)

    amazeui中的js插件有哪些(详解功能) 一.总结 一句话总结: 二.amazeui中的js插件有哪些 1.UI 增强 警告框Alert 按钮交互Button 折叠面板Collapse 下拉组件D ...

  9. amazeui学习笔记二(进阶开发1)--项目结构structure

    amazeui学习笔记二(进阶开发1)--项目结构structure 一.总结 1.项目结构:是说的amazeui在github上面的项目结构,二次开发amazeui用 二.项目结构structure ...

随机推荐

  1. windows下搭建hadoop-2.6.0本地idea开发环境

    概述 本文记录windows下hadoop本地开发环境的搭建: OS:windows hadoop执行模式:独立模式 安装包结构: Hadoop-2.6.0-Windows.zip - cygwinI ...

  2. 《从0到1》读书笔记第2章&quot;像1999 年那样狂欢&quot;第1记:小结及词汇解析

    小结 本章的目的应该是通过90年代末的互联网泡沫的背景,成因.影响,以及教训来教诫人们,在全部人都疯狂的抛身于洪流热潮之中时,我们要冷静的思考辨识出那些不切实际的大众观点,找到隐藏在这些观点后面的反主 ...

  3. js---18miniJquery

    <html> <head> <title>jQuery test</title> </head> <body> <div ...

  4. matlab 时频分析(短时傅里叶变换、STFT)

    短时傅里叶变换,short-time fourier transformation,有时也叫加窗傅里叶变换,时间窗口使得信号只在某一小区间内有效,这就避免了传统的傅里叶变换在时频局部表达能力上的不足, ...

  5. 62.nodejs中的ejs模板学习

    转自:https://blog.csdn.net/dongmelon/article/details/72403913 02.ejs.这是被include的文件 <script> cons ...

  6. window cmd 命令大全 (order)

    Windows CMD命令大全 命令简介 cmd是command的缩写.即命令行 . 运行操作 CMD命令:开始->运行->键入cmd或command(在命令行里可以看到系统版本.文件系统 ...

  7. Kinect 开发 —— Kinect studio

    This tool can record all the data coming into an application from a Kinect unit. You can then view, ...

  8. 图片工具GraphicsMagick的安装配置与基本使用

    本文使用GraphicsMagick的版本为1.3.18 (Released March 9, 2013). 1.简介 GraphicsMagick是一个短小精悍的的图片处理工具和库集合.对于Java ...

  9. [51Nod]NOIP2018提高组省一冲奖班模测训练(四)翻车记+题解

    链接 下午5点的时候,突然想起来有这个比赛,看看还有一个小时,打算来AK一下,结果因为最近智商越来越低,翻车了,我还是太菜了.上来10分钟先切掉了C和A,结果卡在了B题,唉. A.砍树 一眼题,两遍树 ...

  10. R 语言下常用第三方库的说明

    1. doBy 官方文档见 CRAN - Package doBy doBy 主要适用于以下操作: 1) Facilities for groupwise computations of summar ...