捅侠敬疙掣殴伦侠悄钝凹稠懈
参考文档
实际操作
1.对话框
对话框样式1
<!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">选择日期</h1>
</header>
<!--头部结束-->
<!--主体-->
<div class="mui-content">
<div style="padding: 20px;">
<button type="button" onclick="showTest()">点击测试</button>
</div>
</div>
<script type="text/javascript">
function showTest()
{
mui.alert('hi');
}
</script>
</body>
</html>
执行：
对话框样式2（只改变js代码即可）
<script type="text/javascript">
function showTest()
{
mui.alert('hi','小提醒');
}
</script>
执行：
对话框3
function showTest()
{
mui.alert('hi','小提醒','ok');
}
执行：
对话框4
<script type="text/javascript">
function showTest()
{
mui.alert('hi','小提醒','ok',function(){
mui.toast('您点击了OK')
});
}
</script>
执行：
回调函数的第二种写法
<script type="text/javascript">
function showTest()
{
mui.alert('hi','小提醒','ok',callBack1);
}
function callBack1()
{
mui.toast('您点击了OK')
}
</script>
执行
2.确定消息框
样式1
<!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">选择日期</h1>
</header>
<!--头部结束-->
<!--主体-->
<div class="mui-content">
<div style="padding: 20px;">
<button type="button" onclick="showTest()">点击测试</button>
</div>
</div>
<script type="text/javascript">
function showTest()
{
mui.confirm('您确定要这样做吗？');
}
</script>
</body>
</html>
执行：
样式2
<script type="text/javascript">
function showTest()
{
mui.confirm('您确定要这样做吗？','小提醒',new Array('YES','NO'));
}
</script>
执行：
样式3
<script type="text/javascript">
function showTest()
{
mui.confirm('您确定要这样做吗？','小提醒',new Array('YES','NO'),callBack1);
}
function callBack1()//点击确定或者取消都会触发这个函数
{
mui.toast('祝您生活愉快！');
}
</script>
执行：
判断用户点击的是ok还是no
<script type="text/javascript">
function showTest()
{
mui.confirm('您确定要这样做吗？','小提醒',new Array('NO','YES'),function(e){
if(e.index==1)
{
mui.toast('您点击了YES');
}
else
{
mui.toast('您点击了NO');
}
});
}
</script>
执行：
3.输入框
样式1
<!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">选择日期</h1>
</header>
<!--头部结束-->
<!--主体-->
<div class="mui-content">
<div style="padding: 20px;">
<button type="button" onclick="showTest()">点击测试</button>
</div>
</div>
<script type="text/javascript">
function showTest()
{
mui.prompt('请输入您的姓名');
}
</script>
</body>
</html>
执行：
样式2
<script type="text/javascript">
function showTest()
{
mui.prompt('请输入您的姓名','姓名长度小于10');
}
</script>
执行：
样式2：
function showTest()
{
mui.prompt('请输入您的姓名','姓名长度小于10','小提醒',new Array('NO',"YES"),function(e){
if(e.index==1)
{
mui.toast(e.value);
}
else
{
mui.toast('您点击了NO');
}
});
}
</script>
执行：
4.mui自动消失的对话框
5.表单元素
<!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">选择日期</h1>
</header>
<!--头部结束-->
<!--主体-->
<div class="mui-content">
<form class="mui-input-group">
<div class="mui-input-row">
<label>用户名</label>
<input type="text" class="mui-input-clear" placeholder="请输入用户名">
</div>
<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 mui-btn-primary" >确认</button>
<button type="button" class="mui-btn mui-btn-danger" >取消</button>
</div>
</form>
</div>
</body>
</html>
执行：
输入增强
mui目前提供的输入增强包括：快速删除、语音输入*5+ only和密码框显示隐藏密码。
1、快速删除：只需要在input控件上添加.mui-input-clear类，当input 控件中有内容时，右侧会有一个删除图标，点击会清空当前input的内容；
如上面的用户名就添加了这个类样式
输入内容很多时点击右边的图标即可全部删除
密码输入的是密文，加了mui-input-password类样式，用户点击眼镜图标就能切换为明文，方便用户输入
初始化
mui在mui.init()中会自动初始化基本控件,但是 动态添加的元素需要重新进行初始化
意思：如进行省市县三级联动，选择了省才会出现市，初始的dom结构里面只有省，市是后面出现的，这个时候就可以使用mui初始化
代码：mui(‘选中你设置的元素或者动态添加的元素’).input();
擦扰猾娠台苦蝗迟垫竣诡镰纠