Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Webdesign » jQueryUI – beeindruckende Interaktionen, Widgets und Effekte

jQueryUI – beeindruckende Interaktionen, Widgets und Effekte

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 4 Minuten
  • von Marcel Weber
  • 13. Juli 2009

Inhaltsverzeichnis

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.

jqueryuilogo jQueryUI - beeindruckende Interaktionen, Widgets und Effekte

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.

    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

Marcel Weber

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Wolli Ruf Mediendesign Agentur Freiburg.

wolli ruf – mediendesign

Freiburg im Breisgau

Logo für Opus Marketing aus Bayreuth. Links zu sehen ist eine schwarze Schachfigur, der schwarzer Turm. Daneben in Großbuchstaben die Buchstaben OPUS.

OPUS Marketing

Bayreuth

Farbentour-Logo.

Farbentour®

Mettmann

VABELHAVT

Innsbruck

Wee Media Agentur Logo.

Wee Media | Webdesign Agentur

Dernbach

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

0 Antworten zu „jQueryUI – beeindruckende Interaktionen, Widgets und Effekte“
— was ist Deine Meinung?

  1. Erik sagt:
    21. September 2010 um 20:31 Uhr

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

    Antworten
  2. thomas sagt:
    8. März 2010 um 19:45 Uhr

    vielen dank, sehr gut sammlung.

    Antworten
  3. Ludwig K. sagt:
    13. September 2009 um 17:39 Uhr

    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.

    Antworten
  4. Philipp E sagt:
    18. Juli 2009 um 14:35 Uhr

    Kann man echt alles der jQuery Seite entnehmen!

    Antworten
  5. Matthias sagt:
    14. Juli 2009 um 14:05 Uhr

    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.

    Antworten
  6. Johann sagt:
    13. Juli 2009 um 22:53 Uhr

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

    Antworten
  7. Johann sagt:
    13. Juli 2009 um 22:36 Uhr

    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.

    Antworten
  8. Manuel sagt:
    13. Juli 2009 um 17:17 Uhr

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

    Antworten
  9. Stefan sagt:
    13. Juli 2009 um 12:36 Uhr

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

    Antworten
  10. Thomas Weise sagt:
    13. Juli 2009 um 10:52 Uhr

    Danke ebenfalls für die übersichtliche Zusammenstellung.

    Antworten
  11. Wishu sagt:
    13. Juli 2009 um 9:49 Uhr

    Nette Sammlung. Danke

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑