<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="../jquery.js" type="text/javascript"></script> <script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script src="../cordova.js" type="text/javascript"></script>
<script type="text/javascript"> //使用jQuery mobile设置提示框的信息
function showMyAlert(text) {
$.mobile.loadingMessageTextVisible = true;
$.mobile.showPageLoadingMsg("a", text, true);
} //弹出提示框信息的方法，两秒后隐藏
function myAlert(text) {
showMyAlert(text);
setTimeout(hideLoading, 2000);
} //隐藏提示框的方法
function hideLoading() {
$.mobile.hidePageLoadingMsg();
}
//退出app
function exitApp() {
navigator.app.exitApp();
}
</script>
<script type="text/javascript">
$(function(){
document.addEventListener('deviceready',myDeviceready,false);
}) function myDeviceready(){
console.log('设备加载完成'); document.addEventListener('backbutton',myBackbutton,false);
} //点击返回按钮的事件
function myBackbutton(){
//下面的if判断页面是否是id为indexPage的页面如果是才执行，否则执行else的返回上一页
if ($.mobile.activePage.is('#indexPage')) {
myAlert('再点击一次退出!');
document.removeEventListener("backbutton", myBackbutton, false); // 注销返回键
document.addEventListener("backbutton", exitApp, false);// 通过监听返回键绑定退出事件
// 3秒后重新注册
var intervalID = window.setTimeout(function() {
window.clearTimeout(intervalID);
document.removeEventListener("backbutton", exitApp, false); // 注销返退出事件
document.addEventListener("backbutton", myBackbutton, false); // 返回键
}, 3000);
}else{
navigate.app.backHistory();//相当于浏览器的后退
}
} </script>
</head>
<body>
<div data-role="page" id="indexPage">
<div data-role="header">
<h1>PhoneGap实战</h1>
</div>
<div data-role="content">
<a href="#" data-role="button" id="deviceStatus">设备加载中....</a>
<a href="#" data-role="button" id="deviceCurrentStatus">应用为前台</a>
<a href="#" data-role="button" id="deviceConectionStatus">连接加载中....</a>
<a href="#" data-role="button" id="backButtonTouch">返回按钮被按0次</a>
<a href="#" data-role="button" id="menuButtonTouch">菜单按钮被按0次</a>
<a href="#" data-role="button" id="batterystatus">电量获取中...</a>
</div>
<div data-role="footer">
<h4> </h4>
</div>
</div>
</body>
</html>