mui 監聽安卓手機物理返回按鍵及一些常見的配置

本文轉載自查看原文 2017-08-22 16:54 6752 mui/ 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(備注博客園)

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 mui 監聽手機物理返回鍵使用cordova，監聽安卓機物理返回按鍵，實現退出程序的功能 MUI控制安卓手機自帶的返回鍵禁止返回 fiddler抓包+安卓機完成手機app抓包的配置遇到的一些問題 vue 對手機物理鍵的監聽（使用mui） React Native組件之BackAndroid ！安卓手機的物理返回鍵的使用 VueApp監聽手機物理返回鍵的事件安卓手機測試常見BUG Fiddler Everywhere 安卓手機抓包配置安卓奇葩問題之：返回按鍵監聽，使Dialog不消失