jquery モバイル サイトを作成しています。jQ mobileの最新バージョンを使用しています。トップバーにメニューを開くボタンがあります。このボタンはホームページでのみ使用できます。他のページでは、戻るボタンが代わりになります。メニュー div はページ div の下にあります (Facebook の iphone アプリを考えてください)。
コンテンツの少ないページに遷移すると、新しいページの div の下にメニューが表示されます。jQ mobile のドキュメントを調べたところ、条件に合うと思われるイベントがいくつか見つかりました。ホームページに次の JavaScript を追加しました。
<script type="text/javascript">
$(document).on("pagebeforeshow", function(){
$('#menu').show();
});
$(document).on("pagebeforehide", function() {
$('#menu').hide();
});
</script>
beforepagehide
トランジションの前に起動してメニューdivを非表示にし、pagebeforeshow
再び戻ってくることを期待していました。これは機能していません。間違ったイベントを選択していますか? jQ mobile の仕組みについて、何か完全に見落としているのでしょうか?
編集:コードを次のように変更しようとしました:
<script type="text/javascript">
$(document).on("pageinit", function(){
$('div[data-role="page"]').one("pagebeforeshow", function(event, ui){
alert("show");
$('#menu').show();
});
$('div[data-role="page"]').one("pagebeforehide", function(event, ui) {
alert("hide");
$('#menu').hide();
});
});
</script>
上記のコードが、ページが表示されるたびに 1 回の実行でイベントをバインドすることを期待していました。私が得ているのは、「非表示」アラートが 2 回表示され、次に遷移先のページが表示される前に「表示」アラートが表示されることです。jQuery モバイル ライフ サイクルで何かが欠けているような気がします。