jQuery-Mobile:data-rel=";“后退”+;数据转换不起作用?
我创建了一个JSFIDLE,它可以在不更改url哈希的情况下使用导航栏启用选项卡: 1) 如果我在主页上单击“第1页”链接,然后单击“后退”按钮,我将获得预期的反转幻灯片动画 2) 如果我点击主页上的“第1页”链接,然后点击“第2页”或“第3页”(在页脚导航栏中),然后点击“后退”按钮……没有转换 如果在将JSFIDLE javascript中的“$.mobile.changePage”调用更改为使用“none”以外的转换后,我遵循场景2,则返回按钮将使用相同的转换 如何对数据为rel=“back”的元素强制转换 注意:在JSFIDLE示例中,将选项卡选择排除在导航历史之外是理想的行为。无论您在哪个选项卡上,后退按钮都应返回主页。选项卡之间不应存在转换。JSFIDLE示例已经提供了这种行为jQuery-Mobile:data-rel=";“后退”+;数据转换不起作用?,jquery-mobile,Jquery Mobile,我创建了一个JSFIDLE,它可以在不更改url哈希的情况下使用导航栏启用选项卡: 1) 如果我在主页上单击“第1页”链接,然后单击“后退”按钮,我将获得预期的反转幻灯片动画 2) 如果我点击主页上的“第1页”链接,然后点击“第2页”或“第3页”(在页脚导航栏中),然后点击“后退”按钮……没有转换 如果在将JSFIDLE javascript中的“$.mobile.changePage”调用更改为使用“none”以外的转换后,我遵循场景2,则返回按钮将使用相同的转换 如何对数据为rel=“bac
anchor.bind("click", function () {
$.mobile.changePage(anchor.attr("href"), {
transition: "none",
changeHash: false
});
return false;
似乎是“转换:”无“,“
的问题。当我删除它或将其更改为任何内容时,它的工作方式与您所期望的一样:我想我得到了它:
$("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
家
第1页
第1页内容
第2页
第2页内容
第3页
第3页内容
something:有趣的是,警报会改变行为。请参阅上面我的注释,因为您的修改在导航历史记录中以某种方式包含了这些选项卡。请查看此提琴:它根据href更改了转换。转换:anchor.attr(“href”)=“第3页”?“淡出”:“无”实际上,当我将转换更改为“淡出”时,如果我从主页转到第1页并单击“上一步”,我将获得预期的默认幻灯片转换。但是,如果我从主页转到第1页到第2页,然后单击“上一步”,则“上一步”转换将变为淡入淡出。奇怪,你是对的。修改JSFIDLE以删除转换。现在默认幻灯片也在选项卡上。将使用它来查看如何将其指定到选项卡。标记为答案。我认为这是URLShistory处理方式中的一个bug。谢谢将此作为错误添加到jQM回购中:
<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>