EasyCheckboxes ist ein jQuery Plugin, das es ermöglicht, input-Elemente vom Type 'checkbox' browserunabhängig zu gestalten. Größe, Farbe und Form der Elemente sowie Ausrichtung einer Gruppe von Elementen einer Klasse werden über Parameter in einem Funktionsaufruf festgelegt. Eine Anpassung durch ein CSS-Dokument ist nicht notwendig.
Vorschau
Am folgenden Beispiel können die unten beschriebenen Optionen getestet werden. Eingegebene Änderungen werden sofort in der Vorschau angezeigt. Das vollständige Beispiel findet sich auch im Downloadbereich.
Installation
Alle Mitglieder einer Gruppe sind input-Elemente vom Type 'checkbox' mit einer beliebigen Klasse, z. B.:
<input class='myBox' type='checkbox' name='checkbox1' value='1'>
<input class='myBox' type='checkbox' name='checkbox3' value='2' checked>
Im Script wird die Funktion "easyCheckboxes" an der Klasse aufgerufen:
$('.myBox').easyCheckboxes({
});
Optionen
align: ['horizontal' | 'vertical'] ; default: 'horizontal'Ausrichtung der Checkboxen. Diese Option ist nur sinnvoll, wenn keine Labels mit den input-Elementen verbunden sind. Ansonsten muss die Ausrichtung über CSS-Attribute bestimmt werden.
size: ['n'] ; default: '26px'Breite und Höhe der Checkboxen. Es können alle üblichen CSS-Values verwendet werden.
backgroundColorOut: ['color'] ; default: '#fff'Farbe des äußeren Bereiches der Checkbox. Es können alle CSS Color-Definitionen verwendet werden.
borderWidthOut: ['n'] ; default: '3px'Stärke des äußeren Rahmens der Checkbox. Es können alle üblichen CSS-Values verwendet werden.
borderColorOut: ['color'] ; default: '#ccc'Farbe des äußeren Rahmens der Checkbox. Es können alle CSS Color-Definitionen verwendet werden.
backgroundColorIn: ['color'] ; default: '#a2a2a2'Farbe des inneren Bereiches der Checkbox. Es können alle CSS Color-Definitionen verwendet werden. Wichtig: Bei der Option 'backgroundImageIn' muss der Wert 'empty' gesetzt sein, damit die Farbe sichtbar ist!
backgroundImageIn: ['empty' | 'default' | 'url'] ; default: 'default'Bei 'default' wird das Standard-Image geladen. Außerdem kann ein individueller Bildpfad angegeben werden. Soll der Wert der Option 'backgroundColorIn' sichtbar sein, muss 'empty' angegeben werden.
borderWidthIn: ['n'] ; default: '1px'Stärke des inneren Rahmens der Checkbox. Es können alle üblichen CSS-Values verwendet werden.
borderColorIn: ['color'] ; default: '#000'Farbe des inneren Rahmens der Checkbox. Es können alle CSS Color-Definitionen verwendet werden.
borderRadius: ['n'] ; default: '15%'Radius der gesamten Checkbox. Für eine kreisrunde Checkbox ist der Wert [size/2] zu setzen. Alle üblichen CSS-Values können verwendet werden.