Как добавить параметр "Назад" при переходе между слайдами?

Я использую AppFramework от Intel и у меня есть этот код:

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

2 ответа

Это то, что вы после? Третий параметр loadContent будет переходить слева направо, если true, и справа налево, если false

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

или вы можете использовать

$.ui.goBack();

перейти на предыдущую страницу на заднем стеке

Там нет никакого способа сделать это, потому что 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 если вы хотите обратный переход слайд. Я также заменяю этот магический ноль для 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>
Другие вопросы по тегам