Geek asks and answers

Data transition effects do not work with navigation on jquery mobile tab

I'm trying to bring some effects for tab navigation on my jquery-mobile page, but it looks like the data jump argument doesn't work in conjunction with tab navigation.

My code is as follows:

<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 can I add some effects to the navigation bar?

I am using jquery-mobile 1.4.0

+3
source share
1 answer

Page transitions do not work on tabs, since transition classes are activated when hiding / showing pages. You can create your own custom transitions, use third-party CSS transitions, or use jQM by default.

-, tabbeforeactivate . ui, (ui.oldPanel) (ui.newPanel). , , - ui-newPanel , Animation End .one().

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

- Daneden

- jQM

+3

More articles:


All Articles