jQuery Mobile mit mehreren Seiten

Die bisherigen Beispiele zeigten immer eine Seite, besser gesagt ein mit data-role="page" gekennzeichnetes Element. Mit so einer Einzelseite kommt man schnell an Platzgrenzen, auch wenn man die von jQuery Mobile bereitgestellten Möglichkeiten mit Grids und einklappbaren Strukturen nutzt. Doch zum Glück unterstützt das jQuery-Plugin auch Multiseiten-Websites.

Multiseiten - viele in einer

Dir erste Ansatz ist eigentlich ganz einfach: innerhalb eines HTML-Dokumentes werden mehrere data-role="page" angelegt. Dabei sind lediglich 2 Dinge wichtig:

• Jede data-role="page" bekommt eine eindeutige ID
• Innerhalb jeder data-role="page" werden die bereits ganz zu Anfang beschriebenen Strukturen zu header, content und footer festgelegt

Daneben habe ich aber noch einige weitere Veränderungen vorgenommen. Damit man zwischen den Seiten navigieren kann, habe ich in der Navigationsleiste (unten) Ankerlinks zu den beiden Seiten eingefügt. Einer dieser Links sieht so aus:

<a href="#seite1" data-transition="slidedown">Seite 1</a>

Mit data-transition wird festgelegt, welche Form der Bildschirmanimation beim Übergang zwischen den beiden Seiten zur Anwendung kommen soll. Dafür stehen die Textkonstanten fade, flip, flow, pop, slide, slidedown, slidefade, slideup, turn und none zur Verfügung. Außerdem wurden in der Kopfzeile ein Zurück-Button und ein Button zur Startseite eingefügt. Diese Buttons werden mit class="ui-btn-left" bzw. class="ui-btn-right" positioniert. Mit rel="external" wird jQuery-Mobil darauf aufmerksam gemacht, dass die Home-seite nicht mit Ajax geladen werden soll. Hier folgt jetzt der gesamte Quellcode des HTML-body

<!-- 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</p>		
    <p>Standard ist fade.</p>
  </div><!-- Ende content -->
  <div data-role="footer" data-position="fixed">
    <div data-role="navbar">
      <ul>
        <li><a href="#seite1" data-transition="slidedown">Seite 1</a></li>
        <li><a href="#seite2" data-transition="slideup">Seite 2</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-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 2</h1>
  </div><!-- Ende header -->
  <div data-role="content">	
    <p>Der Übergang zur Seite 1 erfolgt mit slidedown.</p>		
    <p>Der Übergang zur Seite 2 erfolgt mit slidedup.</p>		
  </div><!-- Ende content -->
  <div data-role="footer" data-position="fixed">
    <div data-role="navbar">
      <ul>
        <li><a href="#seite1" data-transition="slidedown">Seite 1</a></li>
        <li><a href="#seite2" data-transition="slideup">Seite 2</a></li>
      </ul>
    </div><!-- Ende navbar -->
  </div><!-- Ende footer -->
</div><!-- Ende page seite2-->

Demoseite ansehen

Viele Seiten - viele Dateien

Im vorherigen Beispiel mehrere Seiten -also für den Besucher der Website unterschiedliche Seiten- tatsächlich in eine HTML-Seite gesteckt. Es ist aber natürlich auch möglich, logisch getrennte Seiten in verschiedene HTML-Seiten zu stecken. Wenn man diese beiden Methoden gleichzeitig anwenden will, so muss man das Subpage-Widget für jQuery Mobile nutzen.

In mehreren Beispiele habe ich Buttons oder andere Elemente verwendet, die sich optisch vom Standardaussehen unterscheiden. Wie das funktioniert beschreibe unter Theming mit jQuery Mobile