Apache Cordova移动应用开发实战
上QQ阅读APP看书,第一时间看更新

4.4 使用主动消息事件

与上一节介绍的5个事件相比,本节要介绍的7个事件简直是平易近人,因为直接通过点击按钮就可以对它们进行测试。它们的使用方法与之前介绍的8种事件完全一样,范例4-4是使用这些事件的一个例子。

【范例4-4】使用主动消息事件。

    01   <! DOCTYPE html>
    02   <html>
    03   <head>
    04   <meta charset="utf-8">
    05  <title>使用主动消息事件</title>
    06  <! --引入Cordova脚本文件-->
    07   <script src="cordova.js" type="text/javascript"></script>
    08   <script>
    09       // 声明当设备加载完毕时的回调函数onDevieReay
    10        document.addEventListener("deviceready", onDeviceReady, false);
    11       // 当设备加载完毕后就会执行该函数
    12        function onDeviceReady() {
    13            // 声明返回按钮被按下时响应的回调函数
    14              document.addEventListener("backbutton", onBackKeyDown, false);
    15            // 声明菜单按钮被按下时响应的回调函数
    16              document.addEventListener("menubutton", onMenuKeyDown, false);
    17            // 声明通话按钮被按下时响应的回调函数
    18              document.addEventListener("startcallbutton", onStartCallKeyDown,
    false);
    19            // 声明结束通话按钮被按下时响应的回调函数
    20             document.addEventListener("endcallbutton",  onEndCallKeyDown,  false);
    21            // 声明音量减按钮被按下时响应的回调函数
    22              document.addEventListener("volumedownbutton", onVolumeDownKeyDown,
    false);
    23            // 声明音量增按钮被按下时响应的回调函数
    24              document.addEventListener("volumeupbutton", onVolumeUpKeyDown,
    false);
    25            // 声明搜索按钮被按下时响应的回调函数
    26              document.addEventListener("searchbutton", onSearchKeyDown, false);
    27        }
    28       // 当返回按钮被按下时触发该函数
    29        function onBackKeyDown() {
    30            alert("返回按钮被按下");
    31        }
    32       // 当菜单按钮被按下时触发该函数
    33        function onMenuKeyDown() {
    34            alert("菜单按钮被按下");
    35        }
    36       // 当通话按钮被按下时触发该函数
    37        function onStartCallKeyDown() {
    38            alert("通话按钮被按下");
    39        }
    40       // 当结束通话按钮被按下时触发该函数
    41        function onEndCallKeyDown() {
    42            alert("结束通话按钮被按下");
    43        }
    44       // 当音量减按钮被按下时触发该函数
    45        function onVolumeDownKeyDown () {
    46            alert("音量减按钮被按下");  //增按钮雷同,这里省略
    47        }
    48       // 当音量增按钮被按下时触发该函数
    49        function onSearchKeyDown() {
    50            alert("搜索按钮被按下");
    51        }
    52   </script>
    53   </head>
    54   <body>
    55        <h1>使用主动消息事件</h1>
    56   </body>
    57   </html>

程序运行之后,依次按下各按钮可以看到相应的对话框弹出,最后的结果如图4-11和图4-12所示。

图4-11 菜单按钮被按下

图4-12 返回按钮被按下

其他按钮也是类似,不过需要注意的是,这里所说的按钮必须是实体或专门的虚拟按钮才有效。比如图4-13所示的平板电脑的虚拟返回键是有效的,但是在一些应用中的“返回”按钮是不能触发backbutton事件的。

图4-13 某款平板电脑中的虚拟键

最后需要说明的是,对音量增和音量减按钮的触发事件由于与系统本身的音量功能冲突,所以在大多数的场合下是无效的。另外,目前的大多数手机已经没有了通话按钮和通话结束按钮,因此这两个事件也无法进行测试了。

提示

虽然Cordova为开发者提供了各种事件,但是除了deviceready在开发中有着广泛的应用之外,其他事件的应用价值不大。因此还请各位开发者能够以理性的态度使用它们。