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