2013-08-28 5 views
1

내가 인텔의 AppFramework를 사용하고 있는데이 코드가 있습니다 #login에서슬라이드 전환에 '뒤로'매개 변수를 추가하는 방법?

<div title="welcome" id="login" class="panel" selected="true"> 
<!-- some code here --> 
<a href="#register" class="soc-btn gray-btn left" data-transition="slide">Sign Up</a> 
<!-- some code here --> 
</div 

<div title="register" id="register" class="panel"> 
<!-- some code here --> 
<a href="#login" class="soc-btn gray-btn left" data-transition="slide">Cancel</a> 
<!-- some code here --> 
</div> 

전환 작품 매력을 #register하기를, 페이지는 오른쪽에서 왼쪽에서로드. 'slide-back'전환을 적용하는 방법 #register에 'cancel'버튼을 사용하여 #login을 왼쪽에서 오른쪽으로 로드 하시겠습니까?

Initiate a sliding transition. This is a sample to show how transitions are implemented. 
These are registered in $ui.availableTransitions and take in three parameters.  
@param {Object} previous panel  
@param {Object} current panel  
@param {Boolean} go back  
@title $ui.slideTransition(previousPanel,currentPanel,goBack); 

하지만 어떻게 내 코드에 'GoBack을'매개 변수를 추가 할 :

나는/ UI/전환에 all.js 문서를 보았다? 당신이

여기에 슬라이드 전환의 전체 코드입니다 감사합니다 다음 back 매개 변수 (사실, 제로) 항상 false를에 하드 코딩되어 있기 때문에

(function ($ui) { 

    /** 
    * Initiate a sliding transition. This is a sample to show how transitions are implemented. These are registered in $ui.availableTransitions and take in three parameters. 
    * @param {Object} previous panel 
    * @param {Object} current panel 
    * @param {Boolean} go back 
    * @title $ui.slideTransition(previousPanel,currentPanel,goBack); 
    */ 
    function slideTransition(oldDiv, currDiv, back) { 

     oldDiv.style.display = "block"; 
     currDiv.style.display = "block"; 
     var that = this; 
     if (back) { 
      that.css3animate(oldDiv, { 
       x: "0%", 
       y: "0%", 
       complete: function() { 
        that.css3animate(oldDiv, { 
         x: "100%", 
         time: $ui.transitionTime, 
         complete: function() { 
          that.finishTransition(oldDiv, currDiv); 
         } 
        }).link(currDiv, { 
         x: "0%", 
         time: $ui.transitionTime 
        }); 
       } 
      }).link(currDiv, { 
       x: "-100%", 
       y: "0%" 
      }); 
     } else { 
      that.css3animate(oldDiv, { 
       x: "0%", 
       y: "0%", 
       complete: function() { 
        that.css3animate(oldDiv, { 
         x: "-100%", 
         time: $ui.transitionTime, 
         complete: function() { 
          that.finishTransition(oldDiv, currDiv); 
         } 
        }).link(currDiv, { 
         x: "0%", 
         time: $ui.transitionTime 
        }); 
       } 
      }).link(currDiv, { 
       x: "100%", 
       y: "0%" 
      }); 
     } 
    } 
    $ui.availableTransitions.slide = slideTransition; 
    $ui.availableTransitions['default'] = slideTransition; 
})(af.ui); 

답변

0

것은,이 작업을 수행 할 수있는 방법이 없습니다.

appframework.ui.js의 마지막 줄인 checkAnchorClick()을 편집했습니다. 그것이 말하는

:

//lookup for a clicked anchor recursively and fire UI own actions when applicable 
var checkAnchorClick = function(e, theTarget) { 
     // ... 
     href = theTarget.hash.length > 0 ? theTarget.hash : href; 
     $.ui.loadContent(href, resetHistory, 0, mytransition, theTarget); 
     return; 
    } 
}; 

I했습니다 HMTL에 새로운 속성은 역방향 슬라이드 전환을 원하는 경우 true에 설정됩니다 데이터 다시을,라고 덧붙였다. $.ui.loadContent()을 호출 할 때 변수에 해당 마법 0을으로 바꿉니다.

//lookup for a clicked anchor recursively and fire UI own actions when applicable 
var checkAnchorClick = function(e, theTarget) { 
     // ... 
     href = theTarget.hash.length > 0 ? theTarget.hash : href; 
     var goBack = theTarget.getAttribute("data-back") === "true" ? true : false; 
     $.ui.loadContent(href, resetHistory, goBack, mytransition, theTarget); 
     return; 
    } 
}; 

그리고 remeber 귀하의 링크에 속성을 추가합니다 :

<a data-back="true" href="#login" class="soc-btn gray-btn left" data-transition="slide">Cancel</a> 
0

이 당신이 후에 무엇인가? 거짓

$.ui.loadContent("#Login", false, true, "slide"); 

또는 당신이 다시 스택에 이전 페이지로 이동

$.ui.goBack(); 

를 사용할 수있는 경우는 true, 오른쪽이 왼쪽 경우 왼쪽에서 오른쪽으로 loadContent의 세 번째 매개 변수가 전환됩니다