，如何爲一組鏈接設置數據轉換？

Question

我想更改特定部分中所有鏈接的數據轉換。 jQuery Mobile頁面轉換文檔（http://jquerymobile.com/test/docs/pages/docs-transitions.html）僅指定如何通過使用屬性以每個元素爲基礎設置轉換類型。

我寧願完全管理的交互行爲在JavaScript層，而不是內容。爲一組元素設置$ .mobile.changePage（）的選項將是理想的，但我一直無法弄清楚如何做到這一點。

jQuery Mobile的文檔屬性例如：

<a href="index.html" data-transition="pop">I'll pop</a> 

如果限定於通過屬性設定數據的過渡，這將是巨大的，如果我可以指定父元素（「倒裝」）上的過渡：

<ul data-transition="flip"> 
    <li><a href="page1.html">I'll flip</a></li> 
    <li><a href="page2.html">I'll flip too</a></li> 
    <li><a href="page3.html">I'll flip as well</a></li> 
</ul> 
<a href="another_page.html">I'll use the default transition (eg slide)</a> 

可惜，這似乎並沒有成爲它的工作原理。

目前我最好的解決辦法是在特定的部分數據轉變屬性添加到使用JavaScript的相應部分中的所有鏈接，但我們更希望在一個更高性能的方式來處理這個問題。 jQuery .attr解決方案：

$(document).ready(function(){ 
    $('ul a').attr('data-transition', 'flip'); 
}); 

謝謝！

Answer 1

更新：要容易得多實施

活動鏈接：

• http://jsfiddle.net/EwyGL/10/

我用翻轉而不是彈出來顯示過渡多一點，但只是流行替換翻轉。

HTML：

<div data-role="page" id="page1"> 
    <div data-role="content"> 
     <div class="content-primary"> 
      <ul data-role="listview" data-theme="c" data-dividertheme="f"> 
       <li data-role="list-divider">Transition Flip</li> 
       <li><a href="#page1">I'll Flip</a></li> 
       <li><a href="#page2">I'll Flip too</a></li> 
       <li><a href="#page3">I'll also Flip</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 
<div data-role="page" id="page2"> 
    <div data-role="content"> 
     <div class="content-primary"> 
      <ul data-role="listview" data-theme="c" data-dividertheme="f"> 
       <li data-role="list-divider">Transition Flip</li> 
       <li><a href="#page1">I'll Flip</a></li> 
       <li><a href="#page2">I'll Flip too</a></li> 
       <li><a href="#page3">I'll also Flip</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 
<div data-role="page" id="page3"> 
    <div data-role="content"> 
     <div class="content-primary"> 
      <ul data-role="listview" data-theme="c" data-dividertheme="f"> 
       <li data-role="list-divider">Transition Flip</li> 
       <li><a href="#page1">I'll Flip</a></li> 
       <li><a href="#page2">I'll Flip too</a></li> 
       <li><a href="#page3">I'll also Flip</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

JS：

$('a').each(function() { 
    $(this).attr('data-transition','flip'); 
});