では、リンクグループのデータ遷移を設定する方法は？

Question

特定のセクションのすべてのリンクのデータ移行を変更したいと思います。 jQuery Mobileページ遷移（http://jquerymobile.com/test/docs/pages/docs-transitions.html）のドキュメントでは、属性を使用して要素ごとに遷移タイプを設定する方法のみを指定しています。

私は、コンテンツではなく、JavaScriptのレイヤーでインタラクションの動作を完全に管理したいと考えています。要素のグループに対して$ .mobile.changePage（）のオプションを設定するのが理想的ですが、その方法を理解できませんでした。

jQueryのモバイルドキュメントを例属性：属性によって、データの移行を設定するに限られている場合、私は親要素（「フリップ」）上のトランジションを指定することができれば

<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'); 
});