Как добавить параметр "Назад" при переходе между слайдами?
Я использую 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>