popver（弹出菜单）
<div id="popover" class="mui-popover">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">Item1</a></li>
<li class="mui-table-view-cell"><a href="#">Item2</a></li>
<li class="mui-table-view-cell"><a href="#">Item3</a></li>
<li class="mui-table-view-cell"><a href="#">Item4</a></li>
<li class="mui-table-view-cell"><a href="#">Item5</a></li>
</ul>
</div>
</div>
</div>
<a href="#popover" id="openPopover" class="mui-btn mui-btn-primary mui-btn-block">打开弹出菜单</a>
弹出菜单
可以使用 mui('.bottomPopover').popover(status[,anchor]); 控制菜单的显示、隐藏
| status值 | 作用 |
|---|---|
show |
显示弹出菜单 |
hide |
隐藏弹出菜单 |
toggle |
自动识别处理显示隐藏弹出菜单 |
可以通过指定锚点元素，来自动识别处理弹出菜单
//传入toggle参数，用户也无需关心当前是显示还是隐藏状态，mui会自动识别处理；
mui('.mui-popover').popover('toggle',document.getElementById("openPopover"));
dialog（对话框）
| 组件名 | 作用 |
|---|---|
alert |
警告框 |
confirm |
确认框 |
prompt |
输入对话框 |
toast |
消息提示框 |
注：MUI会根据 ua 判断弹出对话框是原生的还是H5绘制的，可以通过配置 type 属性，使弹出H5对话框。
//alert(message, title, btnValue, callback[, type])
//message：提示对话框上显示的内容
//title：提示对话框上显示的标题
//btnValue：提示对话框上按钮显示的内容
//callback：提示对话框上关闭后的回调函数
//type：是否使用H5绘制的对话框
mui.alert('我是警告框！','警告框','确定',function (e) {
console.log(e.index)
},'div')
警告框
//confirm(message, title, btnValue, callback[, type])
//message：提示对话框上显示的内容
//title：提示对话框上显示的标题
//btnValue：提示对话框上按钮显示的内容
//callback：提示对话框上关闭后的回调函数
//type：是否使用H5绘制的对话框
mui.confirm('我是确认框！','确认框',['取消','确认'],function (e) {
e.index
},'div')
确认框
//prompt(message, placeholder, title,btnValue, callback[,type])
//message：提示对话框上显示的内容
//placeholder：编辑框显示的提示文字
//title：提示对话框上显示的标题
//btnValue：提示对话框上按钮显示的内容
//callback：提示对话框上关闭后的回调函数
//type：是否使用H5绘制对话框
mui.prompt('请计算：10 + 5 = ？','请输入答案','算术题',['取消','答题'],function (e) {
e.index
},'div')
//修改弹出框默认input类型为password
mui.prompt('text','deftext','title',['true','false'],null,'div')
document.querySelector('.mui-popup-input input').type='password'
输入对话框
//toast(message[,option])
//message：消息框提示的文字内容
//options：提示消息的参数，JSON格式
// duration：持续显示时间，默认值 short。long（3500ms），short（2000ms）
// type：强制使用MUI消息框
消息提示框
-
closePopup()关闭最后一次弹出的对话框，只能关闭H5模式的对话框。 -
closePopups()关闭所有对话框，只能关闭H5模式的对话框。 - 案例：利用mui toast制作下拉刷新获取新内容的提示
mask（遮罩蒙版）
//遮罩蒙版的创建、显示、关闭
var mask = mui.createMask(callback);//callback为用户点击蒙版时自动执行的回调函数
mask.show();//显示遮罩
mask.close();//关闭遮罩
picker（选择器）
MUI框架扩展了picker组件，可用于弹出选择器。poppicker组件依赖mui.picker.js/cssmui.poppicker.js/css，因此在使用之前必须引入。
poppicker 适用于弹出单级或多级选择器
//初始化popPicker组件
//new PopPicker({PopPicker.options})
// layer：显示列数
//buttons：显示按钮
//new mui.PopPicker({buttons:['取消','确定']})
var picker = new mui.PopPicker();
//给picker对象添加数据
//setData([data])
//data：填充数据
picker.setData([{value:'name', text:'丶白小源'}]);
//显示picker
picker.show(function(selectItems) {
console.log(selectItems[0].text);//丶白小源
})
//可以通过 instance.pickers[index] 拿到指定层级的实例，然后通过 setSelectedIndex() 和 setSelectedValue()两个方法设定指定层级的选中项。
//setSelectedIndex(index[, duration, callback])
//index：指定列表选中项
//duration：过渡效果持续时间（ms）
//callback：设置成功回调函数
picker.pickers[0].setSelectedIndex(4, 2000);
//setSelectedValue(value[, duration, callback])
//value：指定列表选中项
//duration：过渡效果持续时间（ms）
//callback：设置成功回调函数
picker.pickers[0].setSelectedValue(4, 2000);
//getSelectedItems()
//返回值[data]，获取选中项（数组）
picker.getSelectedItems()
dtpicker 适用于弹出日期选择器
//初始化DtPicker 组件
//new DtPicker({options})
//type：设置日历初始视图模式
// datetime：完整日期视图（年月日时分）
// date：年视图（年月日）
// time：时间视图（时分）
// month：月视图（年月）
// hour：时视图（年月日时）
//customData：设置时间/日期别名
// customData:{h:[{value:"am", text:"上午"}, {value: "pm", text: "下午"}]}
// y：可设置 年 别名
// m：可设置 月 别名
// d：可设置 日 别名
// h：可设置 时 别名
// i：可设置 分 别名
//labels：设置默认标签区提示语
// 可设置 年 月 日 时 分 五个字段
//beginDate：设置可选择日期最小范围
// 可单独设置最小年范围：beginYear:2018，
// 其他日期支持Date格式，new Date(2018,5); 指定最小月份6月
//endDate：设置可选日期最大范围
// 可单独设置最大年范围：endYear:2019,
// 其他日期支持Date格式，new Date(2019,10); 指定最大月份11月
var dtPicker = new mui.DtPicker();
//显示picker
dtPicker.show(function(selectItem) {
console.log(selectItems.y);
})
//getSelectedItems()：获取选中的项
input（表单）
<form class="mui-input-group">
<div class="mui-input-row">
<label>用户名</label>
<input type="text" class="mui-input-clear" placeholder="请输入用户名">
</div>
<div class="mui-input-row">
<label>密码</label>
<input type="password" class="mui-input-password" placeholder="请输入密码">
</div>
<div class="mui-button-row">
<button type="button" class="mui-btn mui-btn-primary" >确认</button>
<button type="button" class="mui-btn mui-btn-danger" >取消</button>
</div>
</form>
表单
- 在
input控件上添加mui-input-clear样式，当控件内有内容时，右侧会出现一个删除图标，点击会清空当前控件内容。 - 在
mui-input-row同级添加mui-input-search属性，就可以使用search控件。 - 只需要在
input控件上添加mui-input-speech属性，就可以在H5+环境下使用语音输入。 - 给
input控件添加mui-input-password属性即可使用密码框。
numbox（数字输入框）
MUI提供了数字输入框控件，可以直接输入数字，也可以点击“+”、“-”按钮变换当前数值。
<div class="mui-numbox">
<!-- "-"按钮，点击可减小当前数值 -->
<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" />
<!-- "+"按钮，点击可增大当前数值 -->
<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div>
- 可通过
data-numbox-*自定义属性设置数字输入框的参数。
Data API
| 属性名 | 作用 |
|---|---|
| data-numbox-min | 输入框允许使用的最小值，默认无限制 |
| data-numbox-max | 输入框允许使用的最大值，默认无限制 |
| data-numbox-step | 每次点击“+”、“-”按钮变化的步长，默认步长为1 |
JS API
| 方法名 | 作用 |
|---|---|
getValue() |
获取当前值 |
setValue(value) |
动态设置新值 Int
|
setOption(options) |
更新选项，可取值min(Int)，step(Int)，max(Int)
|
//getValue()
mui("#plusDiv").numbox().getValue();
//setValue()
mui("#plusDiv").numbox().setValue(10);
//setOption()
mui("#plusDiv").numbox().setOption('step', 5);
注：MUI在mui.init() 中会自动初始化基本控件，但 动态添加的Numbox组件需要手动初始化。
pagination（分页）
<ul class="mui-pagination">
<li class="mui-disabled">
<span> « </span>
</li>
<li class="mui-active">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">»</a>
</li>
</ul>
分页
MUI组件告一段落，基础性的操作相对来说，还是官方较为详尽。官方提供的实例也是最好的参考资料。
参考文档
| 上一章 | 下一章 |
|---|
