mui 提示

迷南。 2022-01-14 13:47 374阅读 0赞

### 提示框 ###

##### alert(警告框) #####

*  用法：  
    .alert( message, title, btnValue, callback \[, type\] )
 *  message
    
    `Type: String`
    
    提示对话框上显示的内容
 *  title
    
    `Type: String`
    
    提示对话框上显示的标题
 *  btnValue
    
    `Type: String`
    
    提示对话框上按钮显示的内容
 *  callback
    
    `Type: String`
    
    提示对话框上关闭后的回调函数
 *  type
    
    `Value: 'div'`
    
    是否使用h5绘制的对话框

##### confirm(确认框) #####

*  用法：  
    `.confirm( message, title, btnValue, callback [, type] )`
 *  message
    
    `Type: String`
    
    提示对话框上显示的内容
 *  title
    
    `Type: String`
    
    提示对话框上显示的标题
 *  btnValue
    
    `Type: String`
    
    提示对话框上按钮显示的内容
 *  callback
    
    `Type: String`
    
    提示对话框上关闭后的回调函数
 *  type
    
    `Value: 'div'`
    
    是否使用h5绘制的对话框

##### prompt(对话框) #####

*  用法：  
    `.prompt( message, placeholder, title, btnValue, callback[, type] )`
 *  message
    
    `Type: String`
    
    提示对话框上显示的内容
 *  placeholder
    
    `Type: String`
    
    编辑框显示的提示文字
 *  title
    
    `Type: String`
    
    提示对话框上显示的标题
 *  btnValue
    
    `Type: String`
    
    提示对话框上按钮显示的内容
 *  callback
    
    `Type: String`
    
    提示对话框上关闭后的回调函数
 *  type
    
    `Value: 'div'`
    
    是否使用h5绘制的对话框

##### toast(消息提示框) #####

*  用法：  
    `.toast( message [,options])`
 *  message
    
    `Type: String`
    
    提示对话框上显示的内容
    
     *  options
    
    `Type: JSON`
    
    提示消息的参数
    
        <button id='alertBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">警告消息框</button>
        
          <button id='confirmBtn1' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">h5绘制的对话框</button>
          <button id='confirmBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">确认消息框</button>
          <button id='promptBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">输入对话框</button>
        
          <div id="info"></div>
        
          
          <script type="text/javascript">
          	
          	
          	mui(document.body).on('tap', '#alertBtn', function(e) {  
          		mui.alert('欢迎使用Hello MUI', 'Hello MUI', function() {        
          			info.innerText = '你刚关闭了警告框';    
          		});
          	});
        
          	mui(document.body).on('tap', '#confirmBtn1', function() { 
          			mui.confirm("confirm", "ooo", ['否', '是'], function(e) { 
          				if(e.index == 1) {            
          					info.innerText = '你刚确认MUI是个好框架';        
          				} else {            
          						info.innerText = 'MUI没有得到你的认可，继续加油'        
          				}
          			})
          		});
          	
          	//是否使用h5绘制的对话框，其他同样的写法
          	document.getElementById("confirmBtn").addEventListener('tap', function() {
          		var btnArray = ['否', '是'];
          		var message = '<h6>5353545</h6>';
          		mui.confirm(message, 'Hello MUI', btnArray, function(e) {
          			if(e.index == 1) {
          				info.innerText = '你刚确认MUI是个好框架';
          			} else {
          				info.innerText = 'MUI没有得到你的认可，继续加油'
          			}
          		}, 'div');
          	});
        
          	document.getElementById("promptBtn").addEventListener('tap', function(e) {    
          		e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
          		    
          		//var btnArray = ;    
          		mui.prompt('请输入你对MUI的评语：', '性能好', 'Hello MUI', ['取消', '确定'], function(e) {        
          			if(e.index == 1) {            
          				info.innerText = '谢谢你的评语：' + e.value;        
          			} else {            
          				info.innerText = '你点了取消按钮';        
          			}    
          		})
          	});
          </script>