CODEWITHSUNDEEP
jquery-mobile
Ryan Haney
Ryan Haney

Reputation: 510

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

I created a jsfiddle that enables tabs using the navbar without changing the url hash: http://jsfiddle.net/ryanhaney/eLENj/

1) If I click on the "page 1" link from the home page, followed by clicking the "back" button, I get the reverse slide animation as expected.

2) If I click on the "page 1" link from the home page, then click on "page 2" or "page 3" (in the footer navbar), then click on the "back" button....there is no transition.

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

How can I enforce the transition for elements with data-rel="back"?

NOTE: In the jsfiddle example, it is desired behavior to keep tab selections out of the navigation history. The back button should go back home regardless of which tab you are on. There should be no transition between tabs. The jsfiddle example already provides this behavior.

Upvotes: 2

Views: 15402

Answers (2)

Phill Pafford
Phill Pafford

Reputation: 85308

I think I got it:

Had to reset the changePage default transition value

$("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>​

Upvotes: 3

Sologoub
Sologoub

Reputation: 5352

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

Seems to be the issue with "transition: "none",". When I remove it or change it to anything, it works as you expect it: http://jsfiddle.net/PQsyP/

Upvotes: 0

Related Questions