EasySelect ist ein jQuery Plugin, das es ermöglicht, eine Select-Box sehr einfach zu gestalten. Die Darstellung ist browserunabhängig. Option-Elemente werden dabei nicht benötigt - der Inhalt wird der jQuery-Funktion als Array übergeben. Der HTML-Quellcode wird dadurch minimiert. Die Auswahl kann, wie bei einer klassischen Select-Box, in php über das value- und name-Attribut abgefragt werden.
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
Der Hauptcontainer ist ein input-Element mit einer beliebigen Klasse oder ID, z. B.:
<input id="mySelect" name="mySelect" value="Auswahl">
Im Script wird die Funktion "easySelect" am Hauptcontainer aufgerufen:
$('#mySelect').easySelect({
});
Optionen
values: [['value1', 'valueN']] ; default: ['1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '0' ]Die Werte der Options werden in einem Array angegeben.
selected: [0-n] ; default: 0Legt den selektierten Wert fest. 0 steht für den Value der input-Box. 1-n sind die Values des Arrays.
dimension: ['px' | 'em' | 'rem'] ; default: 'px'Maßeinheit für 'width', 'height', 'maxOptionsHeight', 'borderWidth', 'borderRadius' und 'fontSize'
width: [n] ; default: 150Breite des Hauptcontainers
height: [n] ; default: 30Höhe des Hauptcontainers
maxOptionsHeight: [n] ; default: 160maximale Höhe bei aufgeklapptem Hauptcontainer
borderWidth: [n] ; default: 2Breite des Rahmens um den Hauptcontainer
fontSize: [n] ; default: 16Schriftgröße der Auswahl
fontFamily: ['font'] ; default: 'default'Schriftfont der Auswahl
textColor: ['color'] ; default: '#666'Schriftfarbe der Auswahl
backgroundColor: ['color'] ; default: '#eee'Hintergrundfarbe der Auswahl
textColorOptions: ['color'] ; default: '#920508'Schriftfarbe der Options
backgroundColorOptions: ['color'] ; default: '#fbfbfb'Hintergrundfarbe der Options
textColorSelected: ['color'] ; default: '#fff'Schriftfarbe der augewählten Option
backgroundColorSelected: ['color'] ; default: '#eaafb1'Hintergrundfarbe der augewählten Option
textColorHover: ['color'] ; default: '#dfdfdf'Schriftfarbe der Option bei Mouse-Over
backgroundColorHover: ['color'] ; default: '#aaa'Hintergrundfarbe der Option bei Mouse-Over
scrollbarColor: ['color'] ; default: '#920508'Farbe der vertikalen Scrollbar
borderColor: ['color'] ; default: '#ccc'Farbe des Rahmens um den Hauptcontainer
arrowImage: ['image'] ; default: 'default'Image des Auswahl-Buttons
arrowImageHover: ['image'] ; default: 'default'Image des Auswahl-Buttons bei Mouse-Over
transitionTime: [n] ; default: 500Zeit in Millisekunden für das Ausklappen des Menüs