安然不哭-西坝阿超个人博客

做技术一定要一颗恒心,这样才不会半途而废。

MUI对话框

2018-4-4 钟建超

一、alert告警框

用法 

.alert(message,title,btnvalue,callback[,type]);
document.getElementById("noclick").addEventListener('tap', function() {  
           mui.alert("欢迎使用Hello MUI", "Hello MUI","确定关闭", function() {  
               mui.alert("你刚关闭了警告框","操作提示","确定");  
           });  
       });  


二、comfirm对话框

用法.
confirm(message,title,btnvalue,callback[,type]);

document.getElementById("noclick").addEventListener("tap",function(){  
      var btnarr=["确定","取消"];  
      mui.confirm("你确定关闭对话框吗?","操作提示",btnarr,function(e){  
         if(e.index == 0){  
            mui.alert("你已关闭对话框!","操作提示","确定");  
         }else{  
           mui.alert("你取消关闭对话框!","操作提示","确定");  
         }  
      });  
   });  



三、提示框
用法
.toast(message[,options]);

message:"string"消息框显示的文字内容;options:{JSON}提示消息的参数

duration:持续显示时间,默认值short(2000ms),支持整数值和string,string可选:long(3500ms),short(2000ms)


document.getElementById("noclick").addEventListener("tap",function(){  
      mui.toast("欢迎体验MUI",{duration:3500,type:"div"});  
   });  



四、prompt对话提示框
用法:
.prompt(message,placeholder,title,btnvalue,callback[,type]);

document.getElementById("noclick").addEventListener("tap",function(){  
      mui.prompt("你确定要关闭本窗口吗?","确定","操作提示",["确定","取消"],function(e){  
          if(e.index == 0){  
              mui.toast("你已关闭窗口");  
          }else{  
              mui.toast("你取消关闭窗口");  
          }  
      })  
    });  


如果有定制对话框样式的需求(只能修改h5模式的对话框)可以再mui.css中修改.mui-popup类下的样式



<span style="white-space:pre;"> //修改弹出框默认input类型为password   
    mui.prompt('text','deftext','title',['true','false'],null,'div')   
    document.querySelector('.mui-popup-input input').type='password'</span>  


标签: html