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

teren Hering« auf, wechselt in die Rubrik Menü und kommt dann auf die Idee, die
WebApp zum Startbildschirm hinzuzufügen. Da jQuery Mobile bei einem Seiten-
wechsel auch automatisch die Adressleiste um die neue HTML-Datei erweitert, ver-
wendet der Direktlink vom Home-Bildschirm somit auch diese Adresse (z. B. http://
www.zumheiterenhering.de/menue.html ).

Im weiteren Verlauf werden Sie die Startseite ( index.html ) für die anderen Seiten dup-
lizieren, umbenennen und den Inhalt austauschen. Deswegen sollte der head -Bereich
schon vorher korrekt gesetzt sein. Ergänzen Sie den head -Bereich um folgende Java-
Script-Verlinkungen für die spätere Verwendung in der Rubrik Anfahrt:

8

<script src="js/jquery.ui.map.full.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("maps", "3", {'other_params':'sensor=true'});
</script>

Listing 8.9 Die Einbindung der Google Maps API mit Google Load

Wir gehen den Code Schritt für Schritt durch, wenn Sie die Rubrik Anfahrt anlegen.
Doch dazu später mehr. Kaffee ausgetrunken? Dann kann es ja weitergehen.

8.1.4 À la carte - die Menüseite

Herr Mattis Mattisen ist stolz auf seine breit gefächerte Menüauswahl. Ob großer
Fisch oder kleiner Fisch, ob gebraten oder frittiert - beim »heiteren Hering« wird
jeder satt. Die Menükarte ist, neben dem Preis, das entscheidende Kriterium für die
Auswahl eines Restaurants. Sie haben die hervorragende Idee, das Menü in einer Art
Liste auszugeben (Abbildung 8.8). Diese Liste beinhaltet ein Bild des Gerichts, dessen
Namen und eine kurze Beschreibung. Wählt der Benutzer ein Gericht aus, so schiebt
sich von der Seite die Detailseite hinein. Dieses Master-Detail-Prinzip kennen Sie
bereits aus nativen Apps, wie z. B. der Kontakte-App auf dem iPhone.

Duplizieren Sie nun als Erstes Ihre Startseite ( index.html ), und benennen Sie diese in
menue.html um. Anschließend entfernen Sie den Inhalt des content -Containers. Sie
sollten die id des page -Containers zusätzlich noch in menue abändern. Ihr Code inner-
halb des body -Bereichs sieht nun folgendermaßen aus:

<!-- Menue Seite -->
<div data-role="page" id="menue" >
<div data-role="header" data-theme="b">
<a href="index.html" data-role="button" data-icon="home" data-iconpos=
"notext" data-position="fixed" data-tap-toggle="false">Dieser Text wird
nicht angezeigt</a>