<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<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">hello</h1>
</header>
<div class="mui-content">
<div style="padding: 20px;">
<button type="button" onClick="showTest()">点击测试信息框</button>
<button type="button" class="mui-btn mui-btn-primary" onClick="showFirm()">点击测试询问框</button>
<button type="button" class="mui-btn mui-btn-success" onClick="showDuihua()">点击测试对话框</button>
</div>
<form class="mui-input-group">
<!--加上class="mui-input-clear" 可快速删除-->
<div class="mui-input-row">
<label>用户名</label>
<input type="text" class="mui-input-clear" placeholder="请输入用户名">
</div>
<!--加上class="mui-input-password" 可查看密码的明文信息-->
<div class="mui-input-row">
<label>密码</label>
<input type="password" class="mui-input-password" placeholder="请输入密码">
</div>
<div class="mui-button-row">
<button type="button" class="mui-btn-primary">确定</button>
<button type="button" class="mui-btn-danger">取消</button>
</div>
</form>
<h4 class="">mui在mui.init()中会自动初始化基本控件，但是 动态添加的元素需要重新进行初始化，（也就是你需要ajax请求数据时返回的值需要给哪个class 就给哪个class在重新初始化一下）----(mui('.mui-input-row input').input();)</h4>
</div>
</body>
<script type="text/javascript">
//信息框
//alert('需要提醒的话','提醒标题','只有一个确认按钮',function(){mui.toast('点击确定后执行什么，或不加function() 自动会关闭窗口');})
function showTest(){
mui.alert('信号','小提醒','ok',callBack1('您说的是对的'));
}
function callBack1(title){
mui.toast(title);
}
//询问框
function showFirm(){
mui.confirm(
'您真的要这样做吗？',
'小提醒',
new Array('不行','好的'),
function(e){
if(e.index == 1){
console.log(e);
mui.toast('我点击了好的');
}else{
mui.toast('我点击了不行');
}
}
)
}
//输入框
function showDuihua(){
mui.prompt(
'请您输入姓名',
'战三',
'hi..',
new Array('取消','确定'),
function(e){
if(e.index == 1){
if(e.value == ''){
mui.toast('您没有输入');
}else{
mui.toast(e.value);
}
}else{
mui.toast('您点击了取消');
}
}
)
}
</script>
</html>
