www.brain4.de > Scripts and more... > JavaScript: Select - selbstgestaltete Auswahllisten  

Select - selbstgestaltete Auswahllisten

Das folgende Beispiel ist ein Versuch. Das bedeutet, dass er sich in Weiterentwicklung befindet und deshalb keine Garantie für Funktionstüchtigkeit übernommen werden kann.

Was ist der Sinn des Ganzen?
Manchmal ist man in der Situation, dass man für einen geschlossenen Benutzerkreis eine ansprechende Oberfläche erstellen möchte, die einfach zu bedienen ist und dem Seitenersteller noch ein paar gestalterische Mittel gibt. Als Beispiel habe ich mir eine Auswahlliste ausgesucht, deren Aussehen über CSS gestaltbar ist. Vielleicht will man auch in der Auswahlliste HTML darstellen, Teile des angezeigten Textes farbig gestalten usw.

All das soll das hier vorgestellte Objekt JSelect ermöglichen. Damit Sie sich einen Eindruck verschaffen können, hier ein Beispiel.

Beispiel

 

Das zugehörige Formular könnte für einen Submit ein Input Element vom Typ hidden enthalten. Der zugehörige Wert, der beim Versenden des Formulars übertragen würde, ist:

Die Benutzung von JSelect

#1  var s = new JSelect(document.getElementById("auswahlListe"));
#2  s.add(new JOption("0", "D-36251 Ludwigsau,<br> Bergstr. 15"));
#3  s.add(new JOption("1", "D-71634 Ludwigsburg-Eglosheim,<br> Beuttenmillerhof"));
..
#16 s.add(new JOption("13", "D-67065 Ludwigshafen-Mundenheim,<br> Berwartsteinstr."));
#17 s.add(new JOption("14", "D-71642 Ludwigsburg-Neckarweihingen,<br> Beuzlen"));

#19 // Ein FormularElement binden, damit ein Form::Submit die Daten überträgt.
#20 s.bindHiddenInput(document.forms["aForm"].elements["jSelectValue"])

#22 // Darstellen
#23 s.render();

In Zeile #1 wird das Objekt erzeugt. Es erhält eine Referenz auf ein HTML-Element, welches die Lsite aufnehmen soll. Typischerweise ist das ein DIV-Element. Diese können Sie nach Ihren Bedingungen mit css formatieren, z.B.: Höhe und Breite bestimmen.

In Zeile #2 wird eine JOption dem JSelect hinzugefügt. JOption hat zwei Eigenschaften: value und text. Der Wert von value wird an das gebundene Formularelement übergeben. Der Wert von text dient der Anzeige und kann prinzipiell beliebiges HTML enthalten.

In Zeile #20 wird, wie schon angesprochen, ein Formularelement an dieses Objekt gebunden, wodurch für eine Übertragung der Daten gesorgt wird. Das ist natürlich optional und muss nicht gemacht werden.

In Zeile #23 wird nun noch das Objekt in das DOM des Browsers eingefügt und man erhält das, was Sie oben sehen.

Features und weitere Verhaltensweisen

Folgende Funktionen können benutzt werden:

/**
  * Erzeugt ein neues JSelect Objekt - Konstruktorfunktion
  * @container vom Ersteller vorgegebener Bereich, der die 
  *            Auswahlliste aufnehmen soll.
  */
function JSelect(/* HTMLElement */ container)

/**
  * Fügt der Liste einen neuen Eintrag hinzu
  * @jOption typeof JOption 
  *          Listeneintrag
  */
JSelect.add(jOption)

/**
 * Löscht alle Einträge der Liste
 */
JSelect.clear()

/**
 * Stellt die Liste im Container dar und fügt sie 
 * in das DOM des Browsers ein.
 */
JSelect.render()

/**
 * Fügt dem Objekt einen Observer hinzu, der bei Auftreten eines bestimmten 
 * Events informiert werden soll. Events sind vordefiniert in JSelect, 
 * momentan gibt es nur CHANGE.
 * Der Observer muss eine Methode update implementieren, der eine Referenz 
 * auf das JSelect-Objekt übergeben wird.
 */
JSelect.addObserver(obj, eventName)

/**
 * Löscht den angegebenen Observer für dieses Event
 * @obj typeof Object Observer
 * @eventName typeof String Name des Events
 */
JSelect.removeObserver(obj, eventName)

/**
 * Bindet ein FormularElement an dieses Objekt. Die value Eigenschaft 
 * wird mit JOption.value gesetzt. sobald eine Auswahl gertroffen wurde.
 */
JSelect.bindHiddenInput(/* HTMLFormElement */ o)

/**
 * Konstruktorfunktion für JOption 
 * @value Wert, der für diesen Eintrag gültig ist.
 * @text  Wert, der angezeigt werden soll, kann HTML enthalten,
 *        ist dieser Wert nicht vorhanden, wird value verwendet.
 */
function JOption(/* String */value, /* HTMLString */ text){

Formatierungen der Listeneinträge für Selektionen erwartet das Script die zwei CSS Kassen default für Standardanzeige und focus zur Visualisierung der Sichtbarkeit. Da die Einträge über P-Elemente erzeugt werden, kann man dies auch für CSS nutzen:

#auswahlListe p{
  border-bottom: 1px dashed #99ccff;
  padding: 0.4ex 0 0.4ex 0.5ex;
  margin:0;
}
#auswahlListe p:hover{
  background-color: #e1e4ff;
  color: #000;
}

#auswahlListe p.focus{
  background-color: #330099;
  color: #FFF;
}

Restriktionen

  1. Es ist ein Prototyp
  2. Ist nur mit der Maus bedienbar
  3. Selektierte Einträge werden noch nicht vollständig in das Sichtfeld gerückt, falls sie teilweise verdeckt sind.
  4. keine Mehrfachauswahl
  5. kein Löschen einzelner JOption
  6. Mit ein bisschen zusätzlichem Programmieraufwand, ließe sich dieses Objekt dazu verwenden, diese Liste auch als aufklappbare Combobox zu benutzen, ein Beispiel fehlt aber noch ;-)

Sollten Sie Anmerkungen oder Wünsche zu diesem Script haben, senden Sie mir eine E-Mail.

zur Navigation

Letzte Änderung: 01.09.2015 18:20 Uhr

Valid HTML 4.01! Valid CSS!