0

iPadでの横スワイプジェスチャにjquery mobileを使用しています。

以下のコードは、私のhtmlファイルで参照されているファイルにあります。

私のhtmlファイルには次のものがあります：

<div data-role="page" id="device1">
<!--content for this part of html page -->
</div>
<!--more divs with incrementing id -->
<div data-role="page" id="device4">
<!--content for this part of html page -->
</div>

この形式は、複数の html ファイルで使用されます。

私はこのコードを使用します (stackoverflow にあります) - 古いスレッドに投稿したくありませんでした。

    $(document).ready(function() {

    $('.ui-slider-handle').on('touchstart', function(){
        // When user touches the slider handle, temporarily unbind the page turn handlers
        doUnbind();
    });

    $('.ui-slider-handle').on('mousedown', function(){
        // When user touches the slider handle, temporarily unbind the page turn handlers
        doUnbind();
    });

    $('.ui-slider-handle').on('touchend', function(){
        //When the user let's go of the handle, rebind the controls for page turn
        // Put in a slight delay so that the rebind does not happen until after the swipe has been triggered
        setTimeout( function() {doBind();}, 100 );
    });

    $('.ui-slider-handle').on('mouseup', function(){
        //When the user let's go of the handle, rebind the controls for page turn
        // Put in a slight delay so that the rebind does not happen until after the swipe has been triggered
        setTimeout( function() {doBind();}, 100 );
    });

    // Set the initial window (assuming it will always be #1
    window.now = 1;

    //get an Array of all of the pages and count
    windowMax = $('div[data-role="page"]').length; 

   doBind();
});


// Functions for binding swipe events to named handlers
function doBind() {
    $('div[data-role="page"]').on("swipeleft", turnPage); 
    $('div[data-role="page"]').on("swiperight", turnPageBack);
}

function doUnbind() {
    $('div[data-role="page"]').die("swipeleft", turnPage);
    $('div[data-role="page"]').die("swiperight", turnPageBack);
}

// Named handlers for binding page turn controls
function turnPage(){
    // Check to see if we are already at the highest numbers page            
    if (window.now < windowMax) {
        window.now++
        $.mobile.changePage("#device"+window.now, "slide", false, true);
    }
}

function turnPageBack(){
    // Check to see if we are already at the lowest numbered page
    if (window.now != 1) {
        window.now--;
        $.mobile.changePage("#device"+window.now, "slide", true, true);
    }
}

// Named handlers for binding page turn controls
function navigate_without_swipe(page){
    // Check to see if we are already at the highest numbers page            
    $.mobile.changePage("#device"+page, "slide");
}

この JavaScript を機能させるためにページをリロードする必要がある理由を教えてください

4

1 に答える 1

0

$(document).ready を使用しているため

それはJQueryイベントです。

ページは AJAX を使用して JQM によって読み込まれるため、Jquery Mobile には独自の読み込みイベントがあります。つまり、イベントは発生しません。

おそらくpageinitでそれを行いたいと思いますが、ドキュメントをチェックして、状況により適切なイベントがあるかどうかを確認してください。

JQuery モバイルのドキュメント

于 2013-07-31T10:07:11.500 に答える