mui消息框(alert,confirm,prompt,toast)的使用

mui消息框(alert,confirm,prompt,toast)的使用
　　在开发mui的过程当中，咱们最常常用到的就是消息框，例如警告框、确认框、对话框、消息提示框等等一系列的弹出消息框。mui没有让咱们失望，这些都作好了封装

alert(警告框)
　　用法：
　　　　.alert( message, title, btnValue, callback [, type] )

　　message

　　　　Type: String

　　　　提示对话框上显示的内容

　　title

　　　　Type: String

　　　　提示对话框上显示的标题

　　btnValue

　　　　Type: String

　　　　提示对话框上按钮显示的内容

　　callback

　　　　Type: String

　　　　提示对话框上关闭后的回调函数

　　type

　　　　Value: ‘div’

　　　　是否使用h5绘制的对话框

　　示例代码：
　　　　html:

　　　　　　<button id='alertBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">警告消息框</button>
　　　　　　<div id="info"></div>
　　　　js:

　　　　　　var info = document.getElementById("info");
　　　　　　document.getElementById("alertBtn").addEventListener('tap', function() {
　　　　　　mui.alert('欢迎使用Hello MUI', 'Hello MUI', function() {
　　　　　　info.innerText = '你刚关闭了警告框';
　　　　　　　　});
　　　　　　});　　
confirm(确认框)
　　用法：
　　　　.confirm( message, title, btnValue, callback [, type] )

　　message

　　　　Type: String

　　　　提示对话框上显示的内容

　　title

　　　　Type: String

　　　　提示对话框上显示的标题

　　btnValue

　　　　Type: String

　　　　提示对话框上按钮显示的内容

　　callback

　　　　Type: String

　　　　提示对话框上关闭后的回调函数

　　type

　　　　Value: ‘div’

　　　　是否使用h5绘制的对话框

　　示例代码：
　　　　html:

　　　　　　<button id='confirmBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">确认消息框</button>
　　　　　　<div id="info"></div>
　　　　js:

　　　　　　var info = document.getElementById("info");
　　　　　　document.getElementById("confirmBtn").addEventListener('tap', function() {
　　　　　　var btnArray = ['否', '是'];
　　　　　　mui.confirm('MUI是个好框架，确认？', 'Hello MUI', btnArray, function(e) {
　　　　　　if (e.index == 1) {
　　　　　　info.innerText = '你刚确认MUI是个好框架';
　　　　　　} else {
　　　　　　info.innerText = 'MUI没有获得你的承认，继续加油'
　　　　　　}
　　　　　　})
　　　　　　});
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绘制的对话框

　　示例代码：
　　　　html:

　　　　　　<button id='promptBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">输入对话框</button>
　　　　　　<div id="info"></div>
　　　　js:

　　　　　　var info = document.getElementById("info");
　　　　　　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', btnArray, function(e) {
　　　　　　if (e.index == 1) {
　　　　　　info.innerText = '谢谢你的评语：' + e.value;
　　　　　　} else {
　　　　　　info.innerText = '你点了取消按钮';
　　　　　　}
　　　　　　})
　　　　　　});
　　
toast(消息提示框)
　　用法：
　　　　.toast( message [,options])

　　message

　　　　Type: String

　　　　提示对话框上显示的内容

　　options

　　　　Type: JSON

　　　　提示消息的参数

　　示例代码：
　　　　html:

　　　　　　<button id='toastBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">自动消失提示框</button>
　　　　　　<div id="info"></div>
　　　　js:

　　　　　　var info = document.getElementById("info");
　　　　　　document.getElementById("toastBtn").addEventListener('tap', function() {
　　　　　　mui.toast('欢迎体验Hello MUI');
　　　　　　});

　　这些提示框的内容你能够本身使用标签代码来布局你想要提示的展示样子，能够自定义样式，具体代码以下：

　　咱们拿confirm这个方法来举例说明下（其他方法都和这个同样）：

　　html代码仍是以前那个同样。

　　js：

　　　　var info = document.getElementById("info");　　　　document.getElementById("confirmBtn").addEventListener('tap', function() { 　　　　var btnArray = ['否', '是']; 　　　　var message = '<h6>MUI是个好框架，确认？</h6>'; 　　　　mui.confirm(message, 'Hello MUI', btnArray, function(e) { 　　　　if (e.index == 1) { 　　　　info.innerText = '你刚确认MUI是个好框架'; 　　　　} else { 　　　　info.innerText = 'MUI没有获得你的承认，继续加油' 　　　　} 　　　　},'div');　　　　});