如何在幻燈片轉換中添加'返回'參數？

我使用英特爾的AppFramework，我有這樣的代碼：如何在幻燈片轉換中添加'返回'參數？

<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>

從#login過渡到#register像一個魅力的作品，由右到左加載頁面。但是如何應用'回退'轉換使#register上的'取消'按鈕加載#login 從左到右？

我看到UI /轉換/ all.js文檔：

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的' 參數到我的代碼？謝謝

這裏的幻燈片過渡的完整代碼：

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

來源

2013-08-28 user2656818

有沒有辦法做到這一點，因爲back參數是硬編碼的總是假的（零，其實）。

我編輯了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; 
    } 
};

我添加了一個新的屬性到HMTL稱爲數據回，這將在true如果你想有一個反向幻燈片切換設置。 當撥打$.ui.loadContent()時，我還替換goBack變量的魔術零點。

//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>

來源

2014-08-26 22:32:50 camolin3

這是你所追求的？從左至右如果真，從右到左，如果假

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

，或者您可以使用

$.ui.goBack();

去前一頁後退堆棧上loadContent的第三個參數將轉換

來源

2014-11-20 10:35:39

如何在幻燈片轉換中添加'返回'參數？

回答

相關問題