jQuery UI
Hierbei handelt es sich um eine open source Bibliotheken-Erweiterung des eigentlichen Frameworks jQuery, bestehend aus Interface Komponenten, wie beispielsweise komplexen Interaktionen, Widgets und Animations-Effekten.
Jede Komponente ist auf jQuery’s event-basierten Architektur aufgebaut („finde etwas und manipuliere es“) und kann ohne Probleme in jedes Theme eingebaut werden (die Komponenten sind sozusagen „themable“), was es für jeden Entwickler leicht macht, diese Komponenten zu integrieren und in dessen Code einzubinden.
Kurz gesagt bietet jQuery UI Lösungen zur Gestaltung und Funktionalität der Benutzeroberfläche (engl. User Interface – UI).
Funktionsumfang
Interaktionen
- Draggable und Droppable: ermöglicht die Drag and Drop Funktion für Elemente.
- Resizable: ermöglicht eine Veränderung der Elementgröße.
- Selectable: bietet eine erweiterte Funktionalität beim Markieren von Elementen.
- Sortable: ermöglicht eine Sortierung gleichartiger Elemente.
Effekt-Erweiterung zu jQuery
- Farbanimationen.
- Animation eines Klassenwechsels: ermöglicht nun Animationen beim Wechsel einer Stylesheet-Klasse.
- Blendeffekte: z.B.: Explosionen, Schütteln, Springen, etc…
Widgets (vorprogrammierte Lösungen zur Nutzung gängiger Elemente über die Benutzeroberfläche)
- Autocomplete: automatische Vervollständigung von Textfeldern.
- Button: Bereitstellung gängiger Button-Designs.
- Datepicker: Menü zur Datumsauswahl.
- Dialog: ermöglicht die Generierung eines Dialogfensters.
- Progressbar: stellt die Anzeige eines Fortschrittbalkens zur Verfügung.
- Slider: bietet einen Schieberegler.
- Tabs: ermöglicht es dem Entwickler, Registerkarten (Tabs) darzustellen.
- Accordion: Faltwand, zum ein- und ausklappen von bestimmten Elementen.
- Overlay & Shadow Classes: Hervorhebung eines Elementes über einem anderen.
- Framework Icons: individuell nutzbare Icons.
- Highlight / Error: bietet eine Möglichkeit zur Anzeige von Fehlermeldungen bzw. Highlight-Elementen.
- Corner Radius Helper: bietet die Möglichkeit, Elementen eine vordefinierte Klasse zu übergeben, mit denen das Element abgerundete Ecken erhält (Klassennamen: .ui-corner-x, wobei x für die Abkürzung der Ecke steht. Für Oben Links also Top Left wäre die Abkürzung tl).
Modularität
Dank des modularen Aufbaus von jQuery UI ist es dem Entwickler möglich, nur genau die Komponenten einzubinden, welche er tatsächlich benötigt. Dies verhindert zugleich unnötigen Ressourcen-Aufwand.
Mittels ThemeRollers lässt sich das Aussehen aller integrierten Widgets individualisieren.