Anzeige
Tutorialbeschreibung

jQuery - Mit Plug-ins arbeiten (am Beispiel einer Diashow)

jQuery - Mit Plug-ins arbeiten (am Beispiel einer Diashow)

Dass jQuery ein mächtiges Framework ist, wurde in den bisherigen Tutorials mehr als deutlich. Dennoch gibt es noch eine Steigerung. Durch Plug-ins lässt sich das Framework nämlich um weitere Funktionen erweitern. Dank dieser Plug-ins kann man beispielsweise Ajax-Effekte integrieren und Menüs auf besondere Art und Weise darstellen. Dieses Tutorial zeigt, woher man die Plug-ins bekommt und wie man diese einbindet. Da sich diese Thematik erfahrungsgemäß am besten mit einem Beispiel demonstrieren lässt, wird das hier anhand des Plug-ins Cycle gezeigt. Mit diesem Plug-in lassen sich effektvolle Diashows realisieren.


Zentrale Anlaufstelle für jQuery-Plug-ins ist die Seite http://plugins.jquery.com/. (Beachten Sie aber, dass es auch zahlreiche Plug-ins gibt, die auf anderen Webseiten zu finden sind. Sehr oft sind diese dann allerdings unter http://plugins.jquery.com/ zumindest verlinkt).

Bilder



 
Hier sind mittlerweile ca. 2000 Plug-ins aufgeführt, wobei täglich neue hinzukommen. Der Übersichtlichkeit halber werden die Plug-ins in Kategorien wie Ajax, DOM und Forms aufgeteilt. So zahlreich die Plug-ins aber auch tatsächlich sein mögen ... eines haben sie gemeinsam: Sie werden alle auf die gleiche Art und Weise eingebunden. Zunächst integriert man auf dem üblichen Weg jQuery
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
/* <![CDATA[ */
  google.load("jquery", "1.3.2");
/* ]]> */
</script>

Erst danach darf das gewünschte Plug-in aufgerufen werden. Damit das funktioniert, muss man dieses zunächst herunterladen und bereitstellen. Auf der offiziellen Plug-ins-Webseite finden Sie zu jedem Plug-in üblicherweise einen entsprechenden Download-Link.

Bilder



 
Dieser führt zur Download-Datei. Dabei kann es sich um eine TXT-Datei oder um ein Zip-Archiv handeln. Wird eine TXT-Datei zum Download angeboten, laden Sie diese herunter und benennen sie in eine JavaScript-Datei mit dem Suffix *.js um. Zip-Archive müssen hingegen zunächst entpackt werden.

Wie man mit Plug-ins arbeitet, wird hier anhand des Plug-ins Cycle gezeigt. Darüber lassen sich anspruchsvolle Diashows realisieren. Zunächst muss das Plug-in heruntergeladen werden. Geben Sie dazu auf der Plug-in-Seite von jQuery den Suchbegriff Cycle ein.

Bilder



 
In der Trefferliste findet sich dann u.a. das gewünschte Plug-in. Nun ist Cycle eines von den Plug-ins, die nicht direkt von der Seite http://plugins.jquery.com/ heruntergeladen werden können. Stattdessen findet man in der Beschreibung einen Link auf die offizielle Projekt-Webseite. Folgt man diesem, wird man auf die Seite http://jquery.malsup.com/cycle/download.html geleitet. Von dort kann die jeweils aktuellste Cycle-Version heruntergeladen werden. Im Fall von Cycle handelt es sich bei dem Download um ein Zip-Archiv, das man zunächst entpacken muss.

Bilder



 
Darin sind verschiedene Dateien enthalten, zu denen auch diverse JavaScript-Dateien gehören. Innerhalb des src-Verzeichnisses liegen die JavaScript-Dateien in unkomprimierter Form. Diese dienen allerdings eher der Dokumentation. Eingebunden werden üblicherweise immer komprimierte Dateien. Im vorliegenden Fall genügt die minimale Variante jquery.cycle.all.min.js. Diese bietet lediglich den Effekt fade, reicht für Demonstrationszwecke aber völlig aus. (Bei umfangreichen Plug-ins finden Sie meistens noch eine readme.txt, in der dann noch einmal explizit aufgeführt ist, wofür die einzelnen Dateien eigentlich da sind).

Nachdem also jQuery eingebunden ist, wird das eigentliche Plug-in geladen.
<script type="text/javascript" src="jquery.cycle.all.min.js"></script>
In diesem Beispiel wird davon ausgegangen, dass sich die jquery.cycle.all.min.js im gleichen Verzeichnis wie die HTML-Datei befindet. (An dieser Stelle noch einmal der Hinweis, dass die Plug-in-Datei unbedingt nach jQuery geladen werden muss).

Damit sind die Vorarbeiten abgeschlossen und man kann mit den vom jeweiligen Plug-in bereitgestellten Funktionen arbeiten. Welche Funktionen bereitgestellt werden, muss man dabei der jeweiligen Dokumentation entnehmen. Leider zeigt die Erfahrung, dass nicht immer alle Plug-ins gut dokumentiert sind. Meistens gibt es allerdings Beispiele, anhand derer man erkennen kann, wie sich das Plug-in nutzen lässt.

Im Fall des Cycle-Plug-ins ist das der Fall. Einen guten Einstieg in dieses Plug-in bietet beispielsweise die Seite http://malsup.com/jquery/cycle/begin.html.
 
Bilder



Hier wird anhand mehrerer Beispiele gezeigt, wie sich die Funktionen nutzen lassen. Mit diesem Wissen ausgestattet, kann man seine eigene Anwendung schreiben. Nachdem jQuery und das Plug-in eingebunden sind, kann mit dem eigentlichen Skript begonnen werden.
[Beispiel anzeigen]

Legen Sie dafür zunächst den CSS- und HTML-Bereich an. Der HTML-Teil könnte folgendermaßen aussehen:
<div id="rahmen"> 
  <img src="bild1.jpg" width="300" height="230" alt="Bild 1" /> 
  <img src="bild2.jpg" width="300" height="230" alt="Bild 1" /> 
</div>

Hier wurden einfach zwei Bilder in einen div-Rahmen eingefügt. Diese Bilder werden nun noch entsprechend mit CSS gestaltet.
#bilder { 
  width: 330px; 
  height: 260px; 
} 
#rahmen img { 
  width: 300px; 
  height: 230px;
  padding: 20px; 
  background-color: #eee; 
}

Damit steht das Grundlayout. Ruft man diese Seite nun allerdings im Browser auf, ist das nicht sonderlich aufregend.
 
Bilder



 
Die Bilder werden einfach nebeneinander angezeigt. Das ändert sich, wenn das Cycle-Plug-in eingesetzt wird. Im einfachsten Fall kann man das folgendermaßen machen:<script type="text/javascript">
/* <![CDATA[ */                                             
$(function(){
  $('#rahmen').cycle('fade');
});
/*  */
</script>

Ruft man diese Seite nun erneut im Browser auf, werden die Bilder automatisch gewechselt. (Wenn Sie sich jetzt überlegen, wie vergleichsweise aufwendig sich ein herkömmlicher Bilderwechsel mit normalem JavaScript realisieren lässt, werden einmal mehr die Vorteile des jQuery-Plug-in-Konzepts deutlich).
[Beispiel anzeigen]

Nun ist ein solch einfacher Bilderwechsel natürlich längst nicht alles, was Cycle zu bieten hat. Denn der Bilderwechsel lässt sich auch noch per Mausklick anstoßen.
[Beispiel anzeigen]

Und das funktioniert dann vor- und rückwärts. Sehen Sie sich zum besseren Verständnis zunächst die neue Diashow in Aktion an.
Der Skript-Bereich sieht folgendermaßen aus:
<script type="text/javascript">
/* <![CDATA[ */                                             
$(function(){
  $('#rahmen').cycle({
    fx: 'uncover',
    timeout: 0,
    next: '#weiter',
    prev: '#zurueck' 
  });
});
/* ]]> */
</script>

Entscheidend ist, dass das passende Element über
  $('#rahmen').cycle()

ausgewählt wird. Bei dem hier angegebenen Element handelt es sich um den div-Bereich mit der ID rahmen. Die Anweisung
fx: 'uncover',

bestimmt die Art des Bildübergangs. Neben uncover gibt es noch zahlreiche andere Übergänge wie scrollDown und fade. In diesem Fall hilft wieder ein Blick in die offizielle Dokumentation des Plug-ins. Über
timeout: 0,

wird festgelegt, dass die Diashow nicht automatisch läuft, sondern durch den Benutzer gesteuert wird. Damit das funktioniert, muss eine entsprechende Navigation eingefügt werden.
<div id="rahmen"> 
  <img src="bild1.jpg" width="300" height="230" alt="Bild 1" /> 
  <img src="bild2.jpg" width="300" height="230" alt="Bild 1" /> 
</div> 
<a href="#" id="zurueck">zurück</a>
<a href="#" id="weiter">weiter</a>

Und diese beiden Links werden dann auch noch im Skript angesprochen.
next: '#weiter',
prev: '#zurueck' 

Weitere Angaben sind für diese Diashow nicht nötig.

Fazit

Dieses Tutorial hat einen ersten Eindruck davon vermittelt, wie sich jQuery mittels Plug-ins erweitern lässt. Es werden im Laufe dieser Tutorial-Serie zu jQuery immer wieder entsprechende Plug-ins vorgestellt. Denn schließlich kann man mit denen den ohnehin bereits enormen Funktionsumfang von jQuery noch einmal deutlich steigern.


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Magmina
  • 22.02.2011 - 18:59

Super Erklärt. Danke.

Portrait von Feanor79
  • 30.06.2010 - 09:44

Sehr schön. Werde es direkt mal testen!

Portrait von oionline
  • 07.03.2010 - 15:11

Super Erklärung, ohne eine entsprechende Einleitung in die Technik wirds ganz schön kompliziert.

Portrait von websmurf
  • 28.12.2009 - 09:10

Wie immer interessant. Der Teil wie man Plugins herunterlädt war mir persönlich zu ausführlich. Den Dateidownload sollten die Leute doch beherrschen.

Portrait von Rembremerding
  • 28.12.2009 - 01:59

Danke weiter so. Gut und verständlich.

Portrait von Niobe
  • 27.12.2009 - 18:46

ho, ho, ho, fast noch eine weitere Weihnachtsüberraschung! Ausgezeichnet erklärt. Da hat sich die Empfehlung von Sokie erst recht als richtige Wahl herausgestellt.
Schön wäre nun noch ein weiteres Beispiel mit einigen Effekten, damit man/Frau das auch noch mitbekommt und einbinden kann. Wäre echt eine feine Sache. Vielen Dank für das aufschlussreiche Tut.

Portrait von und3r74k3r
  • 26.12.2009 - 00:27

echt klasse, gut und verständlich erklärt

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 25.12.2009 - 19:41

sieht zwar toll aus - ist aber nicht das was ich gesucht hab.

Portrait von mpower99
  • 25.12.2009 - 15:57

sau geil gemacht. vorallem die idee find ich richtig gut

Portrait von rolfspiess
  • 25.12.2009 - 14:28

toll und sehr gut erklärt. weiterso.!

Portrait von sokie
  • 25.12.2009 - 20:02

das letzte Beispiel hat doch eine Navigation...<br>
alles was du da noch tun musst, ist statt der <i>"zurück"</i> und <i>"weiter"</i> deine Button-Grafiken da einzusetzen...

Portrait von Pfoto76
  • 25.12.2009 - 09:02

Ein letztendliches Beispiel (mit Nav-Buttons) finde ich derzeit aber auch nicht.

Portrait von aidan
  • 24.12.2009 - 10:07

ich find alle deine tuts toll, jedoch wünsche ich mir schon immer ein letzendliches ergebnis zum "anfassen". hier zB die von dir gezeigte diashow zum ausprobieren am tutorial anhängen vl? :P

frohe weihnachten

Portrait von Tim

Tim

  • 24.12.2009 - 17:33

Im Beitrag sind mehrere Links die mit "Beispiel anzeigen" betitelt sind. Da findest du funktionsfähige Ansichten des Endergebnisses

x
×
×