jQueryUI – beeindruckende Interaktionen, Widgets und Effekte

Marcel Weber

Student der Kommunikations- und Softwaretechnik

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

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.

    Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

    E-Book Bundle von Andreas Hecht

    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

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

Marcel Weber

Student der Kommunikations- und Softwaretechnik

Hinterlasse einen Kommentar

14 Kommentare auf "jQueryUI – beeindruckende Interaktionen, Widgets und Effekte"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
Erik
Gast

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

thomas
Gast

vielen dank, sehr gut sammlung.

Ludwig K.
Gast
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… Read more »
trackback

[…] View original post here: jQueryUI – beeindruckende Interaktionen, Widgets und Effekte | DOM, Javascript, jQuery, Widgets | Dr… […]

Philipp E
Gast

Kann man echt alles der jQuery Seite entnehmen!

Matthias
Gast

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.

Johann
Gast

Mist, gibt keine Korrekturfunktion; meine natürlich, dass es sich um die Bespiele von jqueryui.com handelt…

Johann
Gast

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.

Manuel
Gast

Wird auf jeden Fall mal gespeichert. Wer weiß wann sich soetwas gebrauchen lässt.
Definitiv einer der nützlichsten Artikel der letzten Zeit 🙂

Stefan
Gast

ebenfalls vielen Dank für die Zusammenstellung. Werde gleich mal schauen, was ich davon bei mir umsetzen kann.

trackback

[…] jQueryUI – beeindruckende Interaktionen, Widgets und Effekte […]

Thomas Weise
Gast

Danke ebenfalls für die übersichtliche Zusammenstellung.

Wishu
Gast

Nette Sammlung. Danke