jquery.knobby.js ist ein jQuery-Plugin für Drehknöpfe mit Javascript. Diese Knöpfe sind für Eingaben mit Maus und Tastatur aber auch für Touch-Devices geeignet.


Ein Aufruf von $("input[name='...']").knobby();
wandelt ein HTML-Input in einen runden Button um, der sich durch kreisende Bewegungen mit gedrückter Maustaste oder auch mit einem Finger auf Touch-Geräten verstellen lässt.
Features
Es wird eine kleine Anzahl an Attributen unterstützt: min
, max
, step
und turn
. Die Attribute min
und max
geben die Grenzen vor – der Wert von max
sollte größer sein als min
damit der Knopf funktioniert.
Mit step
lassen sich die kleinstmöglichen Schritte einstellen. Zum Beispiel step="10"
für in Zehner-Schritten oder step=".5"
damit der Wert auf ein halbes genau gerundet wird.
Mit dem turn
-Attribut lässt sich die Anzahl der kompletten Umdrehungen festlegen. Standard ist dabei eine ganze Umdrehung also turn=“1″. Mit einem Wert von turn=".5"
lässt der Drehknopf nur noch eine halbe Umdrehung zu und bei turn="10"
zehn ganze Umdrehungen.
So lässt sich die benötigte Genauigkeit auf eine Vielzahl von Anwendungsfällen einstellen: für kleine Werte mit wenigen Zwischenschritten reicht ein niedrigerer turn
– für eine breite Skala mit vielen Zwischenschritten ist vielleicht turn="4"
besser geeignet.
Die Größe lässt sich nun mit dem Size-Attribut auch dynamisch ändern: size="(Button-Radius in em)"
In Planung ist derzeit noch eine Option für logarithmische Drehknöpfe (sodass höhere Werte zu größeren Intervallen führen). Außerdem soll das Plugin bald auch noch Multi-Touch-fähig werden!
Die Benutzung kann man auf der Demo-Seite ausprobieren und den gesamten Quellcode zum Download findet man in der neuesten Version bei Github.