PhoneGap事件Events

最新推荐文章于 2017-10-12 09:48:00 发布

ItJavawfc

最新推荐文章于 2017-10-12 09:48:00 发布

阅读量1.7k

点赞数 1

文章标签： deviceready 事件 pause 事件 resume事件 online事件 offline 事件

本文链接：https://blog.csdn.net/ItJavawfc/article/details/45647555

版权

参考官网：http://www.phonegap100.com/doc/cordova_events_events.md.html#Events

分析几个事件：

一、 deviceready 事件
在使用 PhoneGap 开发应用时，deviceready 事件是非常常用的。这一事件在设备的本地
环境和页面完全加载完成之后才触发
注意：此事件一般晚于 jquery 的 ready 事件，jquery 的 ready 事件是在 DOM 完全加载
完成后触发，deviceready 则是设备的本地环境和页面完全加载完成之后才触发

PhoneGap包含两个基础，native和JavaScript，当 native加载的时候，自定义的一些图片
会被调用，而JavaScript 需要在DOM 加载后就会被加载。这是可能造成 JavaScript 在图片加
载前就已经被调用了。使用deviceready事件可以很好的解决这类问题，他可以保证PhoneGap
是在完全加载完成后，才会被触发。
二、 pause 事件
当PhoneGap应用被置为后台时触发

三、 resume事件
当PhoneGap应用重新从后台置为前台时触发

四、 online事件
当PhoneGap应用连接因特网时触发

五、 offline 事件
当PhoneGap应用断开因特网时触发
六、 backbutton事件
当单击退回按钮时触发
七、 menubutton 事件
当单击菜单按钮时触发

八、 batterycritical事件
当PhoneGap应用监控到电池达到警告时触发（20%）

batterycritical 的处理程序将会调用一个对象，该对象包含以下两个属性：
 level：电池剩余电量的百分比，取值范围是 0-100。(数字类型)
 isPlugged：boolean 型的值，表示设备是否接通电源。

九、 batterylow事件
在电量非常低的情况下触发（5%）
batterylow 的处理程序将会调用一个对象，该对象包含以下两个属性：
 level：电池剩余电量的百分比，取值范围是 0-100。(数字类型)
 isPlugged：boolean 型的值，表示设备是否接通电源。
十、 batterystatus 事件
PhoneGap应用监控到电池状态有改变时触发（每当电量变化1%的时候触发一次）
batterystatus的处理程序将会调用一个对象，该对象包含以下两个属性：
level：电池剩余电量的百分比，取值范围是 0-100。(数字类型)
isPlugged：boolean 型的值，表示设备是否接通电源。

严格安装官网例子实验如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>
      jQuery Mobile Web 应用程序
    </title>
    <meta name="viewport" content="width=device-width" />
    <link href="cs/jquery.mobile-1.4.5.css" rel="stylesheet" type="text/css"/>
    <link href="cs/jquery.mobile.external-png-1.4.5.css" rel="stylesheet" type="text/css"/>
    <link href="cs/jquery.mobile.icons-1.4.5.css" rel="stylesheet" type="text/css"/>
    <link href="cs/jquery.mobile.inline-png-1.4.5.css" rel="stylesheet" type="text/css"/>
    <link href="cs/jquery.mobile.inline-svg-1.4.5.css" rel="stylesheet" type="text/css"/>
    <link href="cs/jquery.mobile.structure-1.4.5.css" rel="stylesheet" type="text/css"/>
    <link href="cs/jquery.mobile.theme-1.4.5.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery.js" type="text/javascript">
    </script>
    <script src="js/jquery.mobile-1.4.5.js" type="text/javascript">
    </script>
    <script src="js/cordova.js" type="text/javascript">
    </script>
    <script type="text/javascript">
      $(document).ready(function(){ 
        document.addEventListener("deviceready", onDeviceReady,false);
        });
        function onDeviceReady(){
          console.log("设备加载完毕!");
          //alert("设备加载完成.....");
          $("#deviceStatus .ui-link .ui-btn .ui-shadow .ui-corner-all").text("设备加载完毕!");
          //注册其他事件
          document.addEventListener("pause", onPause, false);
          document.addEventListener("resume", onResume, false);

          document.addEventListener("online", onOnline, false);
          document.addEventListener("offline", onOffline, false);

          document.addEventListener("backbutton", onBackKeyDown, false);
          document.addEventListener("menubutton", onMenuKeyDown, false);

          window.addEventListener("batterycritical", onBatteryCritical, false);
          window.addEventListener("batterylow", onBatteryLow, false);
          window.addEventListener("batterystatus", onBatteryStatus, false);

        }

        function onPause() {
          console.log("应用被置为后台!");
        }

        function onResume() {
          console.log("应用被置为前台!");
        }


        function onOnline() {
           console.log("onOnline ");
        }

        function onOffline() {
           console.log("onOffline ");
        }

        function onBackKeyDown() {
         console.log("onBackKeyDown ");
        }

        function onMenuKeyDown() {
           console.log("onMenuKeyDown ");
        }

        function onBatteryCritical(info) {
          // Handle the battery critical event
          console.log("Battery Level Critical " + info.level + "%\nRecharge Soon!");
        }

        function onBatteryLow(info) {
          // Handle the battery low event
          console.log("Battery Level Low " + info.level + "%");
        }


        function onBatteryStatus(info) {
          // Handle the online event
          console.log("Level: " + info.level + " isPlugged: " + info.isPlugged);
        }
      </script>
    </head>

    <body>
      <div data-role="page">
        <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">
            返回按钮被按下
          </a>
          <a href="#" data-role="button" id="menuButtonTouch">
            菜单按钮被按下
          </a>
          <a href="#" data-role="button" id="batterystatus">
            电量获取中...
          </a>
        </div>
        <div data-role="footer">
          <h4>
            wfc
          </h4>
        </div>
      </div>

    </body>
  </html>

得到实验结果如下：

ItJavawfc

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PhoneGap事件Events

参考官网：http://www.phonegap100.com/doc/cordova_events_events.md.html#Events分析几个事件：一、 deviceready 事件在使用 PhoneGap 开发应用时，deviceready 事件是非常常用的。这一事件在设备的本地环境和页面完全加载完成之后才触发注意：此事件一般晚于 jquery 的
复制链接

扫一扫