通过使用phonegap / cordova单击android本机菜单按钮来触发jquery移动面板菜单

时间:2014-07-25 06:01:17

标签: javascript android jquery jquery-mobile cordova

我正在使用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 onload="onLoad()"> 

所以当我点击android原生菜单按钮时,我收到警告信息&#34;它正常工作&#34; ...我想知道哪个是我需要添加的正确代码来调用菜单我是基于jquery mobile创建的。以下是菜单面板的代码:

<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>

感谢您对此进行调查..非常感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

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

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

打开面板

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