mui 监听安卓手机物理返回按键及一些常见的配置

 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(备注博客园)