Tutorial-Steckbrief

jQuery - Dialoge, Accordions & Co. mit jQuery UI

jQuery - Dialoge, Accordions & Co. mit jQuery UI

13.02.2010 in Javascript-Frameworks von daniel_koch

  • Kategorie: Javascript-Frameworks
  • Erstellt mit Programmversion: 1.3.x
  • Kompatibel ab Programmversion: .
  • Dateigröße (PDF): 1.4 MB
  • Bisherige Zugriffe: 1558
Mit jQuery user interface (UI) gibt es eine auf jQuery aufsetzende Bibliothek, die zahlreiche Funktionen für Effekte, Animationen und Widgets bietet. Insgesamt erweitert jQuery UI den Kern von jQuery um eine Reihe leistungsstarker Interaktions-Plug-ins. Die Plug-ins sind üblicherweise sehr komplex, lassen sich allerdings einfach konfigurieren.
Zum Downloadmanager hinzufügen PDF-Datei herunterladen (1.4 MB)

Über den Autor

Portrait von daniel_koch

daniel_koch

Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 2.450 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 800 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 1.000 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, hoffen wir natürlich, dich als neues Mitglied unserer Kreativ-Community begrüßen zu dürfen.

Gratis-Lern-DVD mit 11 Stunden Video-Training

Als Mitglied bekommst du die PSD-Tutorials.de - Selection-DVD mit über 11 Stunden Video-Trainings als Willkommensgeschenk gratis- Downloadlink gibt es in deinem Profil (Kontrollzentrum).

Jetzt kostenlos registrieren!

DVD-Werbung
Passend zum Inhalt empfehlen wir unsere:

Photoshop-Workshop-DVD - Webdesign

  • Webdesign mit Photoshop: alle erstellten Layouts mit Arbeitsdatei (PSD)!
  • Umsetzung erstellter Weblayouts in HTML/CSS
  • Tipps & Tricks zum Webdesign in Photoshop und zur Webentwicklung
Jetzt informieren Trailer ansehen

Tutorial empfehlen

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)

jQuery UI ist eine Bibliothek, die eine Abstraktionsschicht für Animationen und Interaktionen zur Verfügung stellt. So kann man z.B. unter Zuhilfenahme von jQuery UI ansprechende Drag-&-Drop-Anwendungen entwickeln. Die offizielle Webseite von jQuery UI finden Sie unter http://jqueryui.com/. Dort haben die Entwickler zahlreiche Beispiele veröffentlicht, anhand derer sich die Leistungsfähigkeit der Bibliothek erahnen lässt.

Bilder


Auf dieser Webseite finden Sie Anwendungen für das Sortieren von Inhalten und Animationen. Ebenso werden erweiterte Effekte und modifizierbare Widgets geboten, die auf der Standard-jQuery-Bibliothek aufsetzen, diese also noch einmal erweitern.
jQuery UI läuft stabil in den folgenden Browsern:
  • IE 6.0 und höher
  • FF 2 und höher
  • Safari 3.1 und höher
  • Opera 9.0 und höher
  • Google Chrome

 
Nun ist jQuery UI nicht Teil von jQuery. Vielmehr wird jQuery UI als eigenständiges Projekt innerhalb der jQuery-Bibliothek geführt. Dieser Aspekt hat zur Folge, dass man die Bibliothek zusätzlich zu jQuery laden muss. Auch hier gibt es wieder verschiedene Möglichkeiten. Wer möchte, kann auf die Google-Library-Variante zurückgreifen.
 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 <script type="text/javascript">
 /* <![CDATA[ */
 google.load("jquery", "1.3.2");
 google.load("jqueryui", "1.7.2");
 /* ]]> */
 </script>

Durch die gezeigte Variante wird die gesamte Bibliothek geladen. Diese wird allerdings nicht immer benötigt. Meistens braucht man nur eine bestimmte Funktionalität. Mit dem Download Builder von jQuery UI lassen sich personalisierte Pakete generieren. Diese enthalten dann nur das, was man für seine Anwendung tatsächlich braucht. Der Vorteil dabei: Die Bibliothek ist schlank und übersichtlich. Den Download Builder finden Sie unter http://jqueryui.com/download.

Bilder


Über die Oberfläche lassen sich die gewünschten Komponenten auswählen. Dabei sind die Komponenten in mehrere Kategorien unterteilt.
  • UI Core
  • Interactions
  • Widgets
  • Effects

Wollen Sie z.B. ausschließlich den Datumspicker in Ihre Webseite einbinden, aktivieren Sie lediglich im Bereich Widgets die Option Datepicker. (In diesem Tutorial wird übrigens noch – um Ihnen einen ersten Eindruck davon zu vermitteln, wie sich jQuery UI "anfühlt" – eine Datumspicker-Anwendung erstellt).

Bilder


 
Zwischen den einzelnen Komponenten bestehen u.U. Abhängigkeiten. Möchten Sie also z.B. Sortable verwenden, müssen Sie zusätzlich UI Core und Draggable aktivieren. Da man die Abhängigkeiten für gewöhnlich nicht kennt, wird man – sollten nicht alle notwendigen Pakete ausgewählt sein – vom Download Builder darauf hingewiesen bzw. die notwendigen Pakete werden automatisch ausgewählt.

Bilder


 
Nachdem die gewünschten Komponenten aktiviert sind, kann das personalisierte Paket über die Download-Schaltfläche im rechten Fensterbereich heruntergeladen werden.

Bilder


Das Paket kommt in Form eines Zip-Archivs daher. Darin befinden sich zwei Verzeichnisse:
  • development_bundle – In diesem Verzeichnis sind Demo-Anwendungen, die Lizenzbedingungen usw. enthalten.
  • js – Darin liegen die eigentlichen Dateien der Bibliothek.

 
Für die tägliche Arbeit ist der Inhalt des js-Verzeichnisses interessant. Hier finden Sie eine jQuery-Datei und die benutzerdefinierte Datei für jQuery UI. Achten Sie darauf, dass die Versionen von jQuery und jQuery UI zusammenpassen. Für welche Version von jQuery die heruntergeladene Datei jQuery UI passt, können sie u.a. im rechten Fensterbereich des Download Builders erkennen.

Bilder


 
Zwar muss es nicht zwangsläufig zu Problemen kommen, wenn man eine andere Version von jQuery einbindet als die dort angegebene ... riskieren sollte man es aber trotzdem nicht.
Die heruntergeladene benutzerdefinierte Bibliothek muss entsprechend eingebunden werden.
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>

Achten Sie darauf, immer zuerst jQuery einzubinden. Erst danach darf der Aufruf von jQuery UI erfolgen.


Ein erstes Beispiel

Wie jQuery UI eingebunden wird, haben Sie gesehen. Anhand eines kleinen Beispiels wird nun gezeigt, wie sich jQuery UI nutzen lässt. Das Ergebnis der folgenden Schritte wird die Anzeige eines Datumspickers sein.

 

[Beispiel anzeigen]

Bilder


 
Einen solchen Datumspicker bzw. eine solche Funktion zur Datumsauswahl kennen Sie von zahlreichen Webseiten. Egal, ob bei Fluggesellschaften oder Konzertveranstaltern, fast überall werden diese praktischen Tools angeboten. Kein Wunder, schließlich können die Kunden so ganz bequem das gewünschte Datum auswählen. Fehleingaben und das manuelle Eintragen von Datumsangaben gehören somit der Vergangenheit an.

Eine solche Anwendung lässt sich Dank jQuery UI sehr einfach umsetzen. Dafür bindet man zunächst – wie das bereits gezeigt wurde – sowohl jQuery als auch jQuery UI ein. Achten Sie unbedingt darauf, dass im Download Builder im Bereich Widgets der Eintrag Datepicker ausgewählt wurde.

Bilder


 
Nur so lässt sich der Datumspicker dann auch tatsächlich in die Webseite einbinden. Im nächsten Schritt muss innerhalb der Webseite das Datumsfeld generiert werden. Dabei handelt es sich um ein einfaches Textfeld.
<p>Datum: <input id="datum" type="text"></p>

Klickt der Anwender später in dieses Textfeld, öffnet sich der Datumspicker. Das ausgewählte Datum wird dann innerhalb dieses Textfeldes angezeigt. Dem Eingabefeld wird im aktuellen Beispiel die ID datum zugewiesen. Mehr ist aus HTML-Sicht nicht nötig. Was jetzt noch fehlt, ist das eigentliche Skript. Dank jQuery UI hält sich dessen Umfang stark in Grenzen. Wenige Zeilen Code genügen, um die gewünschte Funktionalität bereitstellen zu können.
[Beispiel anzeigen]
<script type="text/javascript">
$(function() {
 $("#datum
").datepicker();
});
</script>

Es muss zunächst die ID des Eingabefeldes angegeben werden. Anschließend für man den Aufruf der eigentlichen Funktion zu. Im Fall des Datumspickers heißt diese datepicker(). Mehr ist nicht nötig. Ein kontrollierender Blick auf das Ergebnis liefert den Beweis, dass der Datumspicker voll einsatzfähig ist.
[Beispiel anzeigen]

Bilder


Klickt man in das Eingabefeld, wird das Datumsfeld angezeigt. Über dieses Feld kann das gewünschte Datum ausgewählt werden. Die Auswahl wird dann automatisch in das Textfeld übernommen.
Zugegebenermaßen ist der Datumspicker bislang optisch noch nicht ansprechend. Das lässt sich jedoch durch etwas CSS ändern. Noch etwas stört jedoch: Der Datumspicker kommt mit einer englischsprachigen Oberfläche daher. Auch das kann man anpassen. Beide Aspekte werden in einem späteren Datumspicker-Tutorial gezeigt. Denn in der Tat wird eine solche Funktion erfahrungsgemäß immer mal wieder benötigt.

Fazit

Die mächtige Bibliothek jQuery UI erweitert noch einmal den Funktionsumfang von jQuery. Dank einfachster Syntax lassen sich aufwendige Anwendungen im Handumdrehen erstellen. Egal ob Akkordeon, Drag&Drop oder Datumspicker ... wenige Zeilen Code genügen bereits. Im Rahmen dieser jQuery-Tutorialreihe wird immer mal wieder auf jQuery UI zurückgegriffen.

vBulletin 0.066 • ZF-App 0.435 • Total 0.5