分享程序员开发的那些事...
更新时间：2022-09-13 18:04:44
PhoneGap事件包含另个部分，一个是传统网页触发的事件，比如DOM加载，超链接，form表单提交事件等。
另一个是PhoneGap独有的事件。如
deviceready：只在设备在本地环境和页面完全加载后触发。
backbutton： 重载系统的Back按纽
pasue： pasue事件
resume ： resume事件
searchbutton： 当用户在Android系统上点击"搜索”时触发。
online：连接的网络时触发
offline： 没有网络时触发
menubutton ：重新定义菜单行为
batterycritical ： 电量达到临界值时触发
batterlow： 电量非常低时触发
Demo如下
1.首先创建PhoneGap Project
2.引入JQuery Mobile
3. 编辑HTML和JS代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
<title>Hello World</title>
<script type="text/javascript" charset="utf-8">
var count = 0;
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady(){
document.addEventListener("backbutton", onBackButton, false);
document.addEventListener("pause", onPause, false);
document.addEventListener("resume", onResume, false);
document.addEventListener("online", isOnline, false);
document.addEventListener("offline", isOffline, false);
document.addEventListener("menubutton", onMenuButton, false);
console.log("console device ready");
alert("device Ready");
}
function onBackButton(){
count++;
console.log("Trigger back button event " + count + " time");
$.mobile.changePage("#page3",'pop',false,true);
}
function onPause(){
console.log("myphonegap onPause function");
}
function onResume(){
console.log("myphonegap onResume function");
}
function isOnline(){
console.log("myphonegap isOnline function");
}
function isOffline(){
console.log("myphonegap isOffline function");
}
function onMenuButton(){
console.log("myphonegap onMenuButton function");
$.mobile.changePage("#page3",'pop',false,true);
}
</script>
</head>
<body>
<div id="page1" data-role="page" data-add-back-btn="true">
<header data-role="header"><h1>Hello world</h1></header>
<div data-role="content" class="content">
<p>第一页</p>
<p><a href="#page2">跳转到第二页</a> </p>
</div>
<footer data-role="footer"><h1>Footer</h1></footer>
</div>
<div id="page2" data-role="page" data-add-back-btn="true">
<header data-role="header"><h1>Hello world</h1></header>
<div data-role="content" class="content">
<p>第二页</p>
<p><a href="#page3">跳转到第三页</a> </p>
</div>
<footer data-role="footer"><h1>Footer</h1></footer>
</div>
<div id="page3" data-role="page" data-add-back-btn="true">
<header data-role="header"><h1>Hello world</h1></header>
<div data-role="content" class="content">
<p>第三页</p>
<p><a href="#page1">返回第一页</a> </p>
</div>
<footer data-role="footer"><h1>Footer</h1></footer>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
|
以下Code为注册事件监听
document.addEventListener('deviceready', onDeviceReady, false); function onDeviceReady(){
document.addEventListener("backbutton", onBackButton, false);
document.addEventListener("pause", onPause, false);
document.addEventListener("resume", onResume, false);
document.addEventListener("online", isOnline, false);
document.addEventListener("offline", isOffline, false);
document.addEventListener("menubutton", onMenuButton, false);
console.log("console device ready");
alert("device Ready");
}
|
之后在Android Studio生成apk安装的Androd设备上。将会显示对应的Log。
本文转自Work Hard Work Smart博客园博客，原文链接：http://www.cnblogs.com/linlf03/p/6636569.html，如需转载请自行联系原作者