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"));
Ü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)
0 Antworten zu „Touchscreens per Geste steuern mit Hammer.js“
— was ist Deine Meinung?
Über diesen Artikel bin ich auf Hammer.js gestoßen und probiere derzeit einige Dinge aus. Leider ist die Dokumentation für Nichtprogrammierer, wie ich es bin, etwas mau. Wäre super, wenn mir jemand folgende Frage beantworten könnte: Ich habe mit Dreamweaver CS6 eine mobile App entwickelt, die aus einzelnen html Seiten besteht und in die einige jquery.mobile Funktionen eingebunden sind. Jetzt möchte ich zusätzlich mit Hammer.js die swipe Funktion einbauen, um per Wisch von meiner index.html auf die Inhalt.html Seite zu kommen und zurück. Hierfür habe ich das mitgelieferte mitgelieferte carousel eingebaut, was auch bestens funktioniert. Wie müssen aber die Zeilen
#carousel li.pane1 { background: #42d692; }
#carousel li.pane2 { background: #4986e7; }
modifiziert werden, um von einer html Seite auf eine neue zu html Seite zu kommen? pane 1 wäre meine index.html und pane 2 meine Inhalt.html