• MUI对话框使用


    一、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类下的样式

    	//修改弹出框默认input类型为password 
    	mui.prompt('text','deftext','title',['true','false'],null,'div') 
    	document.querySelector('.mui-popup-input input').type='password'
    

    原文地址:https://blog.csdn.net/Ag_wenbi/article/details/73497639

  • 相关阅读:
    AngularJS:实现动态添加输入控件功能
    Openfire:XMPP的几种消息类型
    Openfire:重新配置openfire
    Clojure:日期操作方法
    Openfire:通过Servlet群发消息
    Openfire:访问Servlet时绕开Openfire的身份验证
    Clojure:解决selmer模板不刷新的问题
    Intellij Idea 13:运行Clojure的repl环境
    MVC.Net 5:允许保存和输出Html内容
    BAE Flask UEditor 使用七牛云
  • 原文地址:https://www.cnblogs.com/liyouwu/p/9717212.html
Copyright © 2020-2023  润新知