Native Anwendungen erstellen - HTML5-Apps fur iPhone und Android - page 298

Bild 3.62: Die Oldtimer-
Autohaus-Seite-App, für das
iPad optimiert. Die
Navigationsleiste bleibt
statisch, während der Inhalt auf
der rechten Seite scrollbar ist.
Was einfach aussieht, ist relativ umständlich zu programmieren. Vor einigen Jahren
hätte man hierzu HTML-Frames benutzt, heute würde man für die Navigation und den
Inhalt div -Container mit der CSS-Definition position:fixed erstellen. Diese CSS-
Definition wird aber von mobilen Browsern aus guten Gründen nicht unterstützt.
Die im letzten Screenshot gezeigte Navigationsleiste wurde mittels iScroll von Matteo
Spinelli realisiert. Nach dem Einbinden der von ihm erstellten JavaScript-Bibliothek und
den im iPad-Beispiel sichtbaren CSS-Definitionen müssen für die Navigationsleiste und
den Inhaltsbereich nur unterschiedliche div -Container erstellt werden. In unserem
Beispiel verwenden wir für die Leiste:
<div id "sidebar">
<header>Oldtimer Spiering</header>
<nav>
<ul id "navScroller">
<li><b>AktuelleAngebote</b></li>
<li><b>UnsereVWs</b></li>
… und für den Inhaltsbereich:
<div id "content">
<header>Spitzen Oldtimer von VW &amp; Porsche</header>
<article>
<div id "contentScroller" style "background:#424242;">
...
Lesezeichen
http://cubiq.org/iscroll
Hier können Sie den iScroll -Code inklusive einiger Beispiele kostenlos herunterladen.