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

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

mui 监听安卓手机物理返回按键及一些常见的配置:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/mui.css"/>
    <style type="text/css">
      .mui-card-content{
        padding-bottom: 20px;
      }
      button{
        margin-top: 20px;
        margin-left: 20px;
      }
    </style>
  </head>
  <body>
    <div class="mui-card">
      <!--页眉,放置标题-->
      <div class="mui-card-header">页眉</div>
      <!--内容区-->
      <div class="mui-card-content">
        <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" id="alertBtn">警告框</button>
        <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" id="confirmBtn">确认框</button>
        <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" id="promptBtn">输入对话框</button>
        <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined" id="toastBtn">自动消失提示框</button>
      </div>
    <!--页脚,放置补充信息或支持的操作-->
      <div class="mui-card-footer">页脚</div>
    </div>
    <!--<script src="../jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>-->
    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      mui.init({
        swipeBack: true, //启用右滑关闭功能
        beforeback: function(){//监听物理返回按键的方法
        //获得列表界面的webview
        var list = plus.webview.getWebviewById('list');
        //触发列表界面的自定义事件(refresh),从而进行数据刷新
        mui.fire(list,'refresh');
        //返回true,继续页面关闭逻辑
        return true;
        }
      });

      document.getElementById("alertBtn").addEventListener('tap', function() {
        mui.alert('欢迎使用Hello MUI', 'Hello MUI', function() {
          mui.toast('你刚关闭了警告框')
        });
      });

      document.getElementById("confirmBtn").addEventListener('tap', function() {
        var btnArray = ['否', '是'];
        mui.confirm('MUI是个好框架,确认?', 'Hello MUI', btnArray, function(e) {
          if (e.index == 1) {
            mui.toast('你刚确认MUI是个好框架')
          } else {
            mui.toast('MUI没有得到你的认可,继续加油')
            }
          })
        });

      document.getElementById("promptBtn").addEventListener('tap', function(e) {
        e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug,使用plus.nativeUI.prompt会造成输入法闪一下又没了
        var btnArray = ['取消', '确定'];
        mui.prompt('请输入你对MUI的评语:', '性能好', 'Hello MUI', btnArray, function(e) {
          if (e.index == 1) {
            mui.toast('谢谢你的评语:' + e.value)
          } else {
            mui.toast('你点了取消按钮')
          }
        })
      });

      document.getElementById("toastBtn").addEventListener('tap', function() {
        mui.toast('欢迎体验Hello MUI');
      });
    </script>
  </body>
</html>