码迷,mamicode.com
首页 > 其他好文 > 详细

PhoneGap事件Events

时间:2015-05-11 22:08:37      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:deviceready 事件   pause 事件   resume事件   online事件   offline 事件   

参考官网: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>

得到实验结果如下:

技术分享

技术分享


PhoneGap事件Events

标签:deviceready 事件   pause 事件   resume事件   online事件   offline 事件   

原文地址:http://blog.csdn.net/itjavawfc/article/details/45647555

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!