amazeui学习笔记--js插件(UI增强4)--下拉组件Dropdown
amazeui学习笔记--js插件(UI增强4)--下拉组件Dropdown
一、总结
1、am-dropdown(及其孩子):控制下拉列表的样式
2、data-am-dropdown(及其孩子):控制下拉列表的事件,这部分事件当然可以用jquery来代替
3、下拉列表样例:
<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 am-dropdown-content toggle header
data-am-dropdown事件:data-am-dropdown data-am-dropdown-toggle
二、下拉组件Dropdown
Dropdown
使用演示
下拉列表
<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,在上面弹出内容。
<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>
下拉内容
<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 里设置下拉内容的宽度。
<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 来调用。
<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')
显示下拉菜单。
<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 |
下拉框关闭完成时触发 |
$(function() {
$dropdown.on('open.dropdown.amui', function (e) {
console.log('open event triggered');
});
});
amazeui学习笔记--js插件(UI增强4)--下拉组件Dropdown的更多相关文章
- amazeui学习笔记--js插件(UI增强)--警告框Alert
amazeui学习笔记--js插件(UI增强)--警告框Alert 一.总结 1.警告框基本样式:用am-alert声明div容器, <div class="am-alert" ...
- amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse
amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse 一.总结 注意点: 1.data-am-collapse:这个东西就是展开折叠事件 2.am-collapse(包括其下属 ...
- amazeui学习笔记--js插件(UI增强2)--按钮交互Button
amazeui学习笔记--js插件(UI增强2)--按钮交互Button 一.总结 1.按钮loading状态: <button type="button" class=&q ...
- amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules
amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...
- amazeui学习笔记二(进阶开发2)--Web组件简介Web Component
amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...
- Jquery学习笔记:利用jquery获取select下拉框的值
jquery不是特别熟练,每次使用不常用的就要百度,特地记录下来. 我的下拉框是: <div class="form-group"> <select class= ...
- .net Core学习笔记3 编辑列表并绑定下拉列
本次主要实现列表的编辑及下拉列表的绑定 先看效果图: 主要用DropDownList绑定下拉列后端代码: 1:定义一个存下拉数据类 public class SelectItem { public s ...
- amazeui中的js插件有哪些(详解功能)
amazeui中的js插件有哪些(详解功能) 一.总结 一句话总结: 二.amazeui中的js插件有哪些 1.UI 增强 警告框Alert 按钮交互Button 折叠面板Collapse 下拉组件D ...
- amazeui学习笔记二(进阶开发1)--项目结构structure
amazeui学习笔记二(进阶开发1)--项目结构structure 一.总结 1.项目结构:是说的amazeui在github上面的项目结构,二次开发amazeui用 二.项目结构structure ...
随机推荐
- IsoAlgo3d - IDF/PCF pipeline 3d viewer
IsoAlgo3d - IDF/PCF pipeline 3d viewer eryar@163.com Key Words. IDF, PCF, IsoAlgo, 3D 当前国际主流管道设计软件都可 ...
- C#加减乘除
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- select选择框实现跳转
select选择框实现跳转 零.启示 1.启示把bom里面的几个对象稍微有点印象,那么主干有了,学其它的就感觉添置加瓦,很简单 就是关注树木的主干 2.万能的百度,不过当然要你基础好学得多才能看得懂, ...
- C++ 补课(一)
1,在C语言中,全局变量必须声明在所有的函数之前,局部变量必须声明在所有可执行语句之前: C++ 允许在代码块的任何位置对局部变量进行声明 2,常量定义方面,C语言 #define 可能因计算的优先级 ...
- Easy mock - 安装配置和基本使用
Easy-mock easy-mock是一款比较好用的接口模拟工具, 使用之前我们需要安装和配置 需要下载的内容有以下 Node Redis MongoDB Node和Redis一路点下一步就行, M ...
- 小米开源便签Notes-源码研究(0)-整体功能介绍(图文并茂)
本周对小米开源文件管理器,做了整体的研究,大致弄清了源码的来龙去脉,剩下的就是重点研究几个活动的流程了. 讲解Android应用这种可视化的程序,感觉还是有图比较好,不然功能界面都不清楚,自己不好介绍 ...
- 【例题 8-13 UVA - 11093】Just Finish it up
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 尺取法. 假设现在取[l..r]这一段. 然后发现累加的和小于0了. 那么方法只能是不走l..l+1这一段了 即delta递减(p[ ...
- 【Codeforces Round #426 (Div. 2) B】The Festive Evening
[Link]:http://codeforces.com/contest/834/problem/B [Description] [Solution] 模拟水题; 注意一个字母单个出现的时候,结束和开 ...
- PatentTips - Transparent unification of virtual machines
BACKGROUND Virtualization technology enables a single host computer running a virtual machine monito ...
- Android学习笔记进阶15之Shader渲染
Android提供的Shader类主要是渲染图像以及一些几何图形. Shader有几个直接子类: BitmapShader : 主要用来渲染图像 LinearGradient :用来进行线性渲 ...