HTML and CSS Reference
In-Depth Information
Listen und Animationen
Nachdem wir bereits eine Anwendung mit einer Kopfzeile haben, wollen wir ein weite-
res iPhone-typisches Element hinzufügen: Linklisten. Im iWebKit 5-Beispiel haben wir
auf der Startseite eine Reihe von Links angeboten, und das lässt sich mit jQTouch
ähnlich bewerkstelligen. Fügen Sie einfach unterhalb der Kopfzeilendefinition im
home
-
Container den folgenden Code hinzu:
<ul>
<li class "forward"><a href "#angebote">Aktuelle Angebote</a></li>
<li class "arrow"><a href "#repair">Reparaturen</a></li>
<li class "arrow"><a href "#preisrechner">Preisrechner</a></li>
<li class "arrow"><a href "#kontakt">Kontakt</a></li>
</ul>
Damit diese Links auch funktionieren, müssen im Code
div
-Container für weitere
Unterseiten mit den IDs
angebote
,
repair
und
preisrechner
angelegt werden.
Listen werden wie in iWebKit 5 über die Tags
ul
und
li
angelegt. Dabei kann das
li
-
Tag folgende Klassen haben:
•
arrow
- der für iPhone-Links typische Linkpfeil wird verwendet.
•
forward
- ein buttonähnlicher Pfeil wird statt des normalen Linkpfeils verwendet.
Bild 1.27:
Die Startseite unseres Beispiels sieht nun so aus.
Beim Antippen der Links wird ebenfalls eine leichte Animation verwendet: Der aktuelle
Bildschirm rollt zur linken Seite, und die Zielseite wird von der rechten Seite herein-
gescrollt. Sie können das durch die Angabe der folgenden Klassen im
a
-Tag beeinflussen:
Klasse
Beschreibung
<a href="#..." class="slideup">
Die neue Seite wird vom unteren Rand in den Bildschirm
gerollt.
<a href="#..." class="dissolve">
Die alte Seite wird langsamer ausgeblendet.
<a href="#..." class="fade">
Die Seiten werden langsamer aus- und eingeblendet.
