对话框
创建并显示对话框，弹出的对话框为非阻塞模式，用户点击对话框上的按钮后关闭，并通过callback函数返回用户点击按钮的索引值或输入框中的值。
| 组件名 | 作用 |
|---|---|
| alert | 警告框 |
| confirm | 确认框 |
| prompt | 输入对话框 |
| toast | 消息提示框 |
| 参数 | 说明 | 说明 |
|---|---|---|
| duration | 持续显示时间,默认值 short(2000ms) | 支持 整数值 和 String , String可选: long(3500ms),short(2000ms) |
| type | 强制使用mui消息框(div模式) | 'div' |
1.警告消息框
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.css" rel="stylesheet" />
<style>
.mui-btn {
display: block;
width: 150px;
margin: 10px auto;
}
</style>
</head>
<body>
<div class="mui-content-padded" style="margin: 10px; text-align: center;">
<button id="alertBtn" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">警告消息框</button>
<div id="info">
</div>
</div>
</body>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init()
var info = document.getElementById("info");
document.getElementById("alertBtn").addEventListener("tap", function() {
mui.alert("你好，陌生人！", "Hello", "确定", function() {
info.innerText = "你刚关闭警告框!";
});
});
</script>
</html>代码效果：
2.确认消息框
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.css" rel="stylesheet" />
<style>
.mui-btn {
display: block;
width: 150px;
margin: 10px auto;
}
</style>
</head>
<body>
<div class="mui-content-padded" style="margin: 10px; text-align: center;">
<button id="confirmBtn" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">确认消息框</button>
<div id="info">
</div>
</div>
</body>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init()
var info = document.getElementById("info");
//确认消息框
document.getElementById("confirmBtn").addEventListener("tap", function() {
var btnArray = ["否", "是"]
mui.confirm("你是个大聪明", "Hello", btnArray, function(e) {
if (e.index == 1) {
info.innerText = "你刚确定自己是";
} else {
info.innerText = "不要否认";
}
});
});
</script>
</html>代码效果：
点击“否”效果： 点击“是”效果：
3.输入对话框
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.css" rel="stylesheet" />
<style>
.mui-btn {
display: block;
width: 150px;
margin: 10px auto;
}
</style>
</head>
<body>
<div class="mui-content-padded" style="margin: 10px; text-align: center;">
<button id="promptBtn" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">输入对话框</button>
<div id="info">
</div>
</div>
</body>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init()
var info = document.getElementById("info");
document.getElementById("promptBtn").addEventListener("tap", function() {
var btnArray = ["取消", "确定"]
mui.prompt("请输入大家的评语:", "呆呆的", "Hello", btnArray, function(e) {
if (e.index == 1) {
info.innerText = "评语:....." + e.value;
} else {
info.innerText = "没有写评语!";
}
});
});
</script>
</html>代码效果：
点击“取消”效果： 点击“确定”效果：
4.自动消失提示框
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.css" rel="stylesheet" />
<style>
.mui-btn {
display: block;
width: 150px;
margin: 10px auto;
}
</style>
</head>
<body>
<div class="mui-content-padded" style="margin: 10px; text-align: center;">
<button id="toastBtn" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">自动消失提示框</button>
<div id="info">
</div>
</div>
</body>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init()
var info = document.getElementById("info");
document.getElementById("toastBtn").addEventListener("tap", function() {
mui.toast("欢迎你的到来", {
duration: "long"//默认显示时长
});
});
</script>
</html>
代码效果：
2s后效果消失：
