【小编推荐】Phonegap 处理事件

2014-05-18   |   发布者:梁国芳   |   查看:3320次

前端开发
deviceready事件(使用PhoneGap开发时,deviceready事件是常用的,deviceready事件在设备的本地环境和页

面加载完成后才触发,一般晚于jquery的ready事件)

pause事件(PhoneGap应用被置为后台时触发)

resume事件(PhoneGap从后台置为前台时触发)

online事件 (应用连接网络时触发)

offline事件(应用断开网络时触发)

backbutton事件(单机返回按钮时触发)

menubutton事件(单机菜单按钮时触发)

batterycritical事件(PhoneGap应用检测到电池电量到达20%警告时触发 包括两个属性:level:电池剩余电量

的百分比,取值范围0-100;isPlugged:boolean型的值,表示设备是否接通电源。)

batterylow事件(电量非常低5%的情况下触发 包括两个属性:level:电池剩余电量的百分比,取值范围0-100;

isPlugged:boolean型的值,表示设备是否接通电源。)

batterystatus事件(监控电池每当电量变化1%时触发一次 包括两个属性:level:电池剩余电量的百分比,取值

范围0-100;isPlugged:boolean型的值,表示设备是否接通电源。)


示例
<html>
<head>
<script type="text/javascript">
     $(document).ready(function(){
               document.addEventListener("deviceready", myDeviceReadyListener, false);

     });

     function myDeviceReadyListener(){

          console.log("设备加载完毕!");
          $("#deviceStatus .ui-btn-text").text("设备加载完毕!");

          //注册其他事件
          document.addEventListener("pause", myPauseListener, false);
          document.addEventListener("resume", myResumeListener, false);

          document.addEventListener("online", myOnlineListener, false);
          document.addEventListener("offline", myOfflineListener, false);

          document.addEventListener("backbutton", myBackbuttonListener, false);
          document.addEventListener("menubutton", myMenubuttonListener, false);

          window.addEventListener("batterystatus", myBatterystatusListener, false);

          window.addEventListener("batterylow", myBatterylowListener, false);
          window.addEventListener("batterycritical", myBatterycriticalListener, false);
     }

     function myBatterystatusListener(info){
          console.log(" 电量值" + info.level);

          $("#batterystatus .ui-btn-text").text(" 电量值" + info.level);
     }

     function myBatterylowListener(info){
          console.log(" 电量低,请及时充电,电量值" + info.level);



      }

      function myBatterycriticalListener(info){
           console.log(" 电量过低,请及时充电,电量值" + info.level);
      }

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

           $("#deviceCurrentStatus .ui-btn-text").text("应用为后台");
      }

      function myResumeListener(){
           console.log("应用被置为前台");
           $("#deviceCurrentStatus .ui-btn-text").text("应用为前台");

      }

      function myOnlineListener(){

           console.log("网络连接在线");
           $("#deviceConectionStatus .ui-btn-text").text(" 网络连接在线");
      }

      function myOfflineListener(){
           console.log("网络连接离线");

           $("#deviceConectionStatus .ui-btn-text").text(" 网络连接离线");
      }

      var backTouchCount = 0;
      var menuTouchCount = 0;

      function myBackbuttonListener(){
           console.log("返回按钮被按了");
           backTouchCount++;

           $("#backButtonTouch .ui-btn-text").text("返回按钮被按"+ backTouchCount +"次");
      }

      function myMenubuttonListener(){
           console.log("菜单按钮被按了");
           menuTouchCount++;

           $("#menuButtonTouch .ui-btn-text").text("菜单按钮被按"+ menuTouchCount +"次");
      }
</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">返回按钮被按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>