Touchscreens per Geste steuern mit Hammer.js

Wer seine Website für Smartphones und Tablets fit machen möchte, wird um Gestensteuerung nicht herum kommen. Mit Hammer.js gibt es eine kleine JavaScript-Bibliothek, mit der sich beliebige HTML-Elemente um Gesten erweitern lassen. Hammer.js ist keine Konkurrenz für ausgewachsene Frameworks, dafür aber wesentlich einfacher zu verwenden.

Hammer.js einbinden

Zunächst muss Hammer.js in die Website eingebunden werden. Die Datei kann entweder heruntergeladen und auf dem eigenen Webspace platziert oder direkt aus dem GitHub-Repository der Entwickler verlinkt werden:

<script src="http://eightmedia.github.com/hammer.js/hammer.js"></script>

Anschließend wird eine Instanz der Hammer-Funktion auf ein HTML-Element angewendet:

var hammer = new Hammer(document.getElementById("element"));

Hammer.js

Über Hammer.js lassen sich verschiedene Gesten auf Elemente anwenden. Neben einfachem und doppeltem Berühren des Displays („Tap“ und „Double Tap“), gibt es langes Gedrückthalten („Hold“) und Bewegung über das Display („Drag“). Darüber hinaus lässt sich als Geste auch das Auseinander- und Zusammenziehen von zwei Fingern auf dem Display („Transform“) nutzen.

Auf Gesten reagieren

Auf jede Geste, die auf ein Element angewendet wird, lässt sich eine Funktion legen. So könnte man auf eine einfache Bewegungsgeste wie folgt reagieren:

hammer.ondrag = function(geste) {
  document.getElementById("ausgabe").firstChild.nodeValue = geste.distance;
}

Wird auf das Element „element“ eine Bewegungsgeste ausgeübt, wird die angegebene Funktion ausgeführt. Je nach Art der Geste gibt die Funktion Werte zurück, die sich für Animationen wie einen Bilderslide verwenden lassen. Das Objekt „distance“ gibt die über die Bewegung zurückgelegte Entfernung in Pixel an – also die Strecke, die der Finger auf dem Display zurückgelegt hat.

Für die Bewegungsgeste lässt sich auch die Richtung („direction“) der Bewegung (oben, unten, rechts oder links), der Winkel („angle“)  sowie die Entfernung auf der X- und Y-Achse („distanceX“ und „distanceY“) abfragen .

Hammer.js konfigurieren

Eine Instanz von Hammer.js kann individuell konfiguriert werden. Es gibt verschiedene Einstellungen, mit denen unter anderem die Definition einer Mindestdistanz möglich ist, die über eine Bewegung („Drag“) überwunden werden muss:

var hammer = new Hammer(document.getElementById("element"), { drag_min_distance: 100 });

Im Beispiel muss eine Bewegungsgeste über mindestens 100 Pixel stattfinden, damit die über „ondrag“ angegebene Funktion ausgeführt wird.

Fazit: Mit Hammer.js lassen sich sehr einfach Gesten anwenden und individuell einstellen. So können beispielsweise Slide-Navigationen oder Zoom-Funktionen realisiert werden. Hammer.js sollte im Werkzeugkasten eines Developers für mobile Webapps nicht fehlen.

(dpe)