dialog(消息框)
//自定義css
<style>
.mui-plus.mui-android header.mui-bar{
display: none;
}
.mui-plus.mui-android .mui-bar-nav~.mui-content{
padding: 0;
}
.mui-btn {
display: block;
width: 120px;
margin: 10px auto;
}
#info {
padding: 20px 10px;
}
</style>
//以下是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>
<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>
<button id='toastBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">自動消失提示框</button>
<div id="info">
</div>
</div>
</div>
//使用方法
<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('歡迎使用Hello MUI', 'Hello MUI', function() {
info.innerText = '你剛關閉了警告框';
});
});
document.getElementById("confirmBtn").addEventListener('tap', function() {
var btnArray = ['是', '否'];
mui.confirm('MUI是個好框架,確認?', 'Hello MUI', btnArray, function(e) {
if (e.index == 0) {
info.innerText = '你剛確認MUI是個好框架';
} else {
info.innerText = 'MUI沒有得到你的認可,繼續加油'
}
})
});
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 == 0) {
info.innerText = '謝謝你的評語:' + e.value;
} else {
info.innerText = '你點了取消按鈕';
}
})
});
document.getElementById("toastBtn").addEventListener('tap', function() {
mui.toast('歡迎體驗Hello MUI');
});
</script>