jQuery Mobile: data-rel = "back" + data-transition не работает? - PullRequest
Новая
       1

jQuery Mobile: data-rel = "back" + data-transition не работает?

2 голосов
/ 17 февраля 2012

Я создал jsfiddle, который включает вкладки с помощью панели навигации без изменения хеша URL: http://jsfiddle.net/ryanhaney/eLENj/

1) Если щелкнуть ссылку «страница 1» на домашней странице, а затем нажать кнопку «назад», я получу анимацию обратного слайда, как и ожидалось.

2) Если я нажму на ссылку «страница 1» на домашней странице, затем нажмите «страница 2» или «страница 3» (в нижней части панели навигации), а затем нажмите кнопку «назад» ... нет перехода.

Если я буду следовать сценарию № 2 после изменения вызова «$ .mobile.changePage» в javascript jsfiddle для использования перехода, отличного от «none», кнопка возврата использует тот же переход.

Как применить переход для элементов с data-rel = "back"?

ПРИМЕЧАНИЕ. В примере с jsfiddle желательно не использовать выбор вкладок в истории переходов. Кнопка «Назад» должна вернуться домой независимо от того, на какой вкладке вы находитесь. Не должно быть никакого перехода между вкладками. Пример jsfiddle уже обеспечивает такое поведение.

Ответы [ 2 ]

3 голосов
/ 17 февраля 2012

Я думаю, что получил:

Пришлось сбросить значение перехода по умолчанию для 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>​
0 голосов
/ 17 февраля 2012 
anchor.bind("click", function () {
$.mobile.changePage(anchor.attr("href"), {
    transition: "none",
    changeHash: false
});
return false;

Кажется, проблема с "transition: "none",".Когда я удаляю или изменяю что-либо, он работает так, как вы ожидаете: http://jsfiddle.net/PQsyP/

...