1

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 モバイル ライフ サイクルで何かが欠けているような気がします。

4

1 に答える 1

1

解決

私はあなたのために実用的な例を作りました：jsFiddle

あなたの例とは異なり、私はページ遷移中に毎回表示する単純なdivを作成しました。javascriptコードを削除することでテストできます。

これは、カスタムdivを表示/非表示にするjsコードです。

$(document).on('pagebeforehide','[data-role="page"]',function(e,data){    
    $('#test-div').hide();  
});

$(document).on('pageshow','[data-role="page"]',function(e,data){    
    $('#test-div').show();  
});

pagebeforehideの前にさらに3つのイベントがあります。ページがDOMにロードされる前に一度だけトリガーされるため、これらを使用することはできません。毎回トリガーする最初のイベントはpagebeforehideであり、毎回トリガーする最後のイベントはpageshowです。

この問題に関係のないもう1つのことは、この構文は機能しないことです。

$(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();
  });
});

ページイベントをそのようにシリアル化することはできません。ページイベントを別のページイベントの子にすることはできません。

詳しくは

これとページイベントがどのように機能するかについてもっと知りたい場合は、私の個人的なブログで記事を読んでください。

于 2013-01-26T10:14:04.250 に答える