版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/LzzMandy/article/details/85002507
本文主要讲述dialog（对话框），包括：警告框、确认框、输入对话框、消息提示框四类。
| 组件名 | 作用 |
|---|---|
| alert | 警告框 |
| confirm | 确认框 |
| prompt | 输入对话框 |
| toast | 消息提示框 |
1、 警告框完整实例：
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">dialog（消息框）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded" style="margin: 5px;text-align: center;">
<button id='alertBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">警告消息框</button>
<div id="info"></div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
//mui初始化
mui.init({
swipeBack: true //启用右滑关闭功能
});
var info = document.getElementById("info");
document.getElementById("alertBtn").addEventListener('tap', function() {
mui.alert('显示的内容', '显示的标题','按钮显示的内容', function() {
info.innerText = '你刚关闭了警告框';
});
});
</script>
</body>
2、 确认框完整实例：
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">dialog（消息框）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded" style="margin: 5px;text-align: center;">
<button id='confirmBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">确认消息框</button>
<div id="info"></div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
//mui初始化
mui.init({
swipeBack: true //启用右滑关闭功能
});
var info = document.getElementById("info");
document.getElementById("confirmBtn").addEventListener('tap', function() {
var btnArray = ['否', '是'];
mui.confirm('显示的内容', '显示的标题', btnArray, function(e) {
// 否：e.index=0;是：e.index=1;
if (e.index == 1) {
info.innerText = '你刚确认MUI是个好框架';
} else {
info.innerText = 'MUI没有得到你的认可，继续加油'
}
})
});
</script>
</body>
3、输入对话框完整实例：
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">dialog（消息框）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded" style="margin: 5px;text-align: center;">
<button id='promptBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">输入对话框</button>
<div id="info"></div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
//mui初始化
mui.init({
swipeBack: true //启用右滑关闭功能
});
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('显示的内容：', '显示的提示文字', '显示的标题', btnArray, function(e) {
if (e.index == 1) {
info.innerText = '谢谢你的评语：' + e.value;
} else {
info.innerText = '你点了取消按钮';
}
})
});
</script>
</body>
4、自动消失提示框完整实例：
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">dialog（消息框）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded" style="margin: 5px;text-align: center;">
<button id='toastBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">自动消失提示框</button>
<div id="info"></div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
//mui初始化
mui.init({
swipeBack: true //启用右滑关闭功能
});
var info = document.getElementById("info");
document.getElementById("toastBtn").addEventListener('tap', function() {
mui.toast('消息框显示的文字内容',{ duration:'long', type:'div' });
});
</script>
</body>