需求:利用PhoneGap框架实现单机返回按钮两次后,程序才会退出
主要代码如下:
<span style="font-size:18px;"><script type="text/javascript">
//提示信息
function showMyAlert(text) {
$.mobile.loadingMessageTextVisible = true;
$.mobile.showPageLoadingMsg('a',text, true);
}
function myAlert(text){
showMyAlert(text);
setTimeout(hideLoading,2000);
}
function hideLoading(){
$.mobile.hidePageLoadingMsg();
}</span>
<span style="font-size:18px;">//点击返回按钮的事件
function myBackbutton(){
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);
}
//退出app
function exitApp(){
navigator.app.exitApp();//Navigator 对象包含有关浏览器的信息。
}</span>
1)jquerymobile使用过程中经常用到$.mobile,那.mobile是个什么东西呢?
解答:$.mobile对象为设置所有属性的入口点,后面直接可以调用方法,属性
2) navigator.app.exitApp();中的navigator是什么,你会发现程序中也好多这个,查看w3c:http://www.w3school.com.cn/jsref/dom_obj_navigator.asp
解:它是一个Browser对象
3)发现一个问题,就是我学习的jquerymobile为1.3,我实验的时候用的是jquerymobile最新版本,也就是1.4.5版本。运行报错无$.mobile.showPageLoadingMsg('a',text, true);方法。
解决:去jquerymobile官网查看API:http://demos.jquerymobile.com/1.2.0/ http://demos.jquerymobile.com/1.2.0/docs/pages/loader.html
从红色框中可以看出来,在新的API中,
loadingMessageTextVisible
showPageLoadingMsg
hidePageLoadingMsg
-----------
等方法已经不再使用,顾用最新的jQuerymobile的JS文件,出错。
新的写法参考官网,
例如:
<script type="text/javascript">
//提示信息
function showMyAlert(text) {
$.mobile.loading( 'show', {
text: text,
textVisible: true,
theme: 'b',
//html: "========"
});
}
function myAlert(text){
showMyAlert(text);
setTimeout(hideLoading,2000);
}
function hideLoading(){
$.mobile.loading( 'show', {
});
}