jQuery Mobile：data-rel = "back" + data-transitionは機能しませんか？

Question

私は、URLのハッシュを変更せずにナビゲーションバーを使用して、タブを有効にしjsfiddle作成：私は「戻る」ボタンをクリックすることで、その後のホーム・ページから「ページ1」のリンク、をクリックすると、私は、http://jsfiddle.net/ryanhaney/eLENj/

1）期待どおりの逆スライドアニメーションを取得します。

2）ホームページから「ページ1」リンクをクリックし、「ページ2」または「ページ3」（フッターナビバーにある）をクリックし、「戻る」ボタンをクリックします。 ..遷移はありません。

jsfiddle javascriptの "$ .mobile.changePage"呼び出しを "none"以外の遷移を使用するように変更した後、シナリオ＃2を実行すると、戻るボタンは同じ遷移を使用します。

data-rel = "back"の要素の遷移を強制するにはどうすればよいですか？

注：jsfiddleの例では、ナビゲーション履歴からタブ選択を保持することが望ましい動作です。戻るボタンはあなたがいるタブに関係なく家に帰るべきです。タブ間に遷移はないはずです。 jsfiddleの例はすでにこの動作を提供しています。

Answer 1

私はそれを得たと思う：

• http://jsfiddle.net/E86M9/3/

はchangePageのデフォルト遷移値をリセットするために持っていた

$("a[data-role=tab]").each(function() { 
    var anchor = $(this); 
    anchor.bind("click", function() { 
     $.mobile.changePage(anchor.attr("href"), { 
      transition: "none", 
      changeHash: false 
     }); 
     return false; 
    }); 
}); 

$("div[data-role=page]").bind("pagebeforeshow", function (e, data) { 
    $.mobile.silentScroll(0); 
    $.mobile.changePage.defaults.transition = 'slide'; // reset default here 
});​ 

HTML

<div id="home" data-role="page"> 
    <div data-role="header"> 
     <h1>Home</h1> 
    </div> 
    <div data-role="content"> 
     <p> 
      <a href="#page-1">Page 1</a> 
     </p> 
    </div> 
</div> 

<div id="page-1" data-role="page"> 
    <div data-role="header"> 
     <a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a> 
     <h1>Page 1</h1> 
    </div> 
    <div data-role="content"> 
     <p>Page 1 content</p> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#page-1" data-role="tab" data-icon="grid" class="ui-btn-active">Page 1</a></li> 
       <li><a href="#page-2" data-role="tab" data-icon="grid">Page 2</a></li> 
       <li><a href="#page-3" data-role="tab" data-icon="grid">Page 3</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

<div id="page-2" data-role="page"> 
    <div data-role="header"> 
     <a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a> 
     <h1>Page 2</h1> 
    </div> 
    <div data-role="content"> 
     <p>Page 2 content</p> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#page-1" data-role="tab" data-icon="grid">Page 1</a></li> 
       <li><a href="#page-2" data-role="tab" data-icon="grid" class="ui-btn-active">Page 2</a></li> 
       <li><a href="#page-3" data-role="tab" data-icon="grid">Page 3</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

<div id="page-3" data-role="page"> 
    <div data-role="header"> 
     <a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a> 
     <h1>Page 3</h1> 
    </div> 
    <div data-role="content"> 
     <p>Page 3 content</p> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#page-1" data-role="tab" data-icon="grid">Page 1</a></li> 
       <li><a href="#page-2" data-role="tab" data-icon="grid">Page 2</a></li> 
       <li><a href="#page-3" data-role="tab" data-icon="grid" class="ui-btn-active">Page 3</a></li> 
      </ul> 
     </div> 
    </div> 
</div>​ 

Answer 2

anchor.bind("click", function() { 
$.mobile.changePage(anchor.attr("href"), { 
    transition: "none", 
    changeHash: false 
}); 
return false; 

と思われる"transition: "none","です。私はそれを削除するか何かにそれを変更すると、それはあなたがそれを期待どおりに動作します：http://jsfiddle.net/PQsyP/