私はAndroidアプリケーション用のオプションメニューを作成したいと思います。 PhonegapでHTML5とjQuery Mobileを使用しています。 Javaを使用して解決策を見つけましたが、HTML5/jQuery/PhoneGapを使用してこれを実行できるようにしたいと考えています。誰にも分かりますか？Android AppのHTML5/jQueryにカスタムオプションメニューを作成するにはどうすればよいですか？
私が見つけた解決策は、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;
}
：uはuはjqueryの携帯電話を使用していけない理由はPhoneGapのアプリを持っている場合
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case OK_MENU_ITEM:
showMsg("Ok");
break;
}
return super.onOptionsItemSelected(item);
}
Javaでこれ。 HTML5/jQuery/phonegapに必要です。このコードをHTML5に統合することはできますか？ –
をオーバーライドし、
@Override
public boolean onCreateOptionsMenu(Menu menu) {
super.onCreateOptionsMenu(menu);
menu.add([some arguments here]);
//...add more menu options...
return true;
}
と選択を処理するために、メニューやそのようなものを表示する方法？ Jquery Mobile demos
私はメニューについては言いません。私はmenubuttonがクリックされたときのオプションメニューについて言います。 –
あなたの質問に正確に何が必要なのか画像を添付してください – ghostCoder
申し訳ありません！画像をアップロードするのに十分な権限がありません。同様の例はhttp://developer.android.com/guide/topics/ui/menus.htmlにあります。しかし、私はHTML5でも同じです。 –
は、あなたがこのために探していた推測：あなたはまだ探している場合http://docs.phonegap.com/en/1.7.0/cordova_events_events.md.html#menubutton わかりません。
あなたは多くの答えを期待してい傾けます。 – ghostCoder