jQuery Mobile帶頁面滑動轉換的changePage

我似乎無法在處理「swiperight」事件時產生「反向」滑動效果。所以，下面的代碼工作正常，但我希望當我做出「swiperight」，下一頁將從左側滑入而不是右側。我做了搜索文檔，併到「swiperight補充說：」作爲reverse: trueas it recomends：jQuery Mobile帶頁面滑動轉換的changePage

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

但這並不會提供所需的效果。你能指出我在哪裏做錯了嗎？

我有jsFiddle以下代碼：

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>

jQuery的：

(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(); 
});

來源

2012-11-21 Nikola

確定第一關你使用JQM的Alpha版以及您提到的針對jQM 1.1.1的文檔。我已經更新您的jsfiddle使用最新JQM 1.2

http://jsfiddle.net/GYAB7/2/

而且我已經添加了正確的語法反向刷卡過渡

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

和逆轉移

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

來源

2012-11-21 14:10:41

啊，拍，謝謝！這就是當你閱讀過時的書，而不是檢查當前版本：/ – Nikola

jQuery Mobile帶頁面滑動轉換的changePage

回答

相關問題