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');
 });