Im zweiten Teil zu jQuery Mobile widmen wir uns der Multipages und der Navigation. Diese Themen sollte sich jeder Mobiler Entwickler bzw. Webentwickler sehr genau anschauen, da es die Grundfunktionen von jQuery Mobile sind.
Mehrere Seiten in einer HTML-Datei
Um mehrere Seiten anzulegen müssen wir nicht viel machen, zu beachten ist aber, dass alle jQuery Mobile Seiten nicht in verschiedenen sondern nur in einer HTML-Datei ist. Um also eine zweite Seite anzulegen müssen wir unsere erste Seite um eine ID erweitern.
<div data-role="page" id=“seite1“>
Nun können wir einfach unsere erste Seite kopieren und sie unter darunter einfügen.
<body>
<div data-role="page" id=“seite1“>
<div data-role="header">
<h1>Willkommen</h1>
</div>
<div data-role="content">
<h2>Inhalt</h2>
<p>Hallo ihr da draußen!</p>
</div>
<div data-role="footer">
<h4>Auf Wiedersehen</h4>
</div>
</div>
<div data-role="page" id=“seite2“>
<div data-role="header">
<h1>Seite 2</h1>
</div>
<div data-role="content">
<h2>Inhalt</h2>
<p>Willkommen auf Seite 2</p>
</div>
<div data-role="footer">
<h4>Und Tschüss</h4>
</div>
</div>
</body>Ruft man jetzt die Seite auf, sieht man nur die erste Seite. Deshalb brauchen wir jetzt noch die Navigation.
Navigieren mit jQuery Mobile
Die Navigation ist simpler als es man sich vielleicht vorstellt. Fangen wir mit einem schnellen Beispiel an.
Wir fügen unserem Content Bereich der ersten Seite und der zweiten Seite ein <a> Element inzu. Das sollte dann ungefähr so aussehen:
<div data-role="page" id=“seite1“>
<div data-role="header">
<h1>Willkommen</h1>
</div>
<div data-role="content">
<h2>Inhalt</h2>
<p>Hallo ihr da draußen!</p>
<a href=“#seite2“>Zur zweiten Seite</a>
</div>
<div data-role="footer">
<h4>Auf Wiedersehen</h4>
</div>
</div>
<div data-role="page" id=“seite2“>
<div data-role="header">
<h1>Seite 2</h1>
</div>
<div data-role="content">
<h2>Inhalt</h2>
<p>Willkommen auf Seite 2</p>
<a href=“#seite1“>zurück zur ersten Seite</a>
</div>
<div data-role="footer">
<h4>Und Tschüss</h4>
</div>
</div>Das Beispiel können wir auch gleich einmal austesten.
Kommen wir nun zu einem komplexeren Beispiel mit der Hilfe unserem ersten richtigen jQuery Mobile Element.
Dafür erstellen wir ein neues DIV Element in unserem Footer. Diesem DIV müssen wir jetzt die richtige data-role geben. In unserem Fall navbar. In diesem DIV kommt eine normale HTML Liste zum Einsatz.
Diese sollte dann so aussehen:
<div data-role="footer">
<ul>
<li><a href=“seite1“ data-icon=“home“></a></li>
<li><a href=“seite2“ data-icon=“back“></a></li>
</ul>
</div>Um unsere Navigation zu verschönern habe ich gleich noch Gebrauch von weiteren jQuery Mobile Attributen gemacht. Das data-icon sagt jQuery Mobile welches Icon angezeigt werden soll. home und back sind aus dem Standard Theme von jQuery Mobile andere Icons können aber auch eingebunden werden.