我创建了一个jsfiddle,使用导航栏启用标签而不更改url哈希：
http://jsfiddle.net/ryanhaney/eLENj/
1)如果我点击主页上的“第1页”链接,然后单击“返回”按钮,我会按预期获得反向幻灯片动画.
2)如果我点击主页上的“第1页”链接,然后点击“第2页”或“第3页”(在页脚导航栏中),然后点击“后退”按钮….没有过渡.
如果我在更改jsfiddle javascript中的“$.mobile.changePage”调用后使用方案#2以使用“none”以外的转换,则后退按钮使用相同的转换.
如何对data-rel =“back”的元素强制执行转换？
注意：在jsfiddle示例中,需要保持选项卡选择不在导航历史记录中的行为.无论您使用哪个标签,后退按钮都应该返回原位.选项卡之间不应有任何转换. jsfiddle示例已经提供了此行为.
解决方法
我想我明白了：
> http://jsfiddle.net/E86M9/3/
不得不重置changePage默认转换值
$("a[data-role=tab]").each(function () {
var anchor = $(this);
anchor.bind("click",function () {
$.mobile.changePage(anchor.attr("href"),{
transition: "none",changeHash: false
});
return false;
});
});
$("div[data-role=page]").bind("pagebeforeshow",function (e,data) {
$.mobile.silentScroll(0);
$.mobile.changePage.defaults.transition = 'slide'; // reset default here
});
HTML
<div id="home" data-role="page">
<div data-role="header">
<h1>Home</h1>
</div>
<div data-role="content">
<p>
<a href="#page-1">Page 1</a>
</p>
</div>
</div>
<div id="page-1" data-role="page">
<div data-role="header">
<a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a>
<h1>Page 1</h1>
</div>
<div data-role="content">
<p>Page 1 content</p>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#page-1" data-role="tab" data-icon="grid" class="ui-btn-active">Page 1</a></li>
<li><a href="#page-2" data-role="tab" data-icon="grid">Page 2</a></li>
<li><a href="#page-3" data-role="tab" data-icon="grid">Page 3</a></li>
</ul>
</div>
</div>
</div>
<div id="page-2" data-role="page">
<div data-role="header">
<a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a>
<h1>Page 2</h1>
</div>
<div data-role="content">
<p>Page 2 content</p>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#page-1" data-role="tab" data-icon="grid">Page 1</a></li>
<li><a href="#page-2" data-role="tab" data-icon="grid" class="ui-btn-active">Page 2</a></li>
<li><a href="#page-3" data-role="tab" data-icon="grid">Page 3</a></li>
</ul>
</div>
</div>
</div>
<div id="page-3" data-role="page">
<div data-role="header">
<a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a>
<h1>Page 3</h1>
</div>
<div data-role="content">
<p>Page 3 content</p>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#page-1" data-role="tab" data-icon="grid">Page 1</a></li>
<li><a href="#page-2" data-role="tab" data-icon="grid">Page 2</a></li>
<li><a href="#page-3" data-role="tab" data-icon="grid" class="ui-btn-active">Page 3</a></li>
</ul>
</div>
</div>
</div>
