Jquery mobile 带滑动转换的jQuery Mobile changePage_Jquery Mobile

Jquery mobile 带滑动转换的jQuery Mobile changePage

jquery-mobile

Jquery mobile 带滑动转换的jQuery Mobile changePage,jquery-mobile,Jquery Mobile,我似乎无法在处理“swiperight”事件时产生“反转”幻灯片效果。因此，下面的代码可以很好地工作，但我希望当我使用“swiperight”时，下一页将从左侧滑入，而不是从右侧滑入。我确实搜索了文档，并在“swiperight”中添加了反向：true：但这并没有提供想要的效果。你能指出我哪里做错了吗我有以下代码： html： <!DOCTYPE html> <html> <head> <title>jQuery Mobile Appl

我似乎无法在处理“swiperight”事件时产生“反转”幻灯片效果。因此，下面的代码可以很好地工作，但我希望当我使用“swiperight”时，下一页将从左侧滑入，而不是从右侧滑入。我确实搜索了文档，并在“swiperight”中添加了

反向：true

：

但这并没有提供想要的效果。你能指出我哪里做错了吗

我有以下代码：

html：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile Application</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>    
</head>

<body>
    <section id="page1" data-role="page">
        <header data-role="header"><h1>jQuery Mobile</h1></header>

        <div data-role="content" class="content">
            <p>First page!</p>
        </div>
        <footer data-role="footer"><h1>O'Reilly</h1></footer>
    </section>

    <section id="page2" data-role="page">
        <header data-role="header"><h1>jQuery Mobile</h1></header>

        <div data-role="content" class="content">
            <p>Second page!</p>
        </div>
        <footer data-role="footer"r><h1>O'Reilly</h1></footer>
    </section>

    <section id="page3" data-role="page">
        <header data-role="header"><h1>jQuery Mobile</h1></header>

        <div data-role="content" class="content">
            <p>Third page!</p>
        </div>
        <footer data-role="footer"><h1>O'Reilly</h1></footer>
    </section>    
</body>
</html>

(function($) {
    var methods = {
        init : function(options) {
            var settings = {
                callback: function() {}
            };

            if ( options ) {
                $.extend( settings, options );
                }

            $(":jqmData(role='page')").each(function() {
                $(this).bind("swiperight", function() {
                    var nextPage = parseInt($(this).attr("id").split("page")[1]) - 1;
                    if (nextPage === 0) 
                        nextPage = 3;

                    $.mobile.changePage("#page"+nextPage, "slide");
                    });                        

                $(this).bind("swipeleft", function() {
                    var nextPage = parseInt($(this).attr("id").split("page")[1]) +1;
                    if (nextPage === 4) 
                        nextPage = 1;

                    $.mobile.changePage("#page"+nextPage, "slide");
                });
            })
        }
        }

    $.fn.initApp = function(method) {
        if ( methods[method] ) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } 
        else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } 
        else {
            $.error( 'Method ' + method + ' does not exist' );
        }
    }
    })(jQuery);

$(document).ready(function(){
    $().initApp();
});

好的，首先，您使用的是jQM的Alpha版本，以及您所指的用于jQM 1.1.1的文档。我已将您的JSFIDLE更新为使用最新的jQM 1.2

我已经为反向滑动转换添加了正确的语法

$.mobile.changePage("#page"+nextPage, {
        transition: "slide",
        reverse: false
    });
});

以及反向过渡

$.mobile.changePage("#page"+nextPage, {
        transition: "slide",
        reverse: true
    });
});

啊，开枪，谢谢你！这是当你阅读过时的书，而不是检查当前版本时得到的：/

$.mobile.changePage("#page"+nextPage, {
        transition: "slide",
        reverse: true
    });
});