數據轉換效果不適用於製表導航jquery mobile

我嘗試在我的jquery-mobile頁面上爲我的製表導航帶來一些效果，但看起來數據轉換參數不能與製表符導航結合使用。數據轉換效果不適用於製表導航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移動1.4.0

來源

2014-02-23 Kingalione

頁面轉換不是標籤過渡類激活工作隱藏/顯示頁面時。您可以創建自己的轉換，使用第三方CSS轉換或使用jQM默認轉換。

首先，您需要聽tabbeforeactivate事件。該事件省略了包含以前（ui.oldPanel）和下一個面板（ui.newPanel）的數據的ui對象。您只需要將動畫類添加到ui-newPanel，並在動畫結束後通過綁定將其刪除。動畫結束一次性僅使用.one()。

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

Demo - 自定義動畫由Daneden

Demo - JQM默認過渡

來源

2014-02-24 02:08:15 Omar

的最佳解決方案的感謝，但我在哪裏可以找到工作動畫類此列表？我用jqm搜索，但找不到任何東西。 – Kingalione

@Kingalione爲JQM http://demos.jquerymobile.com/1.4.1/transitions/爲第三方下，選中第一個演示的鏈接。 – Omar

數據轉換效果不適用於製表導航jquery mobile

回答

相關問題