HTML and CSS Reference
In-Depth Information
Gehen Sie dann zur index.html des aktuellen Beispiels und schreiben Sie die folgenden
Zeilen in den head -Bereich unterhalb der Zeile, mit der wir die phonegap.js -Datei in den
Code laden:
<script type "text/javascript" charset "utf 8">
// Menüleiste einblenden
document.addEventListener("menuKeyDown", function(){
alert('Jemand hat den Menü Button angetippt!')
}, false);
// Warten, bis PhoneGap geladen ist
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
}
</script>
Bei der iOS-Entwicklung mit PhoneGap haben Sie bereits das Event deviceready
kennengelernt, das die JavaScript-Funktion onDeviceReady
aufruft, sobald PhoneGap komplett geladen ist. Das Event
menuKeyDown ist ähnlich aufgebaut. Sobald ein Benutzer das
Menüfeld oder die Menütaste auf einem Android-Gerät antippt,
wird die definierte Funktion ausgeführt. In diesem Fall ist es
einfach eine native Meldungsbox.
Somit können wir zumindest feststellen, ob der Benutzer die Menütaste gedrückt hat,
und eine entsprechende Funktion ausführen. Wenn wir uns sicher sind, dass unsere
Android-Anwendung nicht über die vertikale Bildschirmgröße hinausgeht, können Sie
sich auch mit diesem einfachen Skript behelfen, das auf Menütastendruck ein CSS-
Overlay anzeigt und es bei nochmaligem Druck wieder verschwinden lässt.
Im head -Bereich definieren Sie zusätzliches CSS für die Box, in der das Menü dargestellt
werden soll:
<style type "text/css">
#menuoverlay {
background color:rgba(255, 255, 255, 0.9);
border:2px solid;
border color:#736d73;
left:0px; bottom:0px; width:100%; height:100px;
z index:99;
visibility:hidden;
}
</style>
Weisen Sie das CSS der ID menuoverlay zu, und wählen Sie eine weiße Hintergrund-
farbe mit 10 % Transparenz. Der Rand soll in einer dunkelgrauen Farbe erscheinen, und
als Position wurde die linke untere Ecke gewählt, von der aus die 100 Pixel Höhe
berechnet werden.
Search WWH ::




Custom Search