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.