首页 > 建站教程 > APP开发,混合APP >  mui 监听安卓手机物理返回按键及一些常见的配置正文

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

mui 监听安卓手机物理返回按键及一些常见的配置:
01<!DOCTYPE html>
02<html>
03  <head>
04    <meta charset="UTF-8">
05    <title></title>
06    <link rel="stylesheet" type="text/css" href="css/mui.css"/>
07    <style type="text/css">
08      .mui-card-content{
09        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>