1

$(":mobile-pagecontainer")動かない。私は使用する必要があります$(document)。次のコードに何か問題がありますか?

    <div data-role="page" id="page1">

        <div data-role="header" >
            <h1>Page 1</h1>
        </div>

        <div role="main" class="ui-content">
            This is Page1.

            <a id="gotoPage2" href="#page2" class="ui-btn ui-corner-all ui-shadow ui-btn-a">Go to Page 2</a>

            <script>

            // not working
            $( ":mobile-pagecontainer").on( "pagecontainerhide", function( event, ui ) {
                alert( "page hide ");
            });

            // working
            $( document).on( "pagecontainerhide", function( event, ui ) {
                alert( "page hide " );
            });
           </script>
         </div>
    </page>

    <page  data-role="page" id="page2">
         ....
    </page>

ただし、次のようにページを変更する場合は機能します。

$(":mobile-pagecontainer").pagecontainer("change", "#page2", { } );

ありがとう。

4

1 に答える 1

3

$(":mobile-pagecontainer")内部または外部のすべてのページのラッパーを参照するセレクターです。デフォルトbodyでは:mobile-pagecontainer、.pagecontainer()jQuery Mobile の特別なイベントを発行し、ナビゲーションに使用されるウィジェットです。

jQuery Mobile のイベントはバブルアップするdocumentので、これらのイベントをキャプチャするために使用できます。

$(document).on("pagecontainershow", function (e, data) {
  console.log(data.toPage); /* current active page */
  console.log(data.prevPage); /* previous page */
});

イベントをpageconatinerにアタッチする場合は、イベントを機能させるためにラップする必要があります.ready()。

$(function () {
   $(":mobile-pagecontainer").on("pagecontainerhide", function (e, data) {
      console.log(data.toPage); /* page navigating to */
      console.log(data.prevPage); /* page that was just hidden */
   });
});

ウィジェットを使用することも可能.pagecontainer()です。

$(":mobile-pagecontainer").pagecontainer({
    hide: function (e, data) {
             /* code */
          },
    show: function (e, data) {
             /* code */
          }
});
于 2014-11-10T01:01:58.123 に答える