HTML and CSS Reference
In-Depth Information
zu generieren, erstellen wir mit jQTouch nur eine
index.html
mit verschiedenen
div-
oder
form
-Tags jeweils mit einer eigenen ID im Code:
<body>
<div class "current" id "home">
</div>
<div id "kontakt">
</div>
</body>
Mit diesem Beispiel haben wir zwei leere Seiten innerhalb unserer jQTouch-Webanwen-
dung erstellt. Der
div class "current"
-Parameter ist optional und bezeichnet die
Seite, die als Startseite für die Webanwendung genutzt werden soll. Wird diese Klassen-
zuweisung weggelassen, wird die erste ID nach dem
body
-Tag als Startseite benutzt.
Innerhalb der einzelnen
div
-Container können Sie die Seiten mit eigenem HTML und
CSS gestalten. jQTouch bietet Ihnen aber auch, ähnlich wie iWebKit 5, vorgefertigte
Elemente, die meistens nicht nur besser aussehen, sondern teilweise auch mit einem
bestimmten Verhalten versehen sind.
Als erstes Element werden wir auch in diesem Beispiel die Kopfzeile, also die Toolbar,
wieder in iPhone-gerechtes Styling bringen. Dazu geben wir folgenden Code in den
ersten
div
-Container ein:
<div class "toolbar">
<h1>Oldtimer</h1>
<a href "#kontakt" class "button flip">Kontakt</a>
</div>
Bild 1.23:
Stylische Kopfzeile mit Titel und Button.
Der Titel einer Kopfzeile wird innerhalb eines
h1
-Tags beschrieben. Weiterhin haben Sie
die Möglichkeit, zwei Schaltflächen innerhalb der Kopfzeile zu definieren. Sie werden
einfach innerhalb des
div class "toolbar"
-Containers als Links definiert. Da sich
alle Seiten einer jQTouch-Anwendung innerhalb einer Datei befinden, dürfen Sie keine
externen Links, sondern nur Links zu den anderen
div
-Containern erstellen, die eine
Seite der Webanwendung beinhalten.
Auch wenn wir noch keine Inhalte für die beiden Seiten haben, lassen Sie uns dennoch
das Beispiel mit einer Kopfzeile für den zweiten Container vervollständigen. Der Code
der Beispielanwendung sollte jetzt so aussehen:
<!
Einfaches HTML Beispiel mit jQTouch Einbindung
Markus Spiering
>
<!DOCTYPE>
<html>
<head>
<meta name "layout" content "webkit" />
