JQuery Mobile: data-rel = "back" + data-transition does not work?

Question

I created jsfiddle that allows you to use tabs using navbar without changing the hash of the URL: http://jsfiddle.net/ryanhaney/eLENj/

1) If I click the “page 1” link on the main page and then click the “back” button, I get the reverse slide animation as expected.

2) If I click the “page 1” link on the main page, then click “page 2” or “page 3” (in the footer navigation bar), then click the “back” button .... There is no transition.

If I follow script # 2 after changing the call to "$ .mobile.changePage" in jsfiddle javascript to use a transition other than "none", the back button uses the same transition.

How can I provide a transition for elements with data-rel = "back"?

NOTE. In the jsfiddle example, it is advisable to keep tabs from the navigation history. The back button should return home no matter what tab you are on. There should be no transition between tabs. The jsfiddle example already provides this behavior.

Answer 1

I think I get it:

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

If reset, the default transition value for 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; 

There seems to be a problem with "transition: "none"," . When I delete it or change it to anything, it works as you expect: http://jsfiddle.net/PQsyP/