跨平台移动开发_PhoneGap API 事件类型_移动开发

您所在的位置：程序员俱乐部 > 编程开发 > 移动开发 > 跨平台移动开发_PhoneGap API 事件类型

跨平台移动开发_PhoneGap API 事件类型

2013/11/14 9:50:29 小念头博客园我要评论(0)

摘要：PhoneGapAPIEventsbackbuttondevicereadymenubuttonpauseresumeonlineofflinebatterycriticalbatterylowbatterystatusvolumedownbuttonvolumeupbutton点击下载源代码包参考代码<!DOCTYPEhtml><html><head><title>PhoneGapDeviceReadyExample</title>
标签：事件 API 开发跨平台

PhoneGap API Events

backbutton
deviceready
menubutton
pause
resume
online
offline
batterycritical
batterylow
batterystatus
volumedownbutton
volumeupbutton

点击下载源代码包

参考代码

<!DOCTYPE html>
<html>
  <head>
    <title>
      PhoneGap Device Ready Example
    </title>
    <link 
        href="content/css/themes/default/jquery.mobile.structure-1.4.0-beta.1.min.css"
        rel="stylesheet"
        type="text/css"/>
    <link href="content/css/themes/default/jquery.mobile-1.4.0-beta.1.min.css" rel="stylesheet" type="text/css"/>

    <script src="content/js/jquery.js" type="text/javascript">
    </script>
    <script src="content/js/jquery.mobile-1.4.0-beta.1.js" type="text/javascript">
    </script>
    <script src="content/js/cordova.js" type="text/javascript">
    </script>

    <script type="text/javascript">
      $(function(){
        //当PhoneGap被完全加载后会触发该事件。
        document.addEventListener('deviceready',onDeviceReady,false);
        })
        function onDeviceReady() {
          // 现在可以安全使用PhoneGap API
          //alert('deviceready');
          console.log('deviceready');
          //当PhoneGap应用程序被放到后台的时候触发此事件。
          document.addEventListener('pause', onPause, false);
          //当PhoneGap应用程序被恢复到前台运行的时候触发此事件。
          document.addEventListener('resume', onResume, false);
          //当用户在Android系统上点击后退按钮的时候触发此事件。
          document.addEventListener('backbutton', onBackButton, false);
          //当用户在Android系统上点击菜单按钮的时候触发此事件。
          document.addEventListener('menubutton', onMenuButton, false);
          //当PhoneGap应用程序离线（没有连接到因特网）的时候触发此事件。
          document.addEventListener('offline', isOffline, false);
          //当PhoneGap应用程序在线（连接到因特网）的时候触发此事件。
          document.addEventListener('online', isOnline, false);
          //当PhoneGap应用程序发现电池电量降低到临界点时会触发此事件。
          window.addEventListener('batterycritical', onBatteryCritical, false);
          //当PhoneGap应用程序发现电池降到一个较低水平值时触发此事件。
          window.addEventListener('batterylow', onBatteryLow, false);
          //当PhoneGap应用程序发现电池状态发生改变时触发此事件。
          window.addEventListener('batterystatus', onBatteryStatus, false);
          //当用户按下加大音量按钮时会触发该事件。
          document.addEventListener('volumeupbutton', onVolumeUpKeyDown, false);
        }
        //统计点击数量
        var backbuttoncount=0;
        var menubuttoncount=0;
        var volumeupbuttoncount=0;
        function onPause(){
          console.log('onPause');
        }
        function onResume(){
          console.log('onResume');
        }
        function onBackButton() {
          console.log('onBackButton');
          backbuttoncount++;
          $('#backbuttoncount').text('后退按钮点击'+backbuttoncount+'次');
        }
        function onMenuButton() {
          console.log('onMenuButton');
          menubuttoncount++;
          $('#menubuttoncount').text('菜单按钮点击'+menubuttoncount+'次');
        }
        function isOffline() {
          console.log('Offline');
          $('#ispson').text('没有连接到因特网');
        }
        function isOnline() {
          console.log('isOnline');
          $('#ispson').text('连接到因特网');
        }
        function onBatteryCritical(info) {
          //处理电池电量不足的事件。
          alert("电池电量不足" + info.level + "%");
        }
        function onBatteryLow(info) {
          // 处理电池电量低的事件
          alert("电池电量低 " + info.level + "%");
        }
        function onBatteryStatus(info) {
          // 处理电池状态发生改变的事件
          console.log("电池状态: " + info.level + " 是否充电: " + info.isPlugged);
          $('#batteryinfo').text('电池状态:'  + info.level + '是否充电: '  + info.isPlugged);
        }
        function onVolumeUpKeyDown() {
          // 处理声音增大按钮事件
          console.log('onVolumeUpKeyDown');
          volumeupbuttoncount++;
          $('#volumeupbuttoncount').text('声音增大按钮点击'+volumeupbuttoncount+'次');
        }
      </script>
    </head>
    <body>
      <div data-role="page" id="page">
        <h1>
          Events效果
        </h1>

        <label for="textinput-disabled">
          [后退按钮]:
        </label>
        <a href="#" data-role="button" id="backbuttoncount">
          次数
        </a>
        <label for="textinput-disabled">
          [菜单按钮]:
        </label>
        <a href="#" data-role="button" id="menubuttoncount">
          次数
        </a>
        <label for="textinput-disabled">
          [声音增大按钮]有些平台不支持:
        </label>
        <a href="#" data-role="button" id="volumeupbuttoncount">
          次数
        </a>
        <a href="#" data-role="button" id="batteryinfo">
          电池状态
        </a>
        <a href="#" data-role="button" id="ispson">
          网络连接状态
        </a>
      </div>
    </body>
  </html>