Special: Die Top 10 Plug-ins für jQuery

Entwickler haben auf Basis der JavaScript- Klassenbibliothek jQuery zahlreiche Plug-ins mit interessanten Zusatzfunktionen kreiert. Wir haben für Sie die 10 besten Plug-Ins zusammengestellt. Erstellen sie ganz einfach moderne Lightbox-Elemente, Bildergalerien, Slider und viele weitere tolle Effekte für Ihre Website (Andreas Hitzig)

Vorherige Seite -1 2 3 4 5 6 7 8 9 10 - Nächste Seite

JQuery bietet aktuell zwei größere Bibliotheken – jQuery und jQuery UI – die aus einer Reihe von Einzelmodulen bestehen. Die Hauptbibliothek laden Sie entweder direkt von der jQuery-Website und platzieren diese auf Ihrem Server oder Sie binden die aktuelle Version, die auf verschiedenen Webservern gehostet wird, per Link ein. Anstelle eines lokalen Verweises setzen Sie in diesen Fällen einen globalen Link, wie beispielsweise auf die Dateien bei Googleapis.com:

<script src=“ https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js“>
</script>

Hinzu kommen teilweise weitere Bestandteile der jQuery UI-Bibliothek, die eine Vielzahl optischer Komponenten beinhaltet. Diese können Sie entweder in ihrer Gesamtheit einbinden oder lediglich die Komponenten, die Sie benötigen. JQuery UI bietet Ihnen die Möglichkeit, diese individuell zusammenzustellen und als eine individuell gestaltete Datei einzubinden. Nutzen Sie dazu den Konfigurator auf der Google UI-Website: http://jqueryui.com/download.

1. Akkordeon-Effekt

Es gibt eine Reihe von Effekten oder Erweiterungen, die direkt von jQuery mitgeliefert werden. Einer davon ist der sogenannte „Akkordeon-Effekt“, mit dem Sie mehrere Inhalte komprimiert darstellen können. Klicken Sie auf eine der Überschriften, wird der komplette Bereich samt Inhalt angezeigt. Der zugehörige HTML-Teil besteht aus einer Überschrift vom Typ „h3“ und einem zugehörigen Inhaltsblock, der mit div-Tags umrandet ist.

<div id=“accordion“>
<h3><a href=“#“>Überschrift 1</a></h3>
<div>Hier kommt der Inhalt</div>
<h3><a href=“#“>Überschrift 2</a></h3>
<div>Hier kommt der Inhalt</div>
</div>

Die Klammer bildet ein weiteres div-Tag, dessen ID innerhalb des folgenden JavaScript-Blocks eine Rolle spielt. Innerhalb von JavaScript rufen Sie lediglich das Element mit der ID „accordion“ auf und weisen diesem die Methode „accordion()“ zu.

<script>
$(function() {
$( „#accordion“ ).accordion();
});
</script>

Damit wird der HTML-Bereich automatisch formatiert und durch die beschriebenen Funktionen erweitert. Die komplette Dokumentation finden Sie direkt auf der jQuery UI-Website (http://jqueryui.com/demos/accordion/). Neben der Standard-Bibliothek von jQuery benötigen Sie zur Ausführung die beiden UI-Komponenten UI Core und UI Widget. Mithilfe von Optionen können Sie den Effekt nach Ihren Wünschen gestalten. Diese Parameter geben Sie beim Aufruf der „accordion()-Methode“ mit:

<script>
$(function() {
$( „#accordion“ ).accordion({
event: „mouseover“
});
});
</script>

Im Beispiel wird als auslösendes Element „mouseover“ hinzugefügt. Berühren Sie nun mit der Maus eine Überschrift vom Typ „h3“, wird der Bereich automatisch geöffnet.

Vorherige Seite -1 2 3 4 5 6 7 8 9 10 - Nächste Seite