in jQuery Mobile, wie man eine Daten-Übergang für eine Gruppe von Links zu setzen?

Question

Ich möchte den Datenübergang für alle Links in bestimmten Abschnitten ändern. Die Dokumente über jQuery Mobile Seitenübergänge ( http://jquerymobile.com/test/docs/pages/docs-transitions.html ) geben nur an, wie ein Übergangstyp auf der Basis eines einzelnen Elements unter Verwendung eines Attributs festgelegt werden kann.

Ich würde es vorziehen, das Interaktionsverhalten vollständig in der Javascript-Schicht zu verwalten, anstatt den Inhalt. Einstellen einer Option für $.mobile.changePage() für eine Gruppe von Elementen wäre ideal, aber ich habe nicht in der Lage gewesen, herauszufinden, wie das zu tun.

Beispiel für das Attribut jQuery Mobile Docs:

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

Wenn ich den Datenübergang durch ein Attribut festlegen kann, wäre es toll, wenn ich den Übergang auf einem übergeordneten Element ("flip") angeben könnte:

<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>

Leider scheint es so nicht zu funktionieren.

Derzeit ist meine beste Lösung, um die Abschnitt-spezifische Daten-Übergang-Attribut zu allen Links innerhalb des entsprechenden Abschnitts mit Javascript hinzufügen, aber würde es vorziehen, dies in eine leistungsfähigere Weise zu behandeln. jQuery .attr Lösung:

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

Ich danke Ihnen!

Answer 1

AKTUALISIERT: Viel einfachere Implementierung

Live-Link:

• http://jsfiddle.net/EwyGL/10/

Ich habe "flip" statt "pop" verwendet, um den Übergang etwas deutlicher zu machen, aber ersetzen Sie einfach "flip" durch "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'); 
});