7

我正在使用 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 等效项。

4

3 回答 3

2

看看这个页面，http://jsfiddle.net/nachiket/mDTK2/show/light/
适合我。

单击（第 1 页）显示从左到右的转换，& 后退按钮（第 2 页）显示从右到左的转换。

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

于 2012-07-12T19:21:51.790 回答
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：

文件：

更新

从你的评论

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

文件：

引用：

Properties:
     reverse (boolean,  default:    false) Decides what direction the transition will run when showing the page.
于 2012-07-18T14:01:20.273 回答
0

找到了。

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

这是他用的。删除那条线就可以了。

$.mobile.changePage.defaults.transition = "none";
于 2012-07-30T15:18:09.990 回答