Funktionsweise

Neben den entsprechenden Akkordion-Buttons befindet sich eine versteckte Checkbox.
Mithilfe des General sibling selectors (Allgemeiner Geschwister-Selektor) kann der Akkordion-Inhalt entsprechend dem Status der Checkbox verändert werden.

Also zum Beispiel:

<input type="checkbox" />
<div class="accordion-content"></div>
.accordion-content {
  display:none;
}
input:checked ~ .accordion-content {
  display:block;
}

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.

knobby-bright

knobby-dark

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.