201013Mai

jALDropdown: Erweiterte Drop-Down-Menüs mit jQuery

Formular-Elemente von Websites lassen sich mit reinen CSS-Anpassungen nur eingeschränkt gestalten — so können Optionsfelder, Kontrollkästchen, Dropdown-Menüs oder Upload-Bereiche nur mithilfe von JavaScript und entsprechenden Ersatz-Elementen grafisch angepasst werden. Für jQuery steht hierzu beispielsweise das Plugin Uniform zur Verfügung, das komfortable Möglichkeiten bietet.
Wer speziell für Dropdown-Elemente eine erweiterte Lösung sucht, die auf jQuery UI basiert und mehr als die gewöhnlichen Funktionalitäten von Formular-Elementen bietet, sollte sich das jQuery-Plugin jALDropdown ansehen. Das Skript nimmt Daten im JSON-Format entgegen und ermöglicht es unter Anderem, Grafiken in die Dropdown-Liste einzubinden.

jALDropdown

Auf der Beispiel-Seite des Skripts kann man sich von dem jQuery-Aufsatz überzeugen. Die Listeneinträge werden also im JSON-Stil hinzugefügt — eine einfache Konfiguration könnte dann so aussehen:

  • var dropdown1 = {
  • EventHandlers:{
  • OnChange:function(PrmObj, PrmData){},
  • OnError:function(PrmObj, PrmData){}
  • },
  • DataTextField: "name",
  • DataValueField: "wert",
  • Data:[
  • { "wert":"wert1", "name":"Tim", "alter":"26" },
  • { "wert":"wert2", "name":"Tom", "alter":"28" }
  • ],
  • Structure:{
  • "Template":"<div>@name@, @alter@</div>",
  • "TemplateParams":[
  • { "Key":"@name@", "value":"name" },
  • { "Key":"@alter@", "value":"alter" }
  • ]
  • }
  • };
  •  
  • $("#element").jALDropdown(dropdown1);

Die Stärke des Skripts liegt im Parsen von JSON-Daten, so dass Listen vor allem aus komplexeren Datensammlungen erstellt werden können. Das jQuery-Plugin steht hier zum Download bereit und ist in der Minified-Version etwa 21 KB groß.
Wer hingegen eine einfachere Möglichkeit sucht, Dropdown-Menüs mit den jQuery UI-Themes zu verwenden, kann zu "jQuery UI Selectmenu" greifen. Hier werden die Listen aus bestehenden select-Feldern generiert, so dass die Formular-Elemente auch ohne JavaScript erreichbar sind.

UPDATE
Die Projekte bestehen in der Form nicht mehr.

Kommentare

Büroflächen Köln schrieb am 01.06.2010 #1

Sehr hilfreich. Vielen Dank ;)