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:

<script>

　　(function($) {

　　　　$.init();

　　　　var result=$(觸發修改時間的對象)[0];

　　　　result.addEventListener('tap', function() {

　　　　　　var optionsJson = this.getAttribute('data-options') || '{}';

　　　　　　var options = JSON.parse(optionsJson);

　　　　　　var picker = new $.DtPicker(options);

　　　　　　picker.show(function(rs) {

　　　　　　　　result.innerText =rs.text;

　　　　　　　　picker.dispose();

　　　　　　});

　　　　}, false);

　　})(mui);

</script> 

也可以在其中穿插彈窗：

(function($) {
　　$.init();

　　var result=$(觸發修改時間的對象)[0];
　　result.addEventListener('tap', function() {
　　　　var btnArray = ['是', '否'];
　　　　mui.confirm('是否要修改生日', '警告', btnArray, function(e) {
　　　　　　if (e.index == 1) {
　　　　　　　　mui.toast('已取消修改');
　　　　　　} else {
　　　　　　　　var optionsJson = $('.mycenter_birthday')[0].getAttribute('data-options') || '{}';
　　　　　　　　var options = JSON.parse(optionsJson);
　　　　　　　　var picker = new $.DtPicker(options);
　　　　　　　　picker.show(function(rs) {
　　　　　　　　　　result.innerText =rs.text;
　　　　　　　　　　picker.dispose();
　　　　　　　　　　mui.alert('已成功修改');
　　　　　　　　});
　　　　　　}
　　　　})
　　}, false);
})(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版本以上才支持