<!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>&nbsp;</h4>

        </div>

    </div>

</body>

</html>

PhoneGap API 之事件处理_双击返回键退出程序的更多相关文章

  1. Android应用系列：双击返回键退出程序

    前言 有一个很古老的应用技巧,一直被各种大大小小的app用得乐此不疲,那就是双击返回键退出程序.今天就写写它的实现代码,非常简单而且实用. 正文 双击返回键退出程序,一般有两种实现思路,一种是用一个布 ...

  2. android双击返回键退出程序

    今天给大家简单说一下,android双击返回键退出程序. @Override public boolean onKeyDown(int keyCode, KeyEvent event) {      ...

  3. WP8.1应用双击返回键退出程序。

    #region 双击退出程序代码 //双击HardwareButtons.BackPressed: //出现退出提示窗口: //“确定”退出,“取消”返回什么也不做: private async vo ...

  4. android双击返回键退出程序的实现

    /** * 菜单.返回键响应 */ @Override public boolean onKeyDown(int keyCode, KeyEvent event) { // TODO Auto-gen ...

  5. Android 监听返回键退出程序的两种实现

    1.Android 双击返回键退出程序 思路:用户按下返回键时设定一个定时器来监控是否2秒内实现了退出,如果用户没有接着按返回键,则清除第一次按返回键的效果,使程序还原到第一次按下返回键之前的状态.定 ...

  6. ionic 实现双击返回键退出应用功能

    ionic 实现双击返回键退出应用功能 keywords cordova,ngcordova,phonegap,ionic,双击,返回键,退出 例子 准备Toast插件,提示用,用户体验好点,不是必须 ...

  7. WP8.1 双击两次返回键退出程序

    在实现Windows Phone上实现点按两次返回键退出程序, 一种方法是使用Coding4Fun提供的ToastPrompt, 使用方法如下: 1. 安装引用, 打开Package Manager ...

  8. Android中的“再按一次返回键退出程序”实现

    用户退出应用前给出一个提示是很有必要的,因为可能是用户并不真的想退出,而只是一不小心按下了返回键,大部分应用的做法是在应用退出去前给出一个Dialog,我觉得这样不太友好,用户还得移动手指去按dial ...

  9. Android_按两次返回键退出程序和长按返回键退出程序

    以上两个功能主要是参考了一下博客的: http://blog.csdn.net/chenshijun0101/article/details/7682210 http://blog.csdn.net/ ...

随机推荐

  1. 选择适用才最好 盘点MySQL备份方式

    我们要备份什么? 一般情况下, 我们需要备份的数据分为以下几种 数据 二进制日志, InnoDB事务日志 代码(存储过程.存储函数.触发器.事件调度器) 服务器配置文件 备份工具 这里我们列举出常用的 ...

  2. [转]flash.net.Socket

    本文转自:http://designstacks.net/actionscript-3-new-capabilities http://help.adobe.com/en_US/ActionScrip ...

  3. html制作chm格式开源文档

    在主界面点击生成器,找到网页所在的文件夹. 然后用编译,还是找到网页文件夹.根据需要设置.TOC 那一项是目录,请根据需要修改. 特别要注意的是,预设那里,点击那个配置图标,会打开如下图的预设编辑器. ...

  4. node错误集合

    1.端口被占用 node .\app.js events.js:167 throw er; // Unhandled 'error' even 解决办法:8888端口被占用了,更改一个端口就好 2. ...

  5. Dapper的简单使用(初学者归纳)

    Dapper的简单使用(初学者归纳) //引用:using System;using System.Collections.Generic;using System.Linq;using System ...

  6. jQuery的三种$()方式

    http://www.jb51.net/article/21660.htm   $号是jQuery“类”的一个别称,$()构造了一个jQuery对象.所以,“$()”可以叫做jQuery的构造函数(个 ...

  7. EF面试题

    为什么用EF而不用原生的Ado.Net? 1.极大的提高开发效率:EF是微软自己的产品,跟VS拉法集成度比较好,开发中代码都是强类型的, xiefl代码效率非常高,自动化程度非常高,命令式的编程. 2 ...

  8. 单源最短路(Dijkstra算法)

    #返回上一级 @Author: 张海拔 @Update: 2015-03-11 @Link: http://www.cnblogs.com/zhanghaiba/p/3514570.html Dijk ...

  9. java 并发(七)--- ThreadLocal

         文章部分图片来自参考资料 问题 : ThreadLocal 底层原理 ThreadLocal 需要注意什么问题,造成问题的原因是什么,防护措施是什么 ThreadLocal 概述 Threa ...

  10. centos 安装cloud foundry CLI

    步骤: 1.wget -O /etc/yum.repos.d/cloudfoundry-cli.repo https://packages.cloudfoundry.org/fedora/cloudf ...