使用phonegap/cordova点击android原生菜单按钮启动jquery移动面板菜单

fire jquery mobile panel menu by clicking android native menu button using phonegap/cordova

本文关键字:菜单 启动 按钮 jquery 移动 原生 phonegap cordova 点击 android 使用      更新时间:2023-09-26

我正在使用Jquery Mobile/Phonegap开发一个Android应用程序。我有以下代码来控制手机的菜单按钮:

 <script type="text/javascript" charset="utf-8">
    // Call onDeviceReady when PhoneGap is loaded.
    //
    // At this point, the document has loaded but phonegap-1.0.0.js has not.
    // When PhoneGap is loaded and talking with the native device,
    // it will call the event `deviceready`.
    // 
    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }
    // PhoneGap is loaded and it is now safe to make calls PhoneGap methods
    //
    function onDeviceReady() {
        // Register the event listener
        document.addEventListener("menubutton", onMenuKeyDown, false);
    }
    // Handle the menu button
    //
    function onMenuKeyDown() {
    alert("It works");
    }
    </script>   

并在body标签上添加:

<body onload="onLoad()"> 

所以当我点击android原生菜单按钮时,我得到警报消息"它工作"…我想知道哪是正确的代码,我需要添加那里调用我基于jquery移动创建的菜单。下面是菜单面板的代码:

<div data-role="panel" id="mypanel" data-display="overlay">
<ul data-role="listview" class="fondo">
<li data-icon="false"><a href="#menu" class="menutxt" data-transition="slide"><img class="ui-li-icon" src="./img/history.svg">Option 1</a></li>
<li data-icon="false"><a href="#menu" class="menutxt" data-transition="slide"><img class="ui-li-icon" src="./img/pizza.svg">Option 2</a></li>
<li data-icon="false"><a href="#menu" class="menutxt" data-transition="slide"><img class="ui-li-icon" src="./img/tag.svg">Option 3</a></li>
<li data-icon="false"><a href="#combina" class="menutxt" data-transition="slide"><img class="ui-li-icon" src="./img/cart.svg">Option 4</a></li>
</ul>
</div>

谢谢你调查这个…非常感谢您的帮助。

这些是JQM中可以用于面板的所有选项/事件/方法。

http://api.jquerymobile.com/panel/

打开面板

$( "#mypanel" ).panel( "open" );