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(备注博客园)
posted on 2017-08-22 16:54 佑之以航阅读(7682) 评论(0) 编辑收藏举报