WebApps mit Frameworks entwickeln - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 295

Zu guter Letzt folgt der Code, der die spezifischen jQuery-Mobile-Funktionen bereit-
stellt:

<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-
rc.1.min.js"></script>

Das war es schon. Jetzt widmen Sie sich dem Inhalt.

Seiten in jQuery Mobile

8

Jedes jQuery-Mobile-Projekt, wie jede Website auch, ist unterteilt in Seiten, wie z. B.
Kontakt, Profil und Leistungen. Seitenwechsel werden von jQuery Mobile auto-
matisch animiert. Sie definieren eine Seite in jQuery Mobile mithilfe eines speziellen
div -Containers, der folgendermaßen aufgebaut ist:

<div data-role="page" id="startseite">
<div data-role="content">
</div><!-- /content -->
</div><!-- /page -->

Durch das Attribut data-role mit dem Wert page teilen Sie jQuery Mobile mit, dass es
sich hierbei um eine Seite handelt. Zusätzlich vergeben Sie eine eindeutige id mit
dem Wert startseite , um Sie später eindeutig zuordnen zu können.

Innerhalb des div -Containers befindet sich ein weiterer Container mit dem Wert con-
tent für das Attribut data-role . Generell werden innerhalb einer jQuery-Mobile-
WebApp sämtliche Inhaltstypen und Definitionen über das Attribut data-role fest-
gelegt. Dies wird Ihnen also noch häufiger begegnen.

Den Inhalt einer Seite platzieren Sie innerhalb des content -Containers.

Alles in eine Seite?
Sie haben zwei Möglichkeiten, Ihre Seite innerhalb einer jQuery-WebApp zu organi-
sieren. Entweder Sie legen für jede neue Seite auch eine neue HTML-Datei an, oder
Sie definieren alle Seiten innerhalb einer HTML-Datei. Sie können dabei so viele Sei-
ten (div-Container mit dem Wert page des data-role-Attributs), wie Sie möchten, in
einer HTML anlegen. Aus Gründen der Übersichtlichkeit empfehlen wir aber, für
jede Seite auch eine neue Datei anzulegen. Bei komplexen Projekten können Seiten
recht umfangreich werden, weswegen eine Trennung über verschiedene Dateien
letzten Endes übersichtlicher ist.