Nutzeroberflächen fürs iPad - jQuery UI Slider

Mittlerweile sollte ja bekannt sein das ich ein jQuery-Junkie bin. Und mit »Junkie« meine ich, dass ich alles nur noch mit jQuery mache - dynamische Nutzeroberflächen, Webanwendungen ohne ein einziges Neuladen der Seite oder eben auch intuitive Bedienelemente wie zum Beispiel Slider. Für Nutzeroberflächen und Slider benutze ich, ganz konkret gesagt, das jQuery-Plugin jQuery UI. Wer jQuery kennt kennt vermutlich auch jQuery UI - das soll ja auch nicht das Thema des Artikels werden - ein paar Links zum Thema findet ihr am Ende aber trotzdem dazu.

Jedenfalls arbeitete ich neulich an einer Nutzeroberfläche mit Schiebereglern - alles sollte intuitiv bedienbar sein. Die Obefläche war fertig und wurde zum Testen freigegeben. Doch dann das vernichtende Urteil. »Das läuft ja überhaupt nicht bei mir« teilte uns der Kunde mit. Was war passiert? Bei unseren Test hatte alles so wunderbar funktioniert. Schuld war das iPad. Während sich die Nutzeroberfläche super mit einer Maus bedienen ließ, funktionierte der Slider aus dem jQueryUI-Repertoire auf dem iPad.

Im Internet bin ich auf einige jQuery-Plugins gestoßen, welche den vollen Funktionsumfang von jQuery UI boten und auf dem iPad funktionierten, allerdings arbeiteten sie nicht reibungslos mit dem Rest der Nutzeroberfläche zusammen, das Ergebnis war alles andere als zufriedenstellend. Außerdem erschien es mir übertrieben, ein weiteres Monster-Plugin zu verwenden, wo doch lediglich die Slider nicht iPad-tauglich waren. Kurzerhand entschloss ich mich, die Funktionalität der Slider auf das iPad zu portieren.

Was ist eigentlich das Problem? Warum funktioniert der Slider auf dem PC aber nicht auf einem iPad? Im Grunde liegt die Antwort recht nahe und macht auch recht viel Sinn, ist allerdings auch ziemlich ärgerlich für Webentwickler, die auch für das iPad entwickeln. Das iPad arbeitet nämlich mit Gesten des Nutzers. Tippt er einmal mit dem Finger auf die Oberfläche, wird ein Klick ausgeführt. Klicken und Ziehen ist aber nicht möglich, denn diese »Wischbewegung« wird vom iPad als Scrollen interpretiert. Deshalb werden bei dem Slider nicht die nötigen Klick-Events ausgelöst und der Griff des Schiebereglers lässt sich nicht bewegen.

Glücklicherweise lässt sich dieses Problem mit ein wenig Tüftelei recht leicht beheben. Wir müssen nur die Touch-Events, die auf dem iPad ausgelöst werden, abfangen und manuell den neuen Wert an den Slider senden.

$('.ui-slider-handle').bind('touchmove', function(event)
{
	//Dieses Event wird beim Ziehen des Sliders auf dem iPad ausgelöst.
});

Hier müssen wir jetzt nichts weiter tun als aus der Position des Griffs auf dem Slider den neuen Wert zu errechnen und diesen an den Slider zu übergeben.

$('#slider.ui-slider-handle').bind('touchmove', function(event)
{
	// Wir brauchen die X- und Y-Position des Fingers, jQuery unterstützt diese Eigenschaft noch nicht, deshalb brauchen wir das Original-Event
	var e = event.originalEvent;
	
	// Ermitteln der Position des Sliders
	var left = $('#slider').offset().left;
	var right = left + $("#slider").width();
	
	// Minimaler und maximaler Wert des Sliders
	var min = $("#slider").slider('option', 'min');
	var max = $("#slider").slider('option', 'max');
	
	// Mithilfe von einfachem Dreisatz können wir berechnen, welchen Wert die neue Position ergibt
	var newvalue = min + (e.touches.item(0).clientX-left)/(right-left)*(max-min);

	// Jetzt setzen wir den neuen Wert
	$('#slider').slider('value', newvalue);
});

Und schon funktioniert der Slider auch auf dem iPad.

Jetzt seid ihr dran!

Ich hoffe, dieses Script erspart irgendwem ein wenig Arbeit. Über Feedback würde ich mich freuen. Wie findet ihr das Snippet? Welche Erfahrungen habt ihr mit dem iPad gemacht? Hinterlasst mir einen Kommentar!