Question

我尝试在我的jquery-mobile页面上为我的标签导航带来一些效果，但看起来数据转换参数不能与标签导航结合使用。

我的代码如下所示：

<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

Answer 1

页面转换不适用于选项卡，因为隐藏/显示页面时会激活转换类。您可以创建自己的过渡，使用第三方CSS过渡或使用jQM默认过渡。

首先，您需要收听tabbeforeactivate事件。此事件省略了包含先前（ui）和下一个面板（ui.oldPanel）数据的ui.newPanel对象。您只需要将动画类添加到ui-newPanel，并在动画结束后通过仅使用{绑定动画结束 一次来删除它们{1}}。

.one()

Demo - Daneden
自定义动画
Demo - jQM默认转换

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

1 个答案: