Anzeige
Tutorialbeschreibung

jQuery - Dialoge, Accordions & Co. mit jQuery UI

jQuery - Dialoge, Accordions & Co. mit jQuery UI

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.


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.


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von strohk
  • 01.03.2011 - 12:58

Das Tutorial war super, das man die Google Libarys benutzen kann war mir noch nicht bekannt.
Eine evtl. Weiterverarbeitung des ausgewähltem Datums wäre noch ineressant gewesen.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 23.03.2010 - 12:22

Schade, dass hier nur die Einbindung beschrieben wurde und nur 6 Zeilen Quellcode vorkommen. Anhand des Titels habe ich mir mehr erhofft.
Von der Verständlichkeit jedoch top :)

Portrait von FreddyX2
  • 21.03.2010 - 00:31

Mir hat das Tutorial gefallen :)

Vielen Dank

Portrait von aidan
  • 22.02.2010 - 17:53

accordion einbinden klappt nicht bei mir -.-
trotz anleitung

Portrait von dickerfreddy
  • 21.02.2010 - 17:45

Danke für die ausführliche Darstellung, werde ich bestimmt ausprobieren

Portrait von crashT
  • 19.02.2010 - 10:35

Hätte mir wirklich mehr als ein paar Einbindungshinweise erwartet. Schade!

x
×
×