<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/mui.css"/>
<style type="text/css">
.mui-card-content{
padding-bottom: 20px;
}
button{
margin-top: 20px;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="mui-card">
<!--页眉，放置标题-->
<div class="mui-card-header">页眉</div>
<!--内容区-->
<div class="mui-card-content">
<button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" id="alertBtn">警告框</button>
<button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" id="confirmBtn">确认框</button>
<button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" id="promptBtn">输入对话框</button>
<button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" id="toastBtn">自动消失提示框</button>
</div>
<!--页脚，放置补充信息或支持的操作-->
<div class="mui-card-footer">页脚</div>
</div>
<!--<script src="../jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>-->
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init({
swipeBack: true, //启用右滑关闭功能
beforeback: function(){//监听物理返回按键的方法
//获得列表界面的webview
var list = plus.webview.getWebviewById(‘list‘);
//触发列表界面的自定义事件（refresh）,从而进行数据刷新
mui.fire(list,‘refresh‘);
//返回true，继续页面关闭逻辑
return true;
}
});
document.getElementById("alertBtn").addEventListener(‘tap‘, function() {
mui.alert(‘欢迎使用Hello MUI‘, ‘Hello MUI‘, function() {
mui.toast(‘你刚关闭了警告框‘)
});
});
document.getElementById("confirmBtn").addEventListener(‘tap‘, function() {
var btnArray = [‘否‘, ‘是‘];
mui.confirm(‘MUI是个好框架，确认？‘, ‘Hello MUI‘, btnArray, function(e) {
if (e.index == 1) {
mui.toast(‘你刚确认MUI是个好框架‘)
} else {
mui.toast(‘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 == 1) {
mui.toast(‘谢谢你的评语：‘ + e.value)
} else {
mui.toast(‘你点了取消按钮‘)
}
})
});
document.getElementById("toastBtn").addEventListener(‘tap‘, function() {
mui.toast(‘欢迎体验Hello MUI‘);
});
</script>
</body>
</html>