我尝试为我的jquery-mobile页面上的标签导航带来一些效果，但是看起来data-transitions参数不能与标签导航结合使用。
我的代码如下所示：
<div data-role="header" data-theme="a" id="header">
<h1>Mainpage</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="tabs" id="tabs" >
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a id="lblTab1" href="#location" data-ajax="false" class="ui-btn-active" data-icon="search" data-transition="pop">search</a></li>
<li><a id="lblTab2" href="#product" data-ajax="false" data-icon="location" data-transition="pop">product</a></li>
</ul>
</div>
<div id="location" class="ui-body-d ui-content" > content </div>
<div id="product" class="ui-body-d ui-content" > content2 </div>
</div>
</div>
</div>
那么如何在导航栏上带来一些效果呢？
我使用jquery-mobile 1.4.0
页面过渡在选项卡上不起作用，因为隐藏/显示页面时会激活过渡类。您可以创建自己的过渡，使用第三方CSS过渡或使用jQM默认过渡。
首先，您需要听tabbeforeactivate事件。此事件忽略了一个ui对象，该对象包含上一个（ui.oldPanel）和下一个面板（ui.newPanel）的数据。所有你需要的是添加动画类，ui-newPanel并通过结合删除它们一旦动画结束动画结束 一次只能使用.one()。
$("#tabs").on("tabbeforeactivate", function (e, ui) {
$(ui.newPanel)
.addClass("animation")
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$(this).removeClass("animation");
});
});
演示-jQM默认转换
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句