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 2200 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 500 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 1000 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, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Das Punktesystem

Einen winzigen Haken gibt es noch. Es gibt bei uns ein Punktesystem. Damit soll erreicht werden, dass Mitglieder sich aktiv in unserer Community beteiligen. Sobald du im Forum schreibst oder Tutorials kommentierst, bekommst du Punkte. Mit diesen Punkten kannst du wiederum Tutorials anschauen oder Downloads herunterladen. Mit der Registrierung bei PSD-Tutorials.de erhältst du ein Startguthaben von 100 Punkten, womit du schon ein gutes Stück weit kommst.

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

Kommentare

  • Alternative Portrait von strohk

    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

    User hat PSD-Tutorials.de 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

    FreddyX2

    21.03.2010 - 00:31

    Mir hat das Tutorial gefallen :)

    Vielen Dank

  • Portrait von aidan

    aidan

    22.02.2010 - 17:53

    accordion einbinden klappt nicht bei mir -.-
    trotz anleitung

  • Alternative Portrait von dickerfreddy

    dickerfreddy

    21.02.2010 - 17:45

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

  • Alternative Portrait von crashT

    crashT

    19.02.2010 - 10:35

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

Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

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.037 • ZF-App 0.445 • Total 0.481