jQueryUI – beeindruckende Interaktionen, Widgets und Effekte

Basierend auf dem JavaScript-Framework jQuery stellt jQueryUI beein­dru­cken­de 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 ein­fa­che Weise eine CSS-Datei erzeugt wer­den, um die ein­zel­nen Komponenten zu for­ma­tie­ren. Um die Dateigröße gering zu hal­ten, kön­nen die Komponenten im Download-Bereich ein­zeln aus­ge­wählt wer­den.

Ich möch­te einen kur­zen Überblick der Grundfunktionen geben und nicht jede Funktion mit all ihren Möglichkeiten detail­liert beschrei­ben. Für Interaktionen, Widgets und Effekte sind Beispiele auf der jQueryUI Seite ver­linkt, die­se bie­ten auf der rech­ten Seite die Auswahl von wei­te­ren Beispielen.

jQueryUI – Beispiel Auswahl

Interaktionen

Die fol­gen­den Interaktionen wer­den bereit­ge­stellt.

• Dragable
• Dropable
• Resizable
• Selectable
• Sortable

• Dragable

  Alle DOM-Elemente kön­nen mit gedrück­ter Maustaste ver­scho­ben wer­den.

  Beispiele zu Dragable

• Dropable

  Alle DOM-Elemente kön­nen mit gedrück­ter Maustaste ver­scho­ben wer­den und auf einem ande­ren „fal­len“ gelas­sen wer­den. (Drag and Drop – Ziehen und Fallenlassen)

  Beispiele zu Dropable

• Resizable

  Die Größe aller DOM-Elemente kann ver­än­dert war­den. Mit gedrück­ter Maustaste kann der rech­te oder unte­re Rand sowie die rech­te unte­re Ecke gezo­gen oder gescho­ben wer­den.

  Beispiele zu Resizable

• Selectable

  Jedes DOM-Element oder eine Gruppe von DOM-Elementen kann durch einen Mausklick aus­ge­wählt wer­den. Durch Gedrückthalten der STRG (CTRL) Taste kön­nen meh­re­re Elemente aus­ge­wählt wer­den.
  
  Beispiele zu Selectable

• Sortable

  Eine Gruppe von DOM-Elementen kann sor­tiert wer­den. So kann ein Eintrag in einer Liste per Drag and Drop an eine ande­re Stelle der Liste gezo­gen wer­den und die Liste passt sich dem­entspre­chend an.

  Beispiele zu Sortable

Widgets

Die fol­gen­den Widgets wer­den bereit­ge­stellt.

• Accordion
• Datepicker
• Dialog
• Progressbar
• Slider
• Tabs

• Accordion

  Eine Datenstruktur aus Überschriften und Inhaltsbereichen wird so dar­ge­stellt, dass für alle Überschriften aber jeweils nur ein Inhaltsbereich einer Überschrift ange­zeigt wird. Durch Mouseover oder Klick auf eine Überschrift wird der ent­spre­chen­de Inhaltsbereich ein­ge­blen­det und der zuvor ange­zeig­te Inhaltsbereich wie­der aus­ge­blen­det.

  Beispiele zu Accordeon

• Datepicker

  Durch einen Klick in ein Input-Formularfeld öff­net sich ein Interaktiver Kalender, mit dem sich auf ein­fa­che Weise ein Datum aus­wäh­len und in das Feld ein­fü­gen lässt.

  Beispiele zu Datepicker

• Dialog

  Es wer­den Dialogfenster erzeugt, wie sie aus Betriebssystemen oder Desktop-Anwendungen bekannt sind.

  Beispiele zu Dialog

• Progressbar

  Ein Fortschritts- oder Ladebalken zur Anzeige des aktu­el­len Fortschrittes in Prozent. Dieser Ladebalken kann/sollte nur ver­wen­det wer­den, wenn das Ereignis 100% errei­chen kann, das heißt er soll­te nicht voll­stän­dig gefüllt/geladen sein und sich dann wie­der von neu­em Füllen/Laden.

  Beispiele zu Progressbar

• Slider

  Dieses Widget erzeugt einen Schiebe-Regler, mit dem Werte oder Wertbereich mit­tels Maus und Pfeiltasten aus­ge­wählt wer­den kön­nen.

  Beispiele zu Slider

• Tabs

  Aus Links wer­den Tabs ‚auch Registerkarten oder Karteireiter genannt gene­riert, mit­tels derer zwi­schen logisch geglie­der­ter Inhaltsbereiche gewech­selt wer­den kann.

  Beispiele zu Tabs

Effekte

Die fol­gen­den Effekte wer­den bereit­ge­stellt.

• Add Class
• Remove Class
• Animate
• Effect
• Hide
• Show
• Switch Class
• Toggle
• Toggle Class

• Add Class

  Einem Element wird eine neue Klasse zuge­wie­sen. Soweit nichts Besonderes, jedoch wer­den die Eigenschaften der neu­en Klasse nicht ein­fach ange­zeigt, son­dern ani­miert.

  Beispiele zu Add Class

• Remove Class

  Die Klasse eines Elementes wird ent­fernt. Auch hier geschieht das ani­miert.

  Beispiele zu Remove Class

• Animate

  Mit die­sem Effekt las­sen sich die Eigenschaften von Elementen wie Farbe oder Größe ani­mie­ren.

  Beispiele zu Animate

• Effect

  Verschiedene Effekte wie „Explodieren“ oder „Hüpfen“ kön­nen auf Elemente angwandt wer­den. Die zur Verfügung ste­hen­den Effekte kön­nen alle im Beispiel getes­tet wer­den.

  Beispiele zu Effect

• Hide

  Elemente kön­nen über ver­schie­de­ne Effekte aus­ge­blen­det wer­den. Die zur Verfügung ste­hen­den Effekte kön­nen alle im Beispiel getes­tet wer­den.

  Beispiele zu Hide

• Show

  Elemente kön­nen über ver­schie­de­ne Effekte ein­ge­blen­det wer­den. Die zur Verfügung ste­hen­den Effekte kön­nen alle im Beispiel getes­tet wer­den.

  Beispiele zu Show

• Switch Class

  Zwei Klassen kön­nen als Argumente über­ge­ben wer­den, die Funktion tauscht dann die ers­te über­ge­be­ne Klasse gegen die zwei­te.

  Beispiele zu Switch Class

• Toggle

  Elemente kön­nen über ver­schie­de­ne Effekte ein­ge­blen­det und wie­der aus­ge­blen­det wer­den. Die zur Verfügung ste­hen­den Effekte kön­nen alle im Beispiel getes­tet wer­den.

  Beispiele zu Toggle

• Toggle Class

  Dieser Funktion wird eine Klasse über­ge­ben, die dem jewei­li­gen Element hin­zu­ge­fügt wird, wenn das Element die­se Klasse noch nicht hat, und ent­fernt die Klasse, wenn das Element die­se Klasse hat.

  Beispiele zu Toggle Class

ThemeRoller

Die jQueryUI-Elemente wer­den mit­tels CSS for­ma­tiert. Um die Formatierung zu erleich­tern, bie­tet jQueryUI den ThemeRoller an, eine Web-Oberfläche, mit der man sich auf ein­fa­che Weise ein eige­nes Theme zusam­men­stel­len und die ent­spre­chen­de CSS-Datei ein­fach her­un­ter­la­den kann. Alle Komponenten wer­den dar­ge­stellt und kön­nen über eine Auswahl auf der lin­ken Seite ange­passt wer­den, die Änderungen wer­den sofort über­nom­men, somit kann das Ergebnis sofort kon­trol­liert wer­den. Zusätzlich kön­nen noch fer­ti­ge Themes aus einer Galerie her­un­ter­ge­la­den und bear­bei­tet wer­den.

Download

Im Downloadbereich kön­nen die gewünsch­ten Komponenten ein­zeln aus­ge­wählt wer­den, eini­ge Komponenten set­zen ande­re vor­aus, auf even­tu­el­le Konflikte weist ein Dialog hin.

jQueryUI – feh­ler

Des wei­te­ren kann noch das gewünsch­te Theme sowohl die Version aus­ge­wählt wer­den. Die aktu­el­le Dateigröße wird eben­falls ange­zeigt.

Fazit

Zusammenfassend lässt sich sagen, dass jQueryUI vie­le Interessante und oft benö­tig­te Komponenten in einem anspre­chen­den Design bereit­stellt. Meine per­sön­li­che Lieblingskomponente ist das “Datepicker Widget”, da sich mit ihm auf wirk­lich ein­fa­che Weise die Benutzerfreundlichkeit eines Formulars stei­gern lässt.

Ich möch­te noch ein­mal dar­auf hin­wei­sen, dass es sich hier ledig­lich um eine Übersicht han­delt und nicht jede Komponente im Detail beschrie­ben ist. (tm)