gpt4 book ai didi

jquery-mobile - 数据转换效果不适用于选项卡导航 jquery mobile

转载 作者:行者123 更新时间:2023-12-01 23:59:59 24 4
gpt4 key购买 nike

我尝试为我的 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.oldPanel) 和下一个面板 (ui.newPanel) 数据的 ui 对象。您只需要将动画 类添加到ui-newPanel 并在动画结束后通过绑定(bind)Animation End 一次 仅使用 .one()

$("#tabs").on("tabbeforeactivate", function (e, ui) {
$(ui.newPanel)
.addClass("animation")
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$(this).removeClass("animation");
});
});

Demo - Custom animation by Daneden

Demo - jQM default transitions

关于jquery-mobile - 数据转换效果不适用于选项卡导航 jquery mobile,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21975173/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com