2

私は jQuery Mobile イベントで頭がいっぱいです。Tのドキュメントに従っているにもかかわらず、それらを理解していません。次のコードを使用してページを初期化しています。問題は、複数回起動するように見えるものもあり、.live pageinit がまったく起動しないかのように、ページに戻っても何も表示されないことがあります。私はかなり混乱しています。pageinitは行く方法ですか？.live はベスト プラクティスですか? 自分でクリーンアップし、pagehide などを使用して DOM から何かを削除する必要がありますか? 理解を助けてください。ありがとう！

// page number 1
<header>
   includes and stuff
<header>
<body>
    <div data-role="page" data-theme="a" id="dashboardPage">
        $('#dashboardPage').live('pageinit',function() {

        });

        // somewhere in here a page transition to anotherPage.html (not necessarily the id of the new page in the <div data-role-"page data-theme...> declaration

        $.mobile.changePage("anotherPage.html",{transition : "slide"});

    </div>
</body>

// page number 2
<header>
   includes and stuff
<header>
<body>
    <div data-role="page" data-theme="a" id="specialsPage">
        $('#specialsPage').live('pageinit',function() {

        });
    </div>
</body>
4

2 に答える 2

0

JQuery mobileを使用する場合は、コンテンツが動的に更新される単一のページがあることを考慮する必要があります。通常のように、あるページから別のページに移動することはありません。このため、JQMでナビゲートするページに存在するコードはすべて無視されます（ページ番号2のヘッダーを変更し、changepageでページ番号1からこのページにナビゲートしても、違いはありません）。そのため、すべてのjsコードは、ユーザーがアクセスするページ内で直接利用できる必要があります。

ページ1のスクリプトに次のコードを追加すると、changepageがロードされたときにpage2の初期化を適切に検出できます。

$("#specialsPage").live('pageinit',function(event){
                alert( '"initializing" page 2: specialsPage');
});

覚えておくべき重要なことは、ユーザーがページ2に直接アクセスする可能性があることです。つまり、すべてのコードがページ2でも利用できる必要があります。このため、すべてのコードをで参照されているjsファイルに含めることを強くお勧めします。すべてのページのヘッダーであり、ページ内のスクリプトタグに直接含まれることはありません。

于 2012-09-05T16:22:01.647 に答える
0

次のようなことを試すことができます：

<html>
    <header>
        <!--  BASIC INCLUDES -->
        <link rel="stylesheet" href="./css/jquery.structure-1.1.0.min.css" />
        <link rel="stylesheet" href="./css/jquery.mobile-1.1.0.min.css" />
        <link rel="stylesheet" href="./css/jquery.mobile.theme-1.1.0.min.css" />

        <script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="./js/jquery.mobile-1.1.0.min.js"></script>
        <!--  END - BASIC INCLUDES -->

    </header>
    <body>
        <!--  PAGE 1 -->
        <div data-role="page" data-theme="a" id="dashboardPage">
            <script>
                // INITIALIGE PAGE 1 -  dashboardPage
                $("#dashboardPage").live('pageinit',function(event){
                    alert( '"initializing" page 1: dashboardPage');
                });
            </script>

            HERE YOU ARE AT PAGE 1 (dashboardPage)!!!<br><br>
            <a href="#specialsPage" data-transition="pop">CLICK HERE TO GO TO PAGE 2 (specialsPage)</a>
        </div>

        <!--  PAGE 2 -->
        <div data-role="page" data-theme="a" id="specialsPage">
            <script>
                // INITIALIGE PAGE 2 -  specialsPage
                $("#specialsPage").live('pageinit',function(event){
                    alert( '"initializing" page 2: specialsPage');
                });
            </script>

            HERE YOU ARE AT PAGE 2 (specialsPage)!!!<br><br>
            <a href="#dashboardPage" data-transition="slide">CLICK HERE TO GO TO PAGE 1 (dashboardPage)</a>
        </div>
    </body>
</html>

それが役に立てば幸い。

于 2012-09-04T09:40:46.483 に答える