Question

我正在使用英特尔的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的过渡就像一个魅力，从右到左加载的页面。但是如何应用'slide-back'转换使#register上的'取消'按钮加载#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);

Answer 1

无法执行此操作，因为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添加了一个名为数据后退的新属性，如果您想进行反向幻灯片转换，则会在true上设置该属性。 我还会在调用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>

Answer 2

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

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

或者您可以使用

$.ui.goBack();

转到后台的上一页

如何在幻灯片切换上添加“后退”参数？

2 个答案: