<!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>