HTML and CSS Reference
In-Depth Information
<title>Oldtimer Spiering</title>
<! jQuery direkt von Google Code einbinden >
<script type "text/javascript"
src "http://www.google.com/jsapi"></script>
<script type "text/javascript"> google.load("jquery", "1.3.2"); </script>
<! jQTouch einbinden >
<script type "text/javascript" src "jqtouch/jqtouch.js"></script>
<link type "text/css" rel "stylesheet" media "screen"
href "jqtouch/jqtouch.css">
<link type "text/css" rel "stylesheet" media "screen"
href "themes/jqt/theme.css">
<! jQTouch initialisieren >
<script type "text/javascript">
var jQT $.jQTouch({ });
</script>
</head>
<body>
<div id "home">
<div class "toolbar">
<h1>Oldtimer</h1>
<a href "#kontakt" class "button flip">Kontakt</a>
</div>
</div>
<div id "kontakt">
<div class "toolbar">
<h1>Kontakt</h1>
<a href "#home" class "button back">Zurück</a>
</div>
</div>
</body>
</html>
Wenn Sie dieses Beispiel ausführen, sollten Sie folgendes Verhalten bereits sehen können:
Die Webanwendung besitzt eine Kopfzeile mit einem Button, der im
div
-Container der
Klasse
toolbar
durch einen einfachen
a href ""
-Verweis definiert wurde. Um den
Button auch als Button erscheinen zu lassen, muss dem
a
-Tag die Klasse
button
zuge-
wiesen werden.
So etwas kannten Sie wahrscheinlich bisher nur von nativen iPhone-Anwendungen.
Nach Antippen von
Kontakt
dreht sich der Bildschirm zur Kontaktseite. Die Animation
wird durch die Angabe von
flip
innerhalb der Klassendefinition des
a
-Tags erreicht.
