Das jQuery-Plugin TouchSwipe stellt eine Vielzahl von Funktionen bereit um die gängigen Touch-Gesten wie zum Beispiel Swipen und Pinchen für Web- Seiten und Apps zu realisieren.
Die Touch-Features
- Swipes in alle 4 Richtungen
- Pinches rein und raus
- Touch-Events für ein oder zwei Finger
Zudem bietet TouchSwipe einige Hilfen, wie z.B. das optionale Sperren von Swipe-Aktionen beim Berühren von Input-Elementen (Buttons, Text-Felder, etc.) oder das Bestimmen eines Schwellenwertes in Pixeln, mit dem man einstellen kann wie stark man über das Display wischen muss, um z.B. ein Swipe-Event auszulösen.
Anwendungsbeispiel
Eine klassische Swipe-Navigation könnte, nach Einbindung von jQuery und TouchSwipe, so aussehen:
JS
$(function() {
//Swipe-Detection auf ein Element anwenden...
$("#container").swipe( {
/*Standard Swipe-Event handler für alle Richtungen. Der Function werden vom Handler die Richtungen des
Swipes sowie Länge und weitere Angaben mit übergeben. Damit kann man in der Funktion dann Aktionen
ausführen. Im Beispiel lesen wir einfach die Swipe-Richtung aus und geben diese als Text an:*/
swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
$(this).text("Du hast in diese Richtung gewischt: " + direction );
},
/*Schwellenwert. Der Benutzer muss 20px weit swipen um das Event auszulösen (0 = Jede Bewegung):*/
threshold:20
});
});HTML
<div id="container"></div>
Viel Spaß mit dem Entdecken der zahlreichen Möglichkeiten von jQuery touchSwipe.