mui dtpicker 时间的设置 以及MUI的弹窗

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":2016}'></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版本以上才支持

 

转载于:https://www.cnblogs.com/zjjDaily/p/6070414.html