Positionsbestimmung - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 227

position: absolute;
display: none;
}
section.aktiv{
display: block;
}
section#karte {
top: 0;
right: 0;
bottom: 49px;
left: 0;
background-image: url(../bilder/loader.gif);
background-repeat: no-repeat;
background-position: center;
}
h2 {
margin: 0;
padding: 20px 20px 0;
font-size: 17px;
color: #4c566c;
text-shadow: 0 1px 0 #fff;
}

5

Das Stylesheet verändert das Aussehen Ihres HTML-Dokuments so, dass Schriftart
und Farben denen einer typischen mobilen App entsprechen. Die Sektionen werden
»übereinandergelegt« und je nach Situation ausgeblendet. Wenn Sie Ihre App aufru-
fen, werden Sie zunächst nur eine weiße Seite sehen, doch dazu gleich mehr. Die Sek-
tion #karte erhält als Hintergrundbild einen kleinen Ladekreis, der zentriert
angezeigt wird. Dies hat folgende Bewandtnis: Abhängig von der Dauer der Positi-
onsbestimmung und der Ladezeit der Google Maps JavaScript API kann es einige
Sekunden dauern, bis eine Karte angezeigt wird. Um dem Nutzer anzuzeigen, dass
etwas geladen wird, dreht sich der Ladekreis in der Bildschirmmitte. Dieser ver-
schwindet von allein, sobald die Karte geladen ist und den Hintergrund verdeckt. Auf
http://ajaxloader.info können Sie aus verschiedenen Modellen wählen, eigene Far-
ben einstellen und kostenlos herunterladen.

Damit die Karte beim Start der App angezeigt wird, weisen Sie ihr per jQuery die
Klasse aktiv zu:

$('#karte').addClass("aktiv");

Um zwischen den einzelnen Sektionen zu wechseln, benötigen Sie noch eine Sym-
bolleiste im App-Stil.