0

わかりましたので、jQuery Mobiles のプリフェッチ機能を使い始めました。このページhttp://jquerymobile.com/test/docs/pages/page-cache.htmlで指定されているリンク方法を使用しています。唯一の問題は、スワイプ コードが、プリフェッチによって取り込まれたページを認識できないことです。問題の実際の例については、この js フィドルを参照してください。

http://jsfiddle.net/UurQC/1/

新しいページを見つけるために .next を取得するにはどうすればよいかについて、誰もが考えています。私もそれらをターゲットにしようとしました

div.ui-page

そして、それはまだfirebugの空のセレクターとして表示されます.

4

1 に答える 1

2

問題は、次の pesueo-page 要素ではなく、次の DOM 要素を選択しようとしていることです。DOM のロード後に最後のページを追加しているため、実際には別の要素の後に追加されています (.next()疑似ページの代わりにこの他の要素を選択しています)。

私が変更され：

$(this).next("div:jqmData(role='page')");
$(this).prev("div:jqmData(role='page')");

に：

$(this).nextAll("div:jqmData(role='page')").first();
$(this).prevAll("div:jqmData(role='page')").first();

前/次の疑似ページをすべて選択してから、それらの最初のページだけを選択します。

ここにデモがあります：http://jsfiddle.net/UurQC/2/

スワイプ イベントのイベント ハンドラーを委任しない場合、スワイプ イベント ハンドラーは、動的に配置された疑似ページに対して実行されません。これを修正する方法は次のとおりです。

$(document)
    .on("swipeleft", "div:jqmData(role='page')", function(){
        var $nextPage = $(this).nextAll("div:jqmData(role='page')").first();
        // swipe using id of next page if exists
        if ($nextPage.length > 0) {
            $.mobile.changePage($nextPage, { transition: 'slide' });
        }
    })
    .on("swiperight", "div:jqmData(role='page')", function(){
        var $prevPage = $(this).prevAll("div:jqmData(role='page')").first();
        // swipe using id of next page if exists
        if ($prevPage .length > 0) {
            $.mobile.changePage($prevPage, { transition: 'slide', reverse : true });
        }
    });

そして、ここにデモがあります: http://jsfiddle.net/UurQC/3/

アップデート

DOM の外観と、上記が必要な理由は次のとおりです。

<div data-role="page" id="text_0" data-url="text_0" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 452px; "></div>
<div data-role="page" id="text_1" data-url="text_1"></div>
<div data-role="page" id="text_2" data-url="text_2"></div>
<script type="text/javascript">...</script>
<div data-role="page" id="text_3" data-url="text_3"></div>
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"></div>

これは完全な HTML ではなく、<body>要素の直接の子のみであることに注意してください。

JSFiddle が JS コードを<script>タグに追加した後、動的に作成された疑似ページが DOM に追加されることに注意してください。これは、jQuery Mobile が初期化時にローダー要素を追加するため、JSFiddle で実行しない場合にも問題になります。

于 2012-08-07T21:17:50.233 に答える