3

ここの初心者、投稿の正しい詳細をすべて理解していない場合は申し訳ありません... jquery mobileの左右のスワイプを理解するために、いくつかのページにアクセスしました。スクリプトのためにこのページにアクセスしました-http: //designicu.com/jquery-mobile-swipe/なんらかの理由で、まったく機能しません。私は小さくて愚かな何かを見逃していると確信しています...誰かが私の問題を見ることができますか？ありがとう

<!DOCTYPE html> 
<html  lang="en">
<head>
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 

    <link rel="stylesheet" href="_/css/jquery.mobile.css" />

    <script src="_/javascript/jquery.js"></script>
    <script src="_/javascript/jquery.mobile.js"></script>

    <script>

    $('div.ui-page').live("swipeleft", function(){
    var nextpage = $(this).next('div[data-role="page"]');
        if (nextpage.length > 0) {
        $.mobile.changePage(nextpage, "slide", false, true);
        }
    });
    $('div.ui-page').live("swiperight", function(){
        var prevpage = $(this).prev('div[data-role="page"]');
        if (prevpage.length > 0) {
        $.mobile.changePage(prevpage, {transition: "slide",
        reverse: true}, true, true);
        }
    });
    </script>

</head>

<body> 

    <div data-role="page" id="editor">
    <div>bucker</div>
    </div>

    <div data-role="page" id="innovation1">
    <div>bunk</div>
    </div>

</body> 
</html>
4

1 に答える 1

4

私はあなたに実用的な例を作りました: http://jsfiddle.net/Gajotres/NV6Py/

$(document).on('swipeleft', '[data-role="page"]', function(event){    
    if(event.handled !== true) // This will prevent event triggering more then once
    {    
        var nextpage = $(this).next('[data-role="page"]');
        // swipe using id of next page if exists
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
        }
        event.handled = true;
    }
    return false;         
});

$(document).on('swiperight', '[data-role="page"]', function(event){   
    if(event.handled !== true) // This will prevent event triggering more then once
    {      
        var prevpage = $(this).prev('[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
        }
        event.handled = true;
    }
    return false;            
});

そして、あなたのバージョンは問題なく動作しています。js と css の初期化のみを jQuery 1.8.2 と jQuery Mobile 1.2 に置き換えました。ここで見てみましょう：

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

    <script>

    $('div.ui-page').live("swipeleft", function(){
    var nextpage = $(this).next('div[data-role="page"]');
        if (nextpage.length > 0) {
        $.mobile.changePage(nextpage, "slide", false, true);
        }
    });
    $('div.ui-page').live("swiperight", function(){
        var prevpage = $(this).prev('div[data-role="page"]');
        if (prevpage.length > 0) {
        $.mobile.changePage(prevpage, {transition: "slide",
        reverse: true}, true, true);
        }
    });
    </script>

</head>

<body> 

    <div data-role="page" id="editor">
        <div>bucker</div>
    </div>

    <div data-role="page" id="innovation1">
        <div>bunk</div>
    </div>

</body> 
</html>
于 2013-03-21T08:43:47.617 に答える