android端末のメニューボタン | phonegap

メニューボタンのイベントはこちら
http://docs.phonegap.com/en/1.4.1/phonegap_events_events.md.html#menubutton

document.addEventListener(”menubutton”, onMenuKeyDown, false);

function onMenuKeyDown() {
// Handle the back button
}

要件としては、
* androidのメニュー風なデザイン。
* 表示されたメニューボタンをクリックしたら遷移
* スクロール対応 ⇒ scrollstartで閉じる.close.
* 画面縦横切り替え対応→orientationchange

やり方。
* メニューの高さを決める。
* 画面の高さ - メニューの高さの枠をメニューの上に置く(透過)下のコンテンツをクリックさせない。この部分に触ったらメニューが閉じる。
* 横幅は、画面の横幅割るメニューの数。縦横画面が切り替わるので都度css書き換え。

出来た物はこちら。オークション落札価格相場検索アプリです。是非お試しください。
https://market.android.com/details?id=com.groundroad.aucru

画面はこんな感じです。縦のボーダーがぴったりでいい感じになりました。ヘッダーのデザインも替えたくなります。。。

https://twitter.com/#!/JunichiOtake/status/169064865900670977/photo/1

This entry was posted on 火曜日, 2月 14th, 2012 at 12:06 AM and is filed under Android, PhoneGap. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.