jQuery Mobile Dialoge

Dialoge können in jQuery-Mobile sein:

• Seiten (oder andere Container) mit data-role="dialog" oder
• ganz gewöhnliche Seiten, die mit data-rel="dialog" im Link aufgerufen werden

Letzteres sieht dann so aus:

<a href="#seite2" data-transition="slideup" data-rel="dialog">Seite 2 als Dialog-Box</a>

Wie beim Aufruf gewöhnlicher Seiten kann auch beim Aufruf eines Dialogs mit data-transition="" angegeben werden, wie sich der Seitenübergang vollziehen soll. Die Textkonstanten für Seitenübergänge: fade, flip, flow, pop, slide, slidedown, slidefade, slideup, turn und none gelten auch für Dialoge. Wenn die als Dialog aufgerufene Seite einen data-role="header" enthält, dann wird im Kopf ein close-Button angezeigt, mit dem der Dialog geschlossen werden kann.

Die voreingestellte Maximalbreite der Dialoge beträgt 500px. Typisch für die Anzeige der Dialoge ist, dass die aufrufende Seite komplett verschwindet.

Dialoge können auch miteinander verkettet werden. Damit meine ich, dass ein Dialog einen weiteren aufrufen kann. Mit dem Schließen geht es jeweils schrittweise durch die einzelnen Seiten zurück.

Dialog-demo ansehen. Abschließend der komplette Quellcode des body-Bereiches der Dialog-Demo-Seite

<!-- Start erste Seite -->
<div data-role="page" id="seite1">
  <div data-role="header" data-position="fixed" data-add-back-btn="true">
    <a href="#" data-icon="back" class="ui-btn-left" data-rel="back">Zurück</a>
    <a href="/" data-icon="home" class="ui-btn-right" rel="external">Home</a>
    <h1>Seite 1</h1>
  </div><!-- Ende header -->
  <div data-role="content">	
    <p>Es gibt die folgenden Textkonstanten für Seitenübergänge: fade, flip, flow, pop, slide, slidedown, slidefade, slideup, turn, none. Diese gelten auch für Dialoge.</p>
<p><a href="#seite2" data-transition="slideup" data-rel="dialog">Seite 2 als Dialog-Box</a>
</p>
    <p>Der Übergang zum Dialog erfolgt mit slideup.</p>
  </div><!-- Ende content -->
  <div data-role="footer" data-position="fixed">
    <div data-role="navbar">
      <ul>
        <li><a href="/" data-icon="home" target="_blank">Home</a></li>
        <li><a href="/themen/jquery-mobile" data-icon="gear" target="_blank">jQuery-Mobile</a></li>
      </ul>
    </div><!-- Ende navbar -->
  </div><!-- Ende footer -->
</div><!-- Ende page seite1-->

<!-- Start zweite Seite -->
<div data-role="page" id="seite2">
  <div data-role="header" data-theme="d">
    <h1>Dialog 1</h1>
  </div>
  <div data-role="content">	
    <p><a href="#seite3" data-transition="flip" data-rel="dialog">Dialog 2 anzeigen</a></p>
    <p>Der Übergang zur Seite 3 erfolgt mit flip.</p>
  </div><!-- Ende content -->
</div><!-- Ende page seite2-->

<!-- Start dritte Seite -->
<div data-role="page" id="seite3">
  <div data-role="header" data-theme="e">
    <h1>Dialog 2</h1>
  </div>
  <div data-role="content">	
    <p>Das ist jetzt der zweite Dialog.</p>		
    <p>Zur hauptseite zurück gelangt man, wenn man jeweils den <strong>Schließen</strong>-Button klickt.</p>		
  </div><!-- Ende content -->
</div><!-- Ende page seite3-->