Auslesen des Bewegungssensors mit JavaScript - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 247

Um die Ästhetik eines echten Polaroids nachzuahmen, benötigen Sie zunächst einen
div -Container, der den Polaroid-Rahmen definiert. Innerhalb dieses Containers wird
dann im div -Container mit der CSS-Klasse flickr-bild das Bild erscheinen.

Im footer platzieren Sie zusätzlich noch einen Button, der auf Knopfdruck ein neues
Polaroid, und damit auch Bild, lädt.

Als Nächstes implementieren Sie eine JavaScript-Bibliothek namens shake.js , die die
Registrierung einer Schüttelgeste einfach macht. Weitere Informationen finden Sie
auf der Webseite des Plugins unter https://github.com/alexgibson/shake.js . Laden Sie
die Erweiterung von der Webseite, und speichern Sie diese in einem Unterordner js .
Verlinken Sie dann direkt nach der jQuery-Einbindung die dazugehörige JavaScript-
Datei:

6

<!-- jQuery Shake Plugin -->
<script src="js/shake.js"></script>

Das Plugin erfordert insgesamt zwei Codeblöcke, die Sie innerhalb einer weiteren
Funktion definieren:

<script>
$(function(){
// Callback Funktion: Shake
var onShake = function() {
alert('Shake it!');
};
// Shake Plugin
window.onload = function() {
window.addEventListener('shake', shakeEventDidOccur, false);
function shakeEventDidOccur () {
// Folgender Code wird bei einer Schüttelgeste ausgeführt
onShake();
}
};
});
</script>

Listing 6.6 Die Implementierung des Shake-Plugin

Vom Prinzip her beinhaltet die Funktion onShake() jegliche Befehle, die ausgeführt
werden sollen, wenn eine Schüttelgeste erkannt wird. Das Erkennen dieser Schüttel-