jQuery Mobile：data-rel =「back」+數據轉換不起作用？

Question

我創建了一個的jsfiddle，使使用導航欄標籤不改變URL哈希：http://jsfiddle.net/ryanhaney/eLENj/

1）如果我從主頁單擊頁面中的「第1頁」鏈接，然後點擊「後退」按鈕，我按預期獲得反向幻燈片動畫。 2）如果我從主頁點擊「頁面1」鏈接，然後點擊「頁面2」或「頁面3」（在頁腳導航欄中），然後點擊「返回」按鈕。沒有過渡。

如果我在jsfiddle javascript中更改「$ .mobile.changePage」調用後使用情景＃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/