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

Zusätzlich weisen Sie der Navigationsleiste das Theme b zu. Sie wissen schon, die
Farbe Blau wegen Wasser und so (Abbildung 8.5).

<div data-role="navbar" data-theme="b">
<ul>
<li><a href="menue.html" data-icon="star" data-transition="fade">MENÜ</a>
</li>
<li><a href="anfahrt.html" data-icon="star" data-transition="fade">
ANFAHRT</a></li>
<li><a href="kontakt.html" data-icon="star" data-transition="fade">KONTAKT
</a></li>
</ul>
</div><!-- /navbar -->

8

Listing 8.6 Die Navigationsleiste

Abbildung 8.5 Die Menüleiste mit Sternen als Icons

Innerhalb der Navigationsleiste gestalten Sie die Navigationselemente in Form einer
ungeordneten Liste ul . Jedes Listenelement und der Link innerhalb dessen, werden
automatisch von jQuery Mobile umgestaltet. Schauen Sie sich einen der Links etwas
genauer an. Auch hier finden Sie Attribute und Klassen, die jQuery-Mobile-spezifisch
sind und die wir Ihnen im Folgenden erläutern:

data-icon="star"
Zum Lieferumfang von jQuery Mobile gehören nicht nur Farbdefinitionen, son-
dern auch ein kleines Icon-Set, mit welchem Sie Buttons und Links anreichern
können (Abbildung 8.6). Sie legen ein Icon über das data-icon -Attribut fest. Als
Werte stehen folgende Optionen standardmäßig zur Verfügung: arrow-r , arrow-l ,
arrow-u , arrow-d , delete , plus , minus , check , gear , refresh , forward , back , grid , star ,
alert , info , home , search .

Abbildung 8.6 Die Standard-Icons von jQuery Mobile

data-transition="fade"
Über das data-transition -Attribut können Sie den Effekt konfigurieren, der beim
Seitenwechsel verwendet wird. Neben einer einfachen Überblendung ( fade ), ste-