Basierend auf dem JavaScript-Framework jQuery stellt jQueryUI beeindruckende Interaktionen, Widgets, Effekte sowie einen „Themeroller“ bereit. Einige der Interaktionen und Widgets sind alte Bekannte aus Betriebssystemen und Desktop-Programmen. Mit dem Themeroller kann auf einfache Weise eine CSS-Datei erzeugt werden, um die einzelnen Komponenten zu formatieren. Um die Dateigröße gering zu halten, können die Komponenten im Download-Bereich einzeln ausgewählt werden.
Ich möchte einen kurzen Überblick der Grundfunktionen geben und nicht jede Funktion mit all ihren Möglichkeiten detailliert beschreiben. Für Interaktionen, Widgets und Effekte sind Beispiele auf der jQueryUI Seite verlinkt, diese bieten auf der rechten Seite die Auswahl von weiteren Beispielen.
Interaktionen
Die folgenden Interaktionen werden bereitgestellt.
- Dragable
- Dropable
- Resizable
- Selectable
- Sortable
Dragable
Alle DOM-Elemente können mit gedrückter Maustaste verschoben werden.
Dropable
Alle DOM-Elemente können mit gedrückter Maustaste verschoben werden und auf einem anderen „fallen“ gelassen werden. (Drag and Drop – Ziehen und Fallenlassen)
Resizable
Die Größe aller DOM-Elemente kann verändert warden. Mit gedrückter Maustaste kann der rechte oder untere Rand sowie die rechte untere Ecke gezogen oder geschoben werden.
Selectable
Jedes DOM-Element oder eine Gruppe von DOM-Elementen kann durch einen Mausklick ausgewählt werden. Durch Gedrückthalten der STRG (CTRL) Taste können mehrere Elemente ausgewählt werden.
Beispiele zu SelectableSortable
Eine Gruppe von DOM-Elementen kann sortiert werden. So kann ein Eintrag in einer Liste per Drag and Drop an eine andere Stelle der Liste gezogen werden und die Liste passt sich dementsprechend an.
Widgets
Die folgenden Widgets werden bereitgestellt.
- Accordion
- Datepicker
- Dialog
- Progressbar
- Slider
- Tabs
Accordion
Eine Datenstruktur aus Überschriften und Inhaltsbereichen wird so dargestellt, dass für alle Überschriften aber jeweils nur ein Inhaltsbereich einer Überschrift angezeigt wird. Durch Mouseover oder Klick auf eine Überschrift wird der entsprechende Inhaltsbereich eingeblendet und der zuvor angezeigte Inhaltsbereich wieder ausgeblendet.
Datepicker
Durch einen Klick in ein Input-Formularfeld öffnet sich ein Interaktiver Kalender, mit dem sich auf einfache Weise ein Datum auswählen und in das Feld einfügen lässt.
Dialog
Es werden Dialogfenster erzeugt, wie sie aus Betriebssystemen oder Desktop-Anwendungen bekannt sind.
Progressbar
Ein Fortschritts- oder Ladebalken zur Anzeige des aktuellen Fortschrittes in Prozent. Dieser Ladebalken kann/sollte nur verwendet werden, wenn das Ereignis 100% erreichen kann, das heißt er sollte nicht vollständig gefüllt/geladen sein und sich dann wieder von neuem Füllen/Laden.
Slider
Dieses Widget erzeugt einen Schiebe-Regler, mit dem Werte oder Wertbereich mittels Maus und Pfeiltasten ausgewählt werden können.
Tabs
Aus Links werden Tabs ,auch Registerkarten oder Karteireiter genannt generiert, mittels derer zwischen logisch gegliederter Inhaltsbereiche gewechselt werden kann.
Effekte
Die folgenden Effekte werden bereitgestellt.
- Add Class
- Remove Class
- Animate
- Effect
- Hide
- Show
- Switch Class
- Toggle
- Toggle Class
Add Class
Einem Element wird eine neue Klasse zugewiesen. Soweit nichts Besonderes, jedoch werden die Eigenschaften der neuen Klasse nicht einfach angezeigt, sondern animiert.
Remove Class
Die Klasse eines Elementes wird entfernt. Auch hier geschieht das animiert.
Animate
Mit diesem Effekt lassen sich die Eigenschaften von Elementen wie Farbe oder Größe animieren.
Effect
Verschiedene Effekte wie „Explodieren“ oder „Hüpfen“ können auf Elemente angwandt werden. Die zur Verfügung stehenden Effekte können alle im Beispiel getestet werden.
Hide
Elemente können über verschiedene Effekte ausgeblendet werden. Die zur Verfügung stehenden Effekte können alle im Beispiel getestet werden.
Show
Elemente können über verschiedene Effekte eingeblendet werden. Die zur Verfügung stehenden Effekte können alle im Beispiel getestet werden.
Switch Class
Zwei Klassen können als Argumente übergeben werden, die Funktion tauscht dann die erste übergebene Klasse gegen die zweite.
Toggle
Elemente können über verschiedene Effekte eingeblendet und wieder ausgeblendet werden. Die zur Verfügung stehenden Effekte können alle im Beispiel getestet werden.
Toggle Class
Dieser Funktion wird eine Klasse übergeben, die dem jeweiligen Element hinzugefügt wird, wenn das Element diese Klasse noch nicht hat, und entfernt die Klasse, wenn das Element diese Klasse hat.
ThemeRoller
Die jQueryUI-Elemente werden mittels CSS formatiert. Um die Formatierung zu erleichtern, bietet jQueryUI den ThemeRoller an, eine Web-Oberfläche, mit der man sich auf einfache Weise ein eigenes Theme zusammenstellen und die entsprechende CSS-Datei einfach herunterladen kann. Alle Komponenten werden dargestellt und können über eine Auswahl auf der linken Seite angepasst werden, die Änderungen werden sofort übernommen, somit kann das Ergebnis sofort kontrolliert werden. Zusätzlich können noch fertige Themes aus einer Galerie heruntergeladen und bearbeitet werden.
Download
Im Downloadbereich können die gewünschten Komponenten einzeln ausgewählt werden, einige Komponenten setzen andere voraus, auf eventuelle Konflikte weist ein Dialog hin.
Des weiteren kann noch das gewünschte Theme sowohl die Version ausgewählt werden. Die aktuelle Dateigröße wird ebenfalls angezeigt.
Fazit
Zusammenfassend lässt sich sagen, dass jQueryUI viele Interessante und oft benötigte Komponenten in einem ansprechenden Design bereitstellt. Meine persönliche Lieblingskomponente ist das “Datepicker Widget”, da sich mit ihm auf wirklich einfache Weise die Benutzerfreundlichkeit eines Formulars steigern lässt.
Ich möchte noch einmal darauf hinweisen, dass es sich hier lediglich um eine Übersicht handelt und nicht jede Komponente im Detail beschrieben ist. ™
11 Antworten
Nette Sammlung. Danke
Danke ebenfalls für die übersichtliche Zusammenstellung.
ebenfalls vielen Dank für die Zusammenstellung. Werde gleich mal schauen, was ich davon bei mir umsetzen kann.
Wird auf jeden Fall mal gespeichert. Wer weiß wann sich soetwas gebrauchen lässt.
Definitiv einer der nützlichsten Artikel der letzten Zeit 🙂
Ich finde den Artikel mal gar nicht so prickelnd; im Grunde nichts anderes, als die Beispiele von jquery.com eingedeutscht.
Nur für die Leute sinnvoll, die so gar kein Englisch können, hätte mir aufgrund der Überschrift mehr von dem Beitrag versprochen.
Mist, gibt keine Korrekturfunktion; meine natürlich, dass es sich um die Bespiele von jqueryui.com handelt…
Finde den Artikel auch eher schwach. Gleiches erzählt deren Webseite auch. 😉
Etwas mehr Detailfreudigkeit oder z.B. ein Hinweis auf das m.E. sehr interessante CSS-Framework wären schön gewesen.
Kann man echt alles der jQuery Seite entnehmen!
Eine sehr schöne Kollektion sinnvoller Anwendungen, welche aus diesem jquery gezaubert werden können.
Nun, ich bin absoluter Neuling in Sachen jquery. Klar, das eine oder andere Mal habe ich mir das eine oder andere zusammengeschustert. Bisweilen habe ich allerdings mit prototype, script.aculo.us und mootools gearbeitet.
Die arbeit mit jquery habe ich bisher immer ein wenig aufgeschoben. Gründe? Wenn ich mir die aufgezeigte Kollektion anschaue, fällt mir nicht ein Grund ein. Zudem hat jquery einen hervorragenden Ruf in der Entwicklergemeinde (soweit ich dies mitbekomme). In diversen Büchern wird auf dieses JavaScript-Framework eingegangen. Weitere Bücher sollen zum Thema erscheinen. Aber kaum ein Buch, Artikel, Video, in welchem auf andere Frameworks eingegangen wird.
Danke für diesen exquisiten Einblick ins Thema und die Möglichkeiten, die sich durch die Arbeit mit jquery ergeben.
vielen dank, sehr gut sammlung.
Wer seine eigenen Themes später einmal weiter bearbeiten will, der kann jetzt auf http://jqueryuithemegallery.just-page.de (jQueryUI-ThemeGallery) sein Theme speichern und anderen zur Verfügung stellen. Weiterhin ist es möglich, ein Theme eines anderen Users auf die eigenen Designvorstellungen angepaßt und anschließend gespeichert und/oder heruntergeladen werden. Zukünftig soll es möglich sein, seine Themes auch zu verwalten (Sichtbarkeit für andere User, löschen etc.). Funktioniert derzeit nur im Firefox (weitere Informationen dazu findet man auf der Homepage von jqueryUI).