1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="css/mui.css"/> 7 <style type="text/css"> 8 .mui-card-content{ 9 padding-bottom: 20px; 10 } 11 button{ 12 margin-top: 20px; 13 margin-left: 20px; 14 } 15 </style> 16 </head> 17 <body> 18 <div class="mui-card"> 19 <!--页眉，放置标题--> 20 <div class="mui-card-header">页眉</div> 21 <!--内容区--> 22 <div class="mui-card-content"> 23 <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" id="alertBtn">警告框</button> 24 <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" id="confirmBtn">确认框</button> 25 <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" id="promptBtn">输入对话框</button> 26 <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" id="toastBtn">自动消失提示框</button> 27 </div> 28 <!--页脚，放置补充信息或支持的操作--> 29 <div class="mui-card-footer">页脚</div> 30 </div> 31 <!--<script src="../jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>--> 32 <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> 33 <script type="text/javascript"> 34 mui.init({ 35 swipeBack: true, //启用右滑关闭功能 36 beforeback: function(){//监听物理返回按键的方法 37 //获得列表界面的webview 38 var list = plus.webview.getWebviewById('list'); 39 //触发列表界面的自定义事件（refresh）,从而进行数据刷新 40 mui.fire(list,'refresh'); 41 //返回true，继续页面关闭逻辑 42 return true; 43 } 44 }); 45 46 document.getElementById("alertBtn").addEventListener('tap', function() { 47 mui.alert('欢迎使用Hello MUI', 'Hello MUI', function() { 48 mui.toast('你刚关闭了警告框') 49 }); 50 }); 51 52 document.getElementById("confirmBtn").addEventListener('tap', function() { 53 var btnArray = ['否', '是']; 54 mui.confirm('MUI是个好框架，确认？', 'Hello MUI', btnArray, function(e) { 55 if (e.index == 1) { 56 mui.toast('你刚确认MUI是个好框架') 57 } else { 58 mui.toast('MUI没有得到你的认可，继续加油') 59 } 60 }) 61 }); 62 63 document.getElementById("promptBtn").addEventListener('tap', function(e) { 64 e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了 65 var btnArray = ['取消', '确定']; 66 mui.prompt('请输入你对MUI的评语：', '性能好', 'Hello MUI', btnArray, function(e) { 67 if (e.index == 1) { 68 mui.toast('谢谢你的评语：' + e.value) 69 } else { 70 mui.toast('你点了取消按钮') 71 } 72 }) 73 }); 74 75 document.getElementById("toastBtn").addEventListener('tap', function() { 76 mui.toast('欢迎体验Hello MUI'); 77 }); 78 </script> 79 </body> 80 </html>
如需交流可加博主QQ:602697966(备注博客园)