화면 전환 : 항상 왼쪽에서 오른쪽으로 이동하는 방법

Question

전화 응용 프로그램을 개발 중이며 화면 상단에 "뒤로"와 "다음"단추가 두 개 있습니다. 다음 버튼을 클릭 할 때마다 화면이 오른쪽에서 왼쪽으로 이동하고 대부분 뒤로 버튼을 클릭하면 왼쪽에서 오른쪽으로 이동합니다. 그러나 가끔씩 '뒤로'를 클릭하면 오른쪽에서 왼쪽으로 전환됩니다. EDIT가

(function($, undefined) { 

$.mobile.page.prototype.options.backBtnText = "Back"; 
$.mobile.page.prototype.options.addBackBtn = false; 
$.mobile.page.prototype.options.backBtnTheme = null; 
$.mobile.page.prototype.options.headerTheme = "a"; 
$.mobile.page.prototype.options.footerTheme = "a"; 
$.mobile.page.prototype.options.contentTheme = null; 

$(document).delegate(":jqmData(role='page'), :jqmData(role='dialog')", "pagecreate", function(e) { 

var $page = $(this), 
    o = $page.data("page").options, 
    pageRole = $page.jqmData("role"), 
    pageTheme = o.theme; 

$(":jqmData(role='header'), :jqmData(role='footer'), :jqmData(role='content')", this).each(function() { 
    var $this = $(this), 
     role = $this.jqmData("role"), 
     theme = $this.jqmData("theme"), 
     contentTheme = theme || o.contentTheme || (pageRole === "dialog" && pageTheme), 
     $headeranchors, 
     leftbtn, 
     rightbtn, 
     backBtn; 

    $this.addClass("ui-" + role); 

    //apply theming and markup modifications to page,header,content,footer 
    if (role === "header" || role === "footer") { 

     var thisTheme = theme || (role === "header" ? o.headerTheme : o.footerTheme) || pageTheme; 

     $this 
      //add theme class 
      .addClass("ui-bar-" + thisTheme) 
      // Add ARIA role 
      .attr("role", role === "header" ? "banner" : "contentinfo"); 

     // Right,left buttons 
     $headeranchors = $this.children("a"); 
     leftbtn = $headeranchors.hasClass("ui-btn-left"); 
     rightbtn = $headeranchors.hasClass("ui-btn-right"); 

     leftbtn = leftbtn || $headeranchors.eq(0).not(".ui-btn-right").addClass("ui-btn-left").length; 

     rightbtn = rightbtn || $headeranchors.eq(1).addClass("ui-btn-right").length; 

     // Auto-add back btn on pages beyond first view 
     if (o.addBackBtn && 
      role === "header" && 
      $(".ui-page").length > 1 && 
      $this.jqmData("url") !== $.mobile.path.stripHash(location.hash) && 
      !leftbtn) { 

      backBtn = $("<a href='#' class='ui-btn-left' data-"+ $.mobile.ns +"rel='back' data-"+ $.mobile.ns +"icon='arrow-l'>"+ o.backBtnText +"</a>") 
       // If theme is provided, override default inheritance 
       .attr("data-"+ $.mobile.ns +"theme", o.backBtnTheme || thisTheme) 
       .prependTo($this);     
     } 

     // Page title 
     $this.children("h1, h2, h3, h4, h5, h6") 
      .addClass("ui-title") 
      // Regardless of h element number in src, it becomes h1 for the enhanced page 
      .attr({ 
       "tabindex": "0", 
       "role": "heading", 
       "aria-level": "1" 
      }); 

    } else if (role === "content") { 
     if (contentTheme) { 
      $this.addClass("ui-body-" + (contentTheme)); 
     } 

     // Add ARIA role 
     $this.attr("role", "main"); 
    } 
}); 
}); 

})(jQuery); 

의 .js

<a href="#" data-rel="back" data-role="button" data-inline="true" data-transition="myTransition" data-direction="reverse">Back</a> 

.html 중에서 :

이

난 뒤 버튼있는 코드

이 전이하다 난 만든

function myTransitionHandler(name, reverse, $to, $from) { 

var deferred = new $.Deferred(), 
    reverseClass = reverse ? " reverse" : "", 
    viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, 
    doneFunc = function() { 

     $to.add($from).removeClass("out in reverse " + name); 

     if ($from && $from[ 0 ] !== $to[ 0 ]) { 
      $from.removeClass($.mobile.activePageClass); 
     } 

     $to.parent().removeClass(viewportClass); 

     deferred.resolve(name, reverse, $to, $from); 
    }; 

$to.animationComplete(doneFunc); 

$to.parent().addClass(viewportClass); 

if ($from) { 
    $from.addClass(name + " out" + reverseClass); 
} 
$to.addClass($.mobile.activePageClass + " " + name + " in" + reverseClass); 

return deferred.promise(); 
} 

// Make our transition handler public. 
$.mobile.transitionHandlers["myTransition"] = myTransitionHandler; 

뒤로 버튼을 클릭 할 때 화면을 항상 왼쪽에서 오른쪽으로 이동할 수 있도록 추가 할 수있는 코드가 있습니까?

Answer 1

jQuery 모바일에서는 전환 (seen here)을 지정한 다음 data-direction="reverse" 속성을 지정할 때 그 반대로 프로그래밍 할 수 있습니다.

나는 또한 뒤로 버튼 (심지어 브라우저의 뒤로 버튼)이 '앞으로 행동'전환을 트리거 할 수있는이 동작을 경험했습니다. 나는 이것을 바꾸거나 버튼을 항상 같은 방향으로 움직이게하는 방법이 아니다.

그러나 setting up your own transitions에는 약간의 약속이있을 수 있습니다. 그렇게하지 않으면 jQuery 모바일이 앞으로 또는 뒤로 이동한다고 생각하든, data-direction 속성과 관계없이 한 방향으로 만 이동하는 전환을 적용 할 수 있습니다.

.my.slide.out { 
    -webkit-transform: translateX(-100%); 
    -moz-transform: translateX(-100%); 
    -webkit-animation-name: slideouttoleft; 
    -moz-animation-name: slideouttoleft; 
} 
.my.slide.in { 
    -webkit-transform: translateX(-100%); 
    -moz-transform: translateX(-100%); 
    -webkit-animation-name: slideouttoleft; 
    -moz-animation-name: slideouttoleft; 
} 

그런 다음 전환을 뒤로 버튼에 적용하십시오.