Mein Name ist Lars Ebert und ich bin Web Designer und Programmierer.
Ich biete Ihnen eine komplette Internetseite inklusive Design und Funktionalität - alles aus einer Hand!

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!

Links zum Thema

• jQuery – write less, do more
• jQuery UI – user interfaces
• Mobile Websites online testen: Media Query Previewer für iPhone und iPad

Nutzeroberflächen fürs iPad - jQuery UI Slider, 4.5 out of 5 based on 2 ratings

Über den Autor:

Facebook, Twitter & Kommentare:

11 Kommentare zu “Nutzeroberflächen fürs iPad – jQuery UI Slider”

1. 

   keschmidt

   Antworten

   14. September 2011 um 23:34

   Cool! Das ist die beste Lösung, die ich bisher zum jquery slider gefunden habe.

   Leider gelingt es mir nicht, damit mehrere Slider unabhängig voneinander zu verschieben. Deine Grafik lässt aber vermuten, dass es doch geht. Hast du eine funktionierende Lösung?

   • 

     Lars Ebert

     Antworten

     15. September 2011 um 06:40

     Dafür haben wir zwei Möglichkeiten:

     Zum einen können wir jedem Slider eine eindeutige ID geben (macht ja sowieso Sinn wenn man mit den Werten arbeiten will) und schreibt das Snippet für jede ID neu.

     Zu anderen, und das ist die bessere Variante, könnte man den Code etwas abändern:

     $('.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 = this.parent().offset().left;
     	var right = left + this.parent().width();
     
     	// Minimaler und maximaler Wert des Sliders
     	var min = this.parent().slider('option', 'min');
     	var max = this.parent().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
     	this.parent().slider('value', newvalue);
     });
     

     So funktioniert der Code automatisch mit allen Slidern.

2. 

   Thorsten

   Antworten

   10. November 2011 um 13:59

   Hi,

   super Tutorial, jedoch will es bei mir nicht funktionieren.

   Mal mein Code anbei:

   Slider:
   $(function() {
// Inhalt laden
aktualisieren();
$( "#slider-rabatt" ).slider({
range: true,
min: 0,
max: $('input[name=highestrabatt]').val(),
values: [ 0, 100 ],
change: function( event, ui ) {
$('#img_loading').fadeIn('slow', function() {
loadIn();
});

   aktualisieren();

   $('#img_loading').fadeOut('slow', function() {
   loadOut();
   });
   },
   slide: function( event, ui ) {
   $( "#rabatt" ).val( ui.values[ 0 ] + " % - " + ui.values[ 1 ] + " %" );
   }
   });
   $( "#rabatt" ).val( $( "#slider-rabatt" ).slider( "values", 0 ) +
   " % - " + $( "#slider-rabatt" ).slider( "values", 1 ) + " %" );

   if( $('input[name=highestrabatt]').val().length == 0 ) {
$( "#slider-rabatt" ).slider({ disabled: true });
}
});

   Und dann dein Code angepasst:
   $('.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-rabatt').offset().left;
   var right = left + $("#slider-rabatt").width();

   // Minimaler und maximaler Wert des Sliders
   var min = $("#slider-rabatt").slider('option', 'min');
   var max = $("#slider-rabatt").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-rabatt').slider('value', newvalue);
});

   Aber auf dem iPad tut sich leider gar nichts.
   Hast du einen Tipp?

   • 

     Lars Ebert

     Antworten

     26. November 2011 um 17:08

     Am besten checkst du mal alle Klassennamen bzw. IDs durch, ob die auch stimmen. Wird denn ein Fehler ausgeworfen vom Browser? Was genau passiert denn?

3. 

   Mi

   Antworten

   19. Dezember 2011 um 22:29

   Hallo,
   danke für die Tipps aber leider klappt das ganze bei mir mit eine Vertical-Slider nicht kannst du mir helfen bitte?

   • 

     Lars Ebert

     Antworten

     21. Dezember 2011 um 08:29

     Der Code arbeitet mit den horizontalen Abständen. Um ihn für vertikale Slider anzupassen, musst du folgenden Code benutzen:

     $('#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 top = $('#slider').offset().top;
     	var bottom = top + $("#slider").height();
     
     	// 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 = max - (e.touches.item(0).clientY - top)/(bottom - top)*(max - min);
     
     	// Jetzt setzen wir den neuen Wert
     	$('#slider').slider('value', newvalue);
     });

4. 

   Cheesi

   Antworten

   6. Januar 2012 um 06:50

   Danke Danke Danke du bist Gott und ein Heiliger gleichzeitig
   Funktioniert auch unter Anroid wenn auch nur recht mager. Um anständige Klicks hinzubekommen muss ziemlich nahe ran zoomen. Zudem erfasst es auch nicht jeden Klick. Allerdings besser als nichts Nochmal vielen Dank

   • 

     Cheesi

     Antworten

     6. Januar 2012 um 07:12

     Ach ja was ich vorhin vergessen habe sliden selber funktioniert nicht, aber man kann es mit klicken bestimmen (Anroid).

5. 

   Titus

   Antworten

   25. April 2012 um 18:43

   Hab mich sehr gefreut… aber es nicht wirklich zum Laufen bekommen.
   Das Tippen auf dem Slider funktioniert doch auch auf dem iPad.
   Nur das “Ziehen” geht nicht. Ich bekomme den Handle aber nicht gezogen.
   Hast Du ne Demo irgendwo? Oder funktioniert das nicht mit allen Slider-Optionen? Hier mein Aufruf des Sliders:
   
   $( “#familie-slider1″ ).slider({
   range: “max”,
   min: 0,
   max: 10,
   value: 0,
   slide: function( event, ui ) {
   $( “#familie-wichtigkeit” ).val( ui.value );
   }
   });
   

   • 

     Lars Ebert

     Antworten

     25. April 2012 um 21:24

     Eigentlich sollte das so funktionieren. Lass dir mal in der callback-Funktion für das Event irgendwas per alert() ausgeben und schau, ob das Event überhaupt ausgelöst wird.

6. Pingback von jQueryUI Slider auf feste Werte begrenzen « Blog « Advitum Webdesign

   24. September 2011 um 16:04

   [...] Slider auf feste Werte begrenzen Nutzeroberflächen fürs iPad – jQuery UI Slider Das Schweigen [...]