<!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>