Question

我想为我的Android应用程序创建一个选项菜单。我正在使用HTML5和jQuery Mobile与Phonegap。我找到了使用Java的解决方案，但我希望能够使用HTML5 / jQuery / PhoneGap来实现。有没有人有任何想法？

Answer 1

如果你有一个phonegap应用程序，为什么不使用jquery移动菜单和显示这些东西的方法？ Jquery Mobile demos

Answer 2

我找到的解决方案是在jquery-mobile框架之外添加新的div。

<!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>jQuery Mobile Web App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="jquery-mobile/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css"/>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="jquery-mobile/jquery.1.8.1.min.js" type="text/javascript"></script>
    <script src="jquery-mobile/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
    <script src="cordova.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(e) {
            $('.show-menu').click(trigger_menu);
        });

        function trigger_menu()
        {
            $('#menu').slideToggle(500);
        }

        $(document).bind('pageinit', function(){
            $(document).click(function(e) {
                if(e.srcElement.className != 'show-menu ui-link'){
                    $('#menu').slideUp(500);
                }
            });

            $('#menu').click(function(){
                $('#menu').slideUp(500);
            });
        });

        function onLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }

        function onDeviceReady() {
            document.addEventListener("menubutton", onMenuKeyDown, false);
        }

        function onMenuKeyDown() {
            trigger_menu();
        }
    </script>
    </head>
    <body onLoad="onLoad()">
    <div data-role="page" id="page">   
        <div data-role="header">
            <h1>Page One</h1>
        </div>
        <div data-role="content">    
            <a href="#" class="show-menu">Menu</a>
        </div>
        <div data-role="footer" data-position="fixed">
            <h4>Page Footer</h4>
        </div>
    </div>
    <!-- Menu (outside mobile framework) -->
    <div id="menu">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="next.html">Next</a></li>
      </ul>
    </div>
    </body>
</html>

CSS文件是：

/* CSS Document */
#menu {
    display:none;
    position:fixed;
    bottom:0;
    z-index:9999;
    background-color:#000000;
    color:#CCCCCC;
    width:100%;
}

#menu ul {
    list-style:none;
    text-align:center;
    margin:0;
    padding:0;
}

#menu ul li {
    border-bottom:1px #FFFFFF solid;
    padding:15px;
}

#menu ul li:hover {
    background-color:#C60;
}

#menu ul li:last-child {
    border-bottom:none;
}

#menu ul li a {
    color:#FFFFFF;
    font-size:20px;
    text-decoration:none;
    display:block;
}

Answer 3

你应该像这样创建/覆盖onCreateOptionsMenu方法之一：

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    super.onCreateOptionsMenu(menu);

    menu.add([some arguments here]);
    //...add more menu options...
    return true;
}

并处理选择，覆盖

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case OK_MENU_ITEM:
            showMsg("Ok");
            break;
    }
    return super.onOptionsItemSelected(item);
}

Answer 4

猜猜你在寻找这个：http://docs.phonegap.com/en/1.7.0/cordova_events_events.md.html#menubutton 不确定你是否还在寻找。

如何在HTML5 / jQuery for Android App中创建自定义选项菜单？

4 个答案: