HTML and CSS Reference
In-Depth Information
Hier wird ein Element mit der ID
test
und dem Label
Testautos
definiert. Diesmal
wird das Label angezeigt, da kein System-Icon im nächsten Feld angegeben wird, son-
dern der Pfad und der Dateiname zu einer PNG-Grafik.
Als Anweisung wird wieder ein
onSelect()
-Event verwendet, allerdings mit der
Angabe, dass jetzt eine HTML-Seite aufgerufen wird und nicht nur eine Meldungsbox.
In unserem Beispiel rufen wir die Datei
index.html
auf - also wieder die Seite, die die
Definitionen für die Navigationsleiste enthält. Würden wir nicht einen besonderen Trick
verwenden, würde sich bei jedem Antippen dieses Elements und dem Neuladen der Seite
eine neue Navigationsleiste auf die andere legen, und zwar so lange, bis der Bildschirm
mit Navigationsleisten gefüllt ist.
Das umgehen wir durch die folgende Angabe, in der es darum geht, die mit den bisheri-
gen JavaScript-Aufrufen definierten Elemente und die Navigationsleiste auch anzuzei-
gen:
if (window.innerHeight 480) {
window.uicontrols.showTabBar();
window.uicontrols.showTabBarItems("toprated", "suche", "test", "anderes");
}
Die Funktionen
window.uicontrols.showTabBar()
und
window.uicontrols.
showTabBarItems()
bewirken also die Anzeige aller vorher festgelegten Elemente - um
genau zu sein, aller Elemente, die bei
window.uicontrols.showTabBarItems()
mittels ihrer ID angegeben wurden. Beide Funktionen werden aber nur aufgerufen,
wenn auf dem Bildschirm noch 480 Bildpunkte an Höhe frei sind. Hätten Sie zwei
Navigationsleisten definiert, würde der verfügbare Bildausschnitt kleiner als 480
Bildpunkte sein, und die Anzeige einer weiteren Navigationsleiste würde durch die
if
-
Bedingung unterbunden.
Jetzt haben Sie sicher gemerkt, dass wir das Beispiel ohne die Statusleiste kopiert haben.
Wenn Sie die schwarze oder graue Statusleiste innerhalb der
Info.plist
-Datei anschalten,
müssen Sie auch den
window.innerHeight
-Parameter verkleinern und auf mindestens
460 Bildpunkte setzen.
Native Kopfzeile
Die von uns verwendete Kopfzeile ist Teil der Webseite und wird beim Scrollen der Seite
aus dem Bildschirm herausgeschoben. Viele native Anwendungen verwenden feste und
statische Kopfzeilen im Zusammenhang mit oder auch ohne Navigationsleiste.
PhoneGap bietet Ihnen ebenfalls die Möglichkeit, eine solche Kopfleiste mit zwei ähnli-
chen JavaScript-Funktionen zu definieren:
window.uicontrols.createToolBar();
window.uicontrols.setToolBarTitle("Anwendungstitel");
Leider ist dieses Element nicht besonders stabil integriert. Insbesondere im Zusammen-
hang mit der Navigationsleiste treten oft Probleme und Inkompatibilitäten auf. Möch-
ten Sie eine feste Leiste am oberen Bildschirmrand mit dem Anwendungstitel verwen-
den, sind die beiden JavaScript-Aufrufe eine gute Möglichkeit. In allen anderen Fällen
empfehlen wir aber, auf HTML- und CSS-Definitionen zurückzugreifen.
