Mobile Designprinzipien - HTML5-Apps fur iPhone und Android - page 33

Die Angabe von rows bezeichnet die maximale Anzahl der dargestellten und erlaubten
Zeilen. Als letztes Form-Element im Beispiel wird mit li class "button" noch eine
Schaltfläche zum Absenden der Daten definiert.

Sie werden vielleicht bemerkt haben, dass ein wichtiges Form-Element fehlt: die An-/
Aus-Schieberegler, die das iPhone aus dem checkbox -Element generiert. Natürlich
unterstützen iWebKit und andere CSS-Frameworks auch dieses Element, allerdings wer-
den diese Schieberegler nicht aus CSS-Rechtecken gezeichnet, sondern es werden
einfach Bilder der Schaltflächen geladen. Diese Bilder reagieren nicht auf die Sprach-
auswahl der Seite und werden - egal ob Sie Ihre Webseite in Deutsch, Englisch oder
einer anderen Sprache verfassen - immer als englisches Bild geladen und dargestellt.

Wenn das kein Problem ist, binden Sie für eine sogenannte Checkbox folgenden Code in
Ihr <form> -Element und untergeordnete ul class "pageitem" -Elemente ein:

<li class "checkbox">
<span class "name">Neuwertig</span>
<input name "zustand" type "checkbox"/>
</li>

Falls Sie Schaltflächen in Deutsch benötigen, kommen Sie nicht darum herum, sie selbst
mit einer Bildbearbeitungssoftware umzugestalten und die folgende Datei im iWebKit-
Framework auszutauschen: Framework/images/checkbox.png . Achten Sie darauf, nicht
die Position oder die Größe der Schaltflächen zu ändern.

1.4.4 jQuery und jQTouch

Wir möchten Ihnen jetzt die wirklich fantastischen Möglichkeiten der JavaScript-
Frameworks jQuery und jQTouch vorstellen. Mithilfe dieser Frameworks lassen sich
ebenfalls iPhone-Seiten erstellen, die nicht nur das vom iPhone bekannte Aussehen
haben, sondern auch von iPhone-Anwendungen bekannte Animationen mit nur
wenigen Zeilen Code ermöglichen. Selbst wenn wir jetzt detailliert auf jQTouch
eingehen, bevorzugen wir bei unseren Beispielen im Buch, möglichst konsistent die eben
vorgestellte CSS-Bibliothek iWebKit 5 zu verwenden.

Der Grund dafür ist einfach: Um Ihnen die Möglichkeiten mit HTML5 näher zu
bringen, brauchen wir keine Effekte in der Benutzeroberfläche, allerdings wollen wir
Ihnen eine gut aufgeräumte und klare UI in den Beispielen bieten. Daher fällt unsere
Wahl im Buch auf iWebKit 5. Falls Ihnen die Möglichkeiten mit jQTouch attraktiver
erscheinen, werden Sie sehen, dass sich alle Beispiele im Buch ganz einfach auf jQTouch
umschreiben lassen.

Das Framework jQuery ist mittlerweile die weltweit am meisten verwendete JavaScript-
Bibliothek. Sie erlaubt es den Programmierern, mit wenig Aufwand umfangreiche
JavaScript-Funktionen beispielsweise zur Navigation in die eigenen Projekte zu integrie-
ren. Während jQuery keine mobilspezifischen Funktionen zur Verfügung stellt, ist
jQTouch komplett auf iPhone und iPod touch ausgerichtet. Das jQTouch-Framework
ist ein Plug-in für jQuery und benötigt diese Bibliothek.