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

zur Startseite führt. Im header -Container finden Sie die Zuordnung eines Themes, in
diesem Fall wieder b , was einer blauen Farbigkeit entspricht. Auch beim Link des
Home-Buttons verwenden Sie verschiedene Attribute, um das Aussehen und Verhal-
ten des Buttons zu beeinflussen:

data-role="button"
Der Link wird als Button dargestellt.

data-icon="home"
Das data-icon -Attribut kennen Sie schon von der Erstellung der Navigationsleiste.
In diesem Fall verwenden Sie den Wert home . So wird ein kleines Haus angezeigt,
was dem Benutzer »Startseite« signalisiert.

8

data-iconpos="notext"
Über das Attribut data-iconpos mit dem Wert notext legen Sie fest, dass lediglich
das Icon, nicht aber der Text angezeigt wird. Dies ist besonders auf kleinen Bild-
schirmen sinnvoll, da der Button und der Titel in der Kopfzeile sonst nicht kom-
plett dargestellt werden könnten.

Eine Liste in jQuery Mobile

Sie gestalten eine Liste in jQuery Mobile wie in jeder anderen HTML5-Webseite über
die Elemente ul und ol . Damit die Liste von jQuery Mobile korrekt formatiert wird,
müssen Sie das altbekannte data-role -Attribut hinzufügen:

<ul id="gerichteliste" data-role="listview">
<li>Ein Element in einer Liste</li>
<li>Ein weiteres Element in einer Liste</li>
</ul>

Über den Wert listview legen Sie fest, dass es sich hierbei um eine Liste handelt, die
von jQuery Mobile gestaltet werden soll. Zusätzlich zum data-role -Attribut weisen
Sie dem ul -Element die id gerichteliste hinzu, um sie so später via JavaScript anzu-
sprechen.

Die Menükarte in einer JSON-Datei auslagern

Wie Sie schon am Anfang des Kapitels festgestellt haben, sind Sie ein fauler Mensch -
jedenfalls was die Programmierung angeht. Zur Erstellung der Menükarte könnten
Sie jeden Listeneintrag nach folgendem Schema von Hand anlegen:

<li>
<a href="detailansicht_nummer1.html">
<img src="bilder/bildDesGerichtes_nummer1.png />
<h3>Titel des Gerichtes Nummer 1</h3>