EasyRadioButtons ist ein jQuery Plugin, das es ermöglicht, input-Elemente vom Type 'radio' 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 'radio' mit einer beliebigen Klasse, z. B.:
<input class='myRadioButton' type='radio' name='radio' value='1'>
<input class='myRadioButton' type='radio' name='radio' value='2' checked>
Im Script wird die Funktion "easyRadioButtons" an der Klasse aufgerufen:
$('.myRadioButton').easyRadioButtons({
});
Optionen
align: ['horizontal' | 'vertical'] ; default: 'vertical'Ausrichtung des Radiobuttons. Diese Option ist nur sinnvoll, wenn keine Labels mit den input-Elementen verbunden sind. Ansonsten muss die Ausrichtung über CSS-Attribute bestimmt werden.
sizeOut: ['n'] ; default: '26px'Breite und Höhe des Radiobuttons. Es können alle üblichen CSS-Values verwendet werden.
sizeIn: ['n'] ; default: '13px'Breite und Höhe des inneren Bereiches des Radiobuttons. Es können alle üblichen CSS-Values verwendet werden.
borderRadius: ['n'] ; default: '50%'Radius des gesamten Radiobuttons. Für einen kreisrunden Radiobutton ist der Wert [sizeOut/2] zu setzen. Alle üblichen CSS-Values können verwendet werden.
backgroundOut: ['color'] ; default: '#fff'Farbe des äußeren Bereiches des Radiobuttons. Es können alle CSS Color-Definitionen verwendet werden.
borderSizeOut: ['n'] ; default: '3px'Stärke des äußeren Rahmens des Radiobuttons. Es können alle üblichen CSS-Values verwendet werden.
borderColorOut: ['color'] ; default: '#ccc'Farbe des äußeren Rahmens des Radiobuttons. Es können alle CSS Color-Definitionen verwendet werden.
backgroundIn: ['color'] ; default: '#a2a2a2'Farbe des inneren Bereiches des Radiobuttons. Es können alle CSS Color-Definitionen verwendet werden.
borderSizeIn: ['n'] ; default: '2px'Stärke des inneren Rahmens des Radiobuttons. Es können alle üblichen CSS-Values verwendet werden.
borderColorIn: ['color'] ; default: '#000'Farbe des inneren Rahmens des Radiobuttons. Es können alle CSS Color-Definitionen verwendet werden.