3

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.

My code looks like this:

<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?

I use jquery-mobile 1.4.0

Kingalione
  • 4,237
  • 6
  • 49
  • 84

1 Answers1

3

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.

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 - Custom animation by Daneden

Demo - jQM default transitions

Omar
  • 32,302
  • 9
  • 69
  • 112
  • Great solution thanks, but where can I find a list of working animation classes for this? I searched in jqm but couldn't find anything to that. – Kingalione Feb 24 '14 at 09:08
  • 1
    @Kingalione for JQM http://demos.jquerymobile.com/1.4.1/transitions/ for the 3rd party, check the link next to first demo. – Omar Feb 24 '14 at 09:10