Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Marcel Weber 13. Juli 2009

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

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 - fehler

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)

Marcel Weber

Student der Kommunikations- und Softwaretechnik

11 Kommentare

  1. Wer sei­ne eige­nen Themes spä­ter ein­mal wei­ter bear­bei­ten will, der kann jetzt auf http://jqueryuithemegallery.just-page.de (jQueryUI-ThemeGallery) sein Theme spei­chern und ande­ren zur Verfügung stel­len. Weiterhin ist es mög­lich, ein Theme eines ande­ren Users auf die eige­nen Designvorstellungen angepaßt und anschlie­ßend gespei­chert und/oder her­un­ter­ge­la­den wer­den. Zukünftig soll es mög­lich sein, sei­ne Themes auch zu ver­wal­ten (Sichtbarkeit für ande­re User, löschen etc.). Funktioniert der­zeit nur im Firefox (wei­te­re Informationen dazu fin­det man auf der Homepage von jqueryUI).

  2. vie­len dank, sehr gut samm­lung.

  3. Eine sehr schö­ne Kollektion sinn­vol­ler Anwendungen, wel­che aus die­sem jque­ry gezau­bert wer­den kön­nen.
    Nun, ich bin abso­lu­ter Neuling in Sachen jque­ry. Klar, das eine oder ande­re Mal habe ich mir das eine oder ande­re zusam­men­ge­schus­tert. Bisweilen habe ich aller­dings mit pro­to­ty­pe, script.aculo.us und moo­tools gear­bei­tet.
    Die arbeit mit jque­ry habe ich bis­her immer ein wenig auf­ge­scho­ben. Gründe? Wenn ich mir die auf­ge­zeig­te Kollektion anschaue, fällt mir nicht ein Grund ein. Zudem hat jque­ry einen her­vor­ra­gen­den Ruf in der Entwicklergemeinde (soweit ich dies mit­be­kom­me). In diver­sen Büchern wird auf die­ses JavaScript-Framework ein­ge­gan­gen. Weitere Bücher sol­len zum Thema erschei­nen. Aber kaum ein Buch, Artikel, Video, in wel­chem auf ande­re Frameworks ein­ge­gan­gen wird.

    Danke für die­sen exqui­si­ten Einblick ins Thema und die Möglichkeiten, die sich durch die Arbeit mit jque­ry erge­ben.

  4. Kann man echt alles der jQuery Seite ent­neh­men!

  5. 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 inter­es­san­te CSS-Framework wären schön gewe­sen.

  6. Mist, gibt kei­ne Korrekturfunktion; mei­ne natür­lich, dass es sich um die Bespiele von jqueryui.com han­delt…

  7. Ich fin­de den Artikel mal gar nicht so pri­ckelnd; im Grunde nichts ande­res, als die Beispiele von jquery.com ein­ge­deutscht.

    Nur für die Leute sinn­voll, die so gar kein Englisch kön­nen, hät­te mir auf­grund der Überschrift mehr von dem Beitrag ver­spro­chen.

  8. Wird auf jeden Fall mal gespei­chert. Wer weiß wann sich soet­was gebrau­chen lässt.
    Definitiv einer der nütz­lichs­ten Artikel der letz­ten Zeit :)

  9. eben­falls vie­len Dank für die Zusammenstellung. Werde gleich mal schau­en, was ich davon bei mir umset­zen kann.

  10. Danke eben­falls für die über­sicht­li­che Zusammenstellung.

  11. Nette Sammlung. Danke

Schreibe einen Kommentar zu Matthias Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.