jQueryUI – beeindruckende Interaktionen, Widgets und Effekte

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.

jQueryUI - Beispiel Auswahl

Interaktionen

Die folgenden Interaktionen werden bereitgestellt.

• Dragable
• Dropable
• Resizable
• Selectable
• Sortable

• Dragable

  Alle DOM-Elemente können mit gedrückter Maustaste verschoben werden.

  Beispiele zu Dragable

• 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)

  Beispiele zu Dropable

• 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.

  Beispiele zu Resizable

• 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 Selectable

• Sortable

  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.

  Beispiele zu Sortable

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.

  Beispiele zu Accordeon

• 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.

  Beispiele zu Datepicker

• Dialog

  Es werden Dialogfenster erzeugt, wie sie aus Betriebssystemen oder Desktop-Anwendungen bekannt sind.

  Beispiele zu Dialog

• 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.

  Beispiele zu Progressbar

• Slider

  Dieses Widget erzeugt einen Schiebe-Regler, mit dem Werte oder Wertbereich mittels Maus und Pfeiltasten ausgewählt werden können.

  Beispiele zu Slider

• Tabs

  Aus Links werden Tabs ,auch Registerkarten oder Karteireiter genannt generiert, mittels derer zwischen logisch gegliederter Inhaltsbereiche gewechselt werden kann.

  Beispiele zu Tabs

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.

  Beispiele zu Add Class

• Remove Class

  Die Klasse eines Elementes wird entfernt. Auch hier geschieht das animiert.

  Beispiele zu Remove Class

• Animate

  Mit diesem Effekt lassen sich die Eigenschaften von Elementen wie Farbe oder Größe animieren.

  Beispiele zu Animate

• 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.

  Beispiele zu Effect

• Hide

  Elemente können über verschiedene Effekte ausgeblendet werden. Die zur Verfügung stehenden Effekte können alle im Beispiel getestet werden.

  Beispiele zu Hide

• Show

  Elemente können über verschiedene Effekte eingeblendet werden. Die zur Verfügung stehenden Effekte können alle im Beispiel getestet werden.

  Beispiele zu Show

• Switch Class

  Zwei Klassen können als Argumente übergeben werden, die Funktion tauscht dann die erste übergebene Klasse gegen die zweite.

  Beispiele zu Switch Class

• 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.

  Beispiele zu Toggle

• 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.

  Beispiele zu Toggle Class

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.

jQueryUI - fehler

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. ™