jQuery 슬쩍 전환을 사용하는 모바일 변경 페이지

"swiperight"이벤트를 처리하는 동안 "역방향"슬라이드 효과를 만들 수없는 것처럼 보입니다. 그래서, 아래의 코드는 잘 작동하지만, 다음 페이지가 오른쪽에서가 아니라 오른쪽에서 밀어 넣을 "swiperight"를 만들 때 좋을 것입니다. 나는 문서를 검색 한 후 "swiperight"에 as it recomends로 reverse: true을 추가 :jQuery 슬쩍 전환을 사용하는 모바일 변경 페이지

$.mobile.changePage("#page"+nextPage, {transition : "slide", reverse: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>

jQuery를 : 당신은 JQM의 알파 버전을 사용하는 우선

(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

나는 jsFiddle에 다음과 같은 코드가 jQM 1.1.1을 가리키는 문서. 나는 최신 JQM 1.2

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

를 사용하도록 jsfiddle 업데이트되었습니다 그리고 난 반대 슬쩍 전환

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

과 역 전환에 대한 올바른 구문을 추가 한

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

출처

2012-11-21 14:10:41

아, 촬영, 감사합니다. 그게 당신이 오래된 책을 읽고 현재 버전을 확인하지 않을 때 얻는 것입니다 : / – Nikola

jQuery 슬쩍 전환을 사용하는 모바일 변경 페이지

답변

관련 문제