MUI组件（5）

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/css mui.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组件需要手动初始化。

• 扩展：可接收小数点的数字输入框 NumberBox

pagination（分页）

<ul class="mui-pagination">
    <li class="mui-disabled">
        <span> &laquo; </span>
    </li>
    <li class="mui-active">
        <a href="#">1</a>
    </li>
    <li>
        <a href="#">2</a>
    </li>
    <li>
        <a href="#">&raquo;</a>
    </li>
</ul>

分页

MUI组件告一段落，基础性的操作相对来说，还是官方较为详尽。官方提供的实例也是最好的参考资料。

参考文档

• MUI官方文档

上一章	下一章