定义页面更改之间的返回转换

Defining a return-transition between page changes

本文关键字：返回 转换 之间 定义      更新时间：2023-09-26

我正在使用jQueryMobile的$.mobile.changePage(...)方法切换到项目中的其他页面。

$.mobile.changePage("#foo", {
 transition:"slide"
});

当我运行该方法时，过渡工作正常，但是当我点击浏览器的返回按钮时，我看不到反向过渡。

我尝试了 http://jquerymobile.com/test/docs/api/methods.html 中描述的一些参数，但没有运气。

特别是设置reverse:true只是在前进到目标页面时反转了过渡，但是当我点击后退按钮时仍然没有过渡。

更新：似乎看到 data-rel="back" 可以解决通过 <a> -tag 定义的"原始链接"，但我需要的是调用 $.mobile.changePage() 函数时的 JavaScript 等效项。

看看这个页面，http://jsfiddle.net/nachiket/mDTK2/show/light/
对我很好。

单击（在第 1 页上）显示从左到右的过渡

，返回按钮（在第 2 页上）显示从右到左的过渡。

资料来源：http://jsfiddle.net/nachiket/mDTK2/
如果它不能正常工作，请分享您的浏览和其他详细信息。
如果示例工作正常，但不是您的代码，请制作一个 jsfiddle 突出显示您的问题，以便我可以检查和更新代码/答案。

对于您想要进行反向过渡的链接，您可以将data-direction="reverse"与data-rel="back"

一起使用

例：

<div data-role="page" >
    <div data-role="header"><h3> Header </h3> </div>
    <div data-role="content" >    
        <a href="#page2" data-role="button" data-transition="slide">Page 2</a>
    </div>
</div>
<div data-role="page" id="page2">
    <div data-role="header"><h3> Header </h3> </div>
    <div data-role="content" >    
        <a href="#" data-rel="back" data-role="button" data-direction="reverse" >Back</a>
    </div>
</div>​

jsFiddle：

  • http://jsfiddle.net/GEDcF/

文档：

  • http://jquerymobile.com/demos/1.1.1/docs/api/data-attributes.html

更新

从您的评论 

"Yeah, but how do I do that with the JavaScript function $.mobile.changePage()?"

文档：

  • http://jquerymobile.com/demos/1.1.1/docs/api/methods.html

报价：

Properties:
     reverse (boolean,  default:    false) Decides what direction the transition will run when showing the page.

找到了。

我们的一位开发人员在全球范围内关闭了所有退货转换，因此难怪它不起作用。

这就是他使用的。删除该行起到了作用。

$.mobile.changePage.defaults.transition = "none";
相关文章：