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

<div data-role="footer" data-id="footernav" data-tap-toggle="false" data-
position="fixed" data-theme="b">
</div><!-- /footer -->
Neben dem Wert footer für das Attribut data-role legen Sie noch weitere Attribute
fest, die die Eigenschaften der Fußzeile verändern:
data-tap-toggle="false"
Dieser Wert bestimmt, dass die Kopf- und Fußzeile bei einem Klick oder einer
Berührung an irgendeiner Stelle der WebApp nicht ausgeblendet wird. Wenn Sie
eine WebApp gestalten, bei der es wichtig ist, dass so viel Bildschirmfläche wie
möglich sichtbar ist (wie z. B. bei einer Fotogalerie-App), können Sie dieses Attribut
weglassen. Ein Beispiel finden Sie unter http://jquerymobile.com/demos. Klicken
Sie einfach auf eine leere Stelle innerhalb der Seite, und die Fußzeile wird ausge-
blendet.
data-position="fixed"
Über den Wert fixed wird festgelegt, dass die Fußleiste immer über dem Inhalt
liegt und sich beim Scrollen nicht mitbewegt. Wenn Sie diese Definition weglas-
sen, wird die Fußleiste einfach an das untere Ende der Seite angesetzt. Für die
WebApp des »heiteren Herings« wäre dies allerdings schlecht, da im schlimmsten
Fall bei viel Inhalt die Fußleiste, und damit auch die Navigationsleiste, nicht sicht-
bar wären.
data-theme="b"
jQuery Mobile kommt von Haus aus mit drei verschiedenen Stilen ( Themes ) für
die Gestaltung aller Elemente daher, die sich hauptsächlich in der Farbigkeit
unterscheiden. Sie können auch eigene Themes entwerfen und einsetzen, doch
dazu später mehr. In diesem Fall verwenden Sie das Theme b , bei dem alle Ele-
mente in einen schönen Blauton getaucht werden.
Im Moment ist die Fußleiste nicht sichtbar, weil sie noch keinen Inhalt enthält. Dies
ändern Sie nun mit dem Einsatz der Navigationsleiste.
Die Navigationsleiste innerhalb der Fußzeile
jQuery Mobile beinhaltet bereits vordefinierte Stile für Navigationsleisten. Dies ist
praktisch, weil es Ihnen im Endeffekt eine Menge Zeit bei der Gestaltung spart.
In einer Navigationsleiste werden maximal fünf Elemente in einer Reihe angezeigt.
Übersteigen sie diese Zahl, so wird die Navigationsleiste in zwei Zeilen ausgeben. Das
Schöne ist, dass die Buttons automatisch auf die verfügbare Bildschirmbreite skaliert
werden. So wird die verfügbare Fläche immer optimal ausgenutzt. Auch die Navigati-
onsleiste legen Sie über das data-role -Attribut fest. Der Wert hierfür heißt navbar .