1)引入mui.min.css,然后引入mui.picker.min.css 注意这个mui.picker.min.css 与 mui.picker.css 不一样
2)引入mui.min.js,然后引入mui.picker.min.js 注意这个mui.picker.min.js 与 mui.picker.js 不一样
3)加入以下代码:
HTML:
//可以自定义按钮样式JQ:
1
2
3 (function($) {
4
5 $.init();
6
7 var result=$(触发修改时间的对象)[0];
8
9 result.addEventListener('tap', function() {
10
11 var optionsJson = this.getAttribute('data-options') || '{}';
12
13 var options = JSON.parse(optionsJson);
14
15 var picker = new $.DtPicker(options);
16
17 picker.show(function(rs) {
18
19 result.innerText =rs.text;
20
21 picker.dispose();
22
23 });
24
25 }, false);
26
27 })(mui);
28
29
也可以在其中穿插弹窗:
1 (function($) {
2 $.init();
3
4 var result=$(触发修改时间的对象)[0];
5 result.addEventListener('tap', function() {
6 var btnArray = ['是', '否'];
7 mui.confirm('是否要修改生日', '警告', btnArray, function(e) {
8 if (e.index == 1) {
9 mui.toast('已取消修改');
10 } else {
11 var optionsJson = $('.mycenter_birthday')[0].getAttribute('data-options') || '{}';
12 var options = JSON.parse(optionsJson);
13 var picker = new $.DtPicker(options);
14 picker.show(function(rs) {
15 result.innerText =rs.text;
16 picker.dispose();
17 mui.alert('已成功修改');
18 });
19 }
20 })
21 }, false);
22 })(mui);
MUI弹窗:
1.alert弹窗:
1)不带回调函数:mui.alert("内容")
2)带回调函数:
mui.alert("标题","主题内容",function(){
//回调函数
})
2.confirm确认框(也带回调函数)
var arr=['否','是']; //这里定义“是否”按钮,也可定义为确认取消
mui.confirm("主题内容", '标题',arr, function(e) {
if(e.index == 1) { //根据上面arr的索引,1就是选择的“是”按钮
...
}else {
... }
})
3.promot
var arr=['取消','确定']; //定义按钮文字
mui.prompt("主题内容",“输入框placeholder”,'标题' ,arr,function(e){
if (e.index == 1) { //根据上面arr的索引,1就是选择的“确定”按钮
...
} else {
...
} //输入的内容是e.value
})
如果需要修改DOM结构可以按照以下方式处理.
//修改弹出框默认input类型为password
mui.prompt("主题内容",“输入框placeholder”,'标题' ,arr,null,'div')
document.querySelector('.mui-popup-input input').type='password'
如果有定制对话框样式的需求( 只能修改h5模式对话框)可以在mui.css中修改.mui-popup类下的样式
4.toast
mui.toast(“内容”)。弹出自后会自动消失
如果要修改toast的样式:
.mui-toast-container {
bottom: 30px!important;/*离布局底部的距离*/
}
.mui-toast-message {
background: url(..) no-repeat; //toast的背景图片
opacity: 0.5; //toast中背景色的透明度
color: #FFFFFF; //toast中字体颜色
width: 150px; //toast宽度
padding:10px; //toast中文字的位置
}
注:这样改只在浏览器中有效,在app中是没效果的。
如果想在app中有效果,可考虑使用:
plus.nativeUI.toast(message,{ duration:'long', type:'div' });
message:提示信息
options:即第二个参数有可选属性:可设置提示消息显示的图标、持续时间、位置等type:“div”是强制使用mui消息框(div模式)。
options:参数需要mui 3.5版本以上才支持