Question

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

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

当我运行该方法时，转换效果很好但是当我点击浏览器的返回按钮时，我看不到反向转换。

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

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

更新似乎看到data-rel =“back”通过<a> - 标签 BUT 定义了“orginary links”的技巧我需要的是调用$.mobile.changePage()函数时的等效JavaScript。

Answer 1

查看此页面http://jsfiddle.net/nachiket/mDTK2/show/light/
和我一起工作。

单击（第1页）显示从左到右的过渡，＆amp;后退按钮（第2页）显示从右向左的过渡。

来源：http://jsfiddle.net/nachiket/mDTK2/
如果工作不正常，请分享您的浏览和其他详细信息如果示例工作正常，但不是您的代码，请使用jsfiddle突出显示您的问题，这样我就可以检查并更新代码/答案。

Answer 2

对于您希望进行反向转换的链接，您可以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.

Answer 3

找到它。

我们的一位开发人员全局关闭了所有返回转换，因此难怪它不起作用。

这就是他所使用的。删除该行就可以了。

$.mobile.changePage.defaults.transition = "none";

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

3 个答案: