1

我正在使用英特尔的 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 上应用'slide-back' 转换使'cancel' 按钮从左到右加载#login？

我在ui/transition/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);
4

2 回答 2

0

这就是你所追求的吗？loadContent 的第三个参数如果为 true 则从左向右转换，如果为 false 则从右向左转换

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

或者你可以使用

$.ui.goBack();

转到后堆栈上的上一页

于 2014-11-20T10:35:39.793 回答
0

没有办法做到这一点，因为back参数总是被硬编码为 false （实际上是零）。

我编辑了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 中添加了一个名为data-backtrue的新属性，如果您想要反向幻灯片转换，将设置该属性。在调用. goBack_$.ui.loadContent()

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

并记住将属性添加到您的链接：

<a data-back="true" href="#login" class="soc-btn gray-btn left" data-transition="slide">Cancel</a>
于 2014-08-26T22:32:50.970 回答