数据转换效果不适用于选项卡导航jQuery Mobile [英] Data-transition effects does not work with tab navigation jquery mobile
问题描述
我尝试为jquery-mobile页面上的标签导航带来一些效果,但是data-transitions参数与标签导航结合使用似乎不起作用.
I try to bring some effects to my tabs navigation on my jquery-mobile page but it looks like that the data-transitions argument does not work combined with a tabs navigation.
我的代码如下:
<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>
那么如何在导航栏上带来一些效果呢?
so how is it possible to bring some effects to the navigation bar?
我使用的是jquery-mobile 1.4.0
I use jquery-mobile 1.4.0
推荐答案
页面过渡在选项卡上不起作用,因为隐藏/显示页面时会激活过渡类.您可以创建自己的过渡,使用第三方CSS过渡或使用jQM默认过渡.
Page transitions don't work on tabs as transition classes are activated when hiding/showing pages. You can create your own transitions, use third party CSS transitions or use jQM default ones.
首先,您需要收听 tabbeforeactivate
事件.此事件将忽略包含上一个(ui.oldPanel
)和下一个面板(ui.newPanel
)的数据的ui
对象.您只需要向ui-newPanel
添加 animation 类,并在动画结束后通过仅使用.one()
绑定 Animation End 一次将其删除.
First, you need to listen to tabbeforeactivate
event. This event omits a ui
object containing data of previous (ui.oldPanel
) and next panel (ui.newPanel
). All you need is to add animation classes to ui-newPanel
and remove them once animation ends by binding Animation End one time only using .one()
.
$("#tabs").on("tabbeforeactivate", function (e, ui) {
$(ui.newPanel)
.addClass("animation")
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$(this).removeClass("animation");
});
});
Demo - jQM default transitions
这篇关于数据转换效果不适用于选项卡导航jQuery Mobile的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!