Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agentur finden
    • 3D Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt

< dr. web > » JavaScript & jQuery » jQueryUI – beeindruckende Interaktionen, Widgets und Effekte

jQueryUI – beeindruckende Interaktionen, Widgets und Effekte

  • Aktualisiert am 5. Mai 2023
  • Marcel Weber von Marcel Weber
  • JavaScript & jQuery
  • 11 Kommentare

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

    Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
    ✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

    Dr. Web Newsletter

    Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.

    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

Inhaltsverzeichnis

Lust auf mehr?

Wenn das Webdesign verschwindet: Headless Browser brauchen keine schöne Gestalt

Ist der Browser, wie wir ihn heute kennen, ein Auslaufmodell? Können wir auch ohne ihn das Web nutzen? Die Antwort auf die zweite Frage ist ein klares Ja. Das Headless Web macht es möglich.

Einfache Lösungen für dynamisches Webdesign mit HTML5-Data-Attributen

Lebendige Effekte auf Websites können dir im Wettbewerb um die Aufmerksamkeit der Nutzer gute Dienste leisten. Du denkst vielleicht direkt an parallaxes Scrolling. Das aber ist nicht die einzige Option für dynamisches Webdesign.

JavaScript und Suchmaschinen: Das solltest du beachten

Noch vor einigen Jahren war JavaScript mehr als umstritten. Nervige Werbe-Pop-ups führten dazu, dass die Programmiersprache oft ganz grundsätzlich blockiert wurde. Mittlerweile ist JavaScript aus dem modernen Webdesign nicht mehr wegzudenken. Vor allem im mobilen Internet spielt JavaScript eine wichtige Rolle – unter anderem zur Medienwiedergabe, aber auch für Geolocation und moderne Navigationen. Doch wie gut verträgt sich JavaScript mit Suchmaschinen? Was musst du beachten?

11 Antworten

  1. Wishu sagt:
    13. Juli 2009 um 9:49 Uhr

    Nette Sammlung. Danke

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

    Danke ebenfalls für die übersichtliche Zusammenstellung.

    Antworten
  3. 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
  4. 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
  5. 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
  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. 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
  8. Philipp E sagt:
    18. Juli 2009 um 14:35 Uhr

    Kann man echt alles der jQuery Seite entnehmen!

    Antworten
  9. 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
  10. thomas sagt:
    8. März 2010 um 19:45 Uhr

    vielen dank, sehr gut sammlung.

    Antworten
  11. 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

Schreibe einen Kommentar Antworten abbrechen

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

Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Alle Städte und Leistungen
  • Alle Städte
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich
  • Alle Städte und Leistungen
  • Alle Städte
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich

Agentur nach Schwerpunkt finden

  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden
  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen