3

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 を使用しています

4

1 に答える 1

3

ページの非表示/表示時に遷移クラスがアクティブになるため、ページ遷移はタブでは機能しません。独自のトランジションを作成したり、サードパーティの CSS トランジションを使用したり、jQM のデフォルトのものを使用したりできます。

tabbeforeactivateまず、イベントをリッスンする必要があります。このイベントは、前のパネル ( ) と次のパネル ( )uiのデータを含むオブジェクトを省略します。必要なのは、アニメーションクラスをに追加し、アニメーションが終了したら、 を使用してAnimation Endを1 回だけバインドして削除することだけです。ui.oldPanelui.newPanelui-newPanel .one()

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

デモ- Danedenによるカスタム アニメーション

デモ- jQM のデフォルト遷移

于 2014-02-24T02:08:15.780 に答える