Schon gut. Natürlich ist das folgend vorgestellte jQuery-Plugin Knob nicht für virtuelle Thermostate erdacht worden. Vielmehr lässt sich mit dem flexibel konfigurierbaren Drehrädchen so ziemlich alles steuern, was man üblicherweise mit solchen Bedienelementen im Web steuert. Es eignet sich beispielsweise für die Lautstärkenregelung, die Erhöhung von Helligkeit und/oder Kontrast, das Spulen innerhalb von Medien, eben ganz generell die Einstellung beliebiger Werte in Web Apps.

jQuery Knob funktioniert sogar auf Touchscreens

Der jQuery Knob ist ein rein Javascript- und HTML5-basierter Drehregler, der sowohl auf Touchscreens, wie auch mit Mausrad und Tastatur verwendet werden kann. Hat der Benutzer Javascript deaktiviert, wird der Bereich, in dem eigentlich der Knob zu sehen sein sollte, als reines Input-Element des Typs Text angezeigt. Die Knobifizierung des Input-Elements erfolgt durch die Vergabe der Klasse “dial”. Den eigentlichen Canvas zeichnet sich das Plugin per Anwendungslogik zum gegebenen Zeitpunkt selbst. Auf Grafikdateien wird komplett verzichtet.

Mit HTML5 Data-Attributen fügt man dem Input-Element Optionen hinzu, die sich sowohl auf das Verhalten wie auch auf die Optik auswirken können. So konfiguriert man Mindest-, wie Höchstwerte, legt einen Endpunkt fest, schaltet die Steuerung aktiv oder inaktiv (für reine Infodisplays) und kümmert sich um das Layout des Reglers, der im Standard in einer an Tron angelehnten Optik daherkommt. Alternativ zur Verwendung von Data-Attributen kann die Konfiguration auch über entsprechende Werte innerhalb des eigentlichen Funktionsaufrufes erfolgen.

1

<input type="text" class="dial" data-min="-50" data-max="50">

Knob mit Konfiguration über Data-Attribute…

1
2
3
4

$(".dial").knob({
                'min':-50
                ,'max':50
                })

… oder direkt im Function-Call.

Wenige Hooks erlauben eine Auswertung und Weiterverarbeitung der getroffenen Einstellungen. Dreht ein User am Knob und stellt einen Wert ein, so kann dieser Wert on release als Trigger weiterer Funktionen, etwa lauter oder leiser, heller oder dunkler, etc. genutzt werden. Ebenso möglich ist aber auch das kontinuierliche Triggern entsprechender Funktionen über den Hook “change”. Hier würde nicht erst beim Erreichen der Endposition eine Funktion ausgelöst, sondern während des gesamten Drehvorgangs, gut bei Lautstärkenanpassungen. Zu guter Letzt lässt sich eine Funktion an das Zeichnen des Canvas, also das Entstehen des Knob knüpfen.

Entwickler Anthony Terrien stellt das Plugin unter MIT-Lizenz auf GitHub bereit. Nach seinen Angaben läuft es in allen modernen Browsern, sowie dem IE ab Version 9. Eine Dokumentation im eigentlichen Sinne liefert Terrien nicht. Allerdings ist die Funktionsvielfalt doch recht überschaubar und so sollte der interessierte jQuery-Afficionado auch so ganz gut zurechtkommen. Immerhin ist der Code vernünftig kommentiert und sauber strukturiert.

Eine Demoseite gibt einen guten Überblick über die verschiedenen Konfigurationen und optischen Möglichkeiten.

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit fast 30 Jahren in der IT daheim. Seit 2008 schreibt er für Dr. Web, seit 2012 ist er Chefredakteur des Magazins. Man findet ihn auch auf Twitter und Facebook, aktiver ist er allerdings auf Google+.

• Web
|
• Twitter
|
• Facebook
|
• Google+
|
• More Posts (448)