zoukankan      html  css  js  c++  java
  • 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(备注博客园)

  • 相关阅读:
    LeetCode 109 Convert Sorted List to Binary Search Tree
    LeetCode 108 Convert Sorted Array to Binary Search Tree
    LeetCode 107. Binary Tree Level Order Traversal II
    LeetCode 106. Construct Binary Tree from Inorder and Postorder Traversal
    LeetCode 105. Construct Binary Tree from Preorder and Inorder Traversal
    LeetCode 103 Binary Tree Zigzag Level Order Traversal
    LeetCode 102. Binary Tree Level Order Traversal
    LeetCode 104. Maximum Depth of Binary Tree
    接口和多态性
    C# 编码规范
  • 原文地址:https://www.cnblogs.com/yzyh/p/7412440.html
Copyright © 2011-2022 走看看