javascript - 如何在幻灯片切换时添加 'Back'参数？

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 的转换就像一个魅力，页面从右到左加载。 但如何应用“滑回”转换使#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 中添加了一个名为 data-back 的新属性，如果您想要反向幻灯片转换，则将其设置为 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;
    }
};

请记住将该属性添加到您的链接中:

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