如何在HTML5/jQuery for Android應用程序中創建自定義選項菜單？

我想爲我的Android應用程序創建一個選項菜單。我正在使用帶有Phonegap的HTML5和jQuery Mobile。我找到了使用Java的解決方案，但我希望能夠使用HTML5/jQuery/PhoneGap來完成此操作。有人有什麼主意嗎？如何在HTML5/jQuery for Android應用程序中創建自定義選項菜單？

來源

2012-01-17 Pradip Kharbuja

你不能指望有很多答案，直到出現這種情況。 – ghostCoder 2012-01-18 05:59:43

我發現的解決方案是在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; 
}

來源

2013-02-27 08:18:03

你應該創建/覆蓋的方法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); 
}

來源

2012-01-17 12:22:31

這在Java中。我需要HTML5/jQuery/phonegap。此代碼是否可以集成到HTML5中？ – 2012-01-18 04:24:17

如果u有一個PhoneGap的應用程序，爲什麼不ü使用jQuery Mobile的菜單和方式來顯示這些東西？ Jquery Mobile demos

來源

2012-01-18 06:02:24 ghostCoder

我不是在說菜單。當我點擊menubutton時，我正在談論選項菜單。 – 2012-01-18 06:37:06

附上一個圖像到你的問題，你究竟想要什麼 – ghostCoder 2012-01-18 07:05:02

對不起！我沒有足夠的權限上傳圖片。類似的例子在http://developer.android.com/guide/topics/ui/menus.html。但是我想在HTML5中使用相同的內容。 – 2012-01-18 07:12:03

猜你在找這個：http://docs.phonegap.com/en/1.7.0/cordova_events_events.md.html#menubutton 不知道你是否還在尋找。

來源

2012-05-19 23:11:48