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