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