в jQuery Mobile, как установить переход данных для группы ссылок? - PullRequest
Новая
       1

в jQuery Mobile, как установить переход данных для группы ссылок?

2 голосов
/ 14 июля 2011

Я хотел бы изменить data-transition для всех ссылок в определенных разделах. В документах о переходах на страницы jQuery Mobile (http://jquerymobile.com/test/docs/pages/docs-transitions.html) указывается только способ установки типа перехода для каждого элемента с помощью атрибута.

Я бы предпочел управлять поведением взаимодействия полностью на уровне javascript, а не на контенте. Установка параметра для $ .mobile.changePage () для группы элементов была бы идеальной, но я не смог выяснить, как это сделать.

Пример атрибута jQuery Mobile docs: 

<a href="index.html" data-transition="pop">I'll pop</a>

Если ограничить установку переноса данных атрибутом, было бы здорово, если бы я мог указать переход для родительского элемента ('flip'): 

<ul data-transition="flip">
    <li><a href="page1.html">I'll flip</a></li>
    <li><a href="page2.html">I'll flip too</a></li>
    <li><a href="page3.html">I'll flip as well</a></li>
</ul>
<a href="another_page.html">I'll use the default transition (eg slide)</a>

К сожалению, похоже, что это не так.

В настоящее время мое лучшее решение - добавить специфический для раздела атрибут data-transition для всех ссылок в соответствующем разделе с помощью javascript, но я бы предпочел обработать его более производительным способом. Решение jQuery .attr: 

$(document).ready(function(){
    $('ul a').attr('data-transition', 'flip');
});

Спасибо!

1 Ответ

2 голосов
/ 14 июля 2011

ОБНОВЛЕНО: Реализация намного проще

Live Link:

Я использовал flip вместо pop, чтобы немного показать переходбольше, но просто замените flip на pop.

HTML: 

<div data-role="page" id="page1"> 
    <div data-role="content"> 
        <div class="content-primary">
            <ul data-role="listview" data-theme="c" data-dividertheme="f">
                <li data-role="list-divider">Transition Flip</li> 
                <li><a href="#page1">I'll Flip</a></li>
                <li><a href="#page2">I'll Flip too</a></li>
                <li><a href="#page3">I'll also Flip</a></li>
            </ul>
        </div>
    </div>
</div>
<div data-role="page" id="page2"> 
    <div data-role="content"> 
        <div class="content-primary">
            <ul data-role="listview" data-theme="c" data-dividertheme="f">
                <li data-role="list-divider">Transition Flip</li> 
                <li><a href="#page1">I'll Flip</a></li>
                <li><a href="#page2">I'll Flip too</a></li>
                <li><a href="#page3">I'll also Flip</a></li>
            </ul>
        </div>
    </div>
</div>
<div data-role="page" id="page3"> 
    <div data-role="content"> 
        <div class="content-primary">
            <ul data-role="listview" data-theme="c" data-dividertheme="f">
                <li data-role="list-divider">Transition Flip</li> 
                <li><a href="#page1">I'll Flip</a></li>
                <li><a href="#page2">I'll Flip too</a></li>
                <li><a href="#page3">I'll also Flip</a></li>
            </ul>
        </div>
    </div>
</div>

JS: 

$('a').each(function() {
    $(this).attr('data-transition','flip'); 
});
...