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:
<div id="触发修改时间的对象的类" class="自定义class" data-options='{"type":"date","beginYear":1949,"endYear":}'></div>//可以自定义按钮样式
JQ:
1 <script> 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 </script>
也可以在其中穿插弹窗：
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版本以上才支持
