Teil 7: Workshop Javascript-Bibliothek: Einstieg in jQuery

1. Workshop Javascript-Bibliothek: Einstieg in jQuery
2. Teil 2: Workshop Javascript-Bibliothek: Einstieg in jQuery
3. Teil 3: Workshop Javascript-Bibliothek: Einstieg in jQuery
4. Teil 4: Workshop Javascript-Bibliothek: Einstieg in jQuery
5. Teil 5: Workshop Javascript-Bibliothek: Einstieg in jQuery
6. Teil 6: Workshop Javascript-Bibliothek: Einstieg in jQuery
7. Teil 7: Workshop Javascript-Bibliothek: Einstieg in jQuery
8. Teil 8: Workshop Javascript-Bibliothek: Einstieg in jQuery

Danach können Sie das $-Zeichen so verwenden, wie es in der anderen Bibliothek benutzt wird. Um jQuery-Befehle auszuführen, setzen Sie dann jQuery anstelle von $ ein:

jQuery(function() {
jQuery('p').addClass('betont');
});

Plugins schnell eingesetzt

Eine Vielzahl von Plugins erweitert die Grundfunktionalität von jQuery. Plugins für die Benutzeroberfläche sind unter jQuery UI zusammengefasst. Dazu gehört auch das Plugin Accordion. Accordion ermöglicht eine übersichtliche Darstellung von Inhalten: Die gerade Ausgewählten werden ausgeklappt angezeigt, die anderen eingeklappt.

Zuerst braucht es die richtige HTML-Grundstruktur.

<div id="accordion"><h3><a href="#">1. Überschrift</a></h3><div><p>1. Inhalt</p></div><h3><a href="#">2. Überschrift</a></h3><div><p>2. Inhalt</p></div></div>

Dann müssen Sie im head-Bereich nach dem Verweis auf die jQuery-Bibliothek noch die erforderliche Javascript-Datei für die Accordion-Funktionalität einbinden. Das ist neben der eigentlichen Datei für das Accordion bei allen UI-Plugins die generische UI-Datei.

In unserem Beispiel werden die Dateien vom jQuery-Server geladen, Sie können sie sich natürlich auch herunterladen und die lokale Kopie benutzen.

<script type="text/javascript"
src="http://jqueryui.com/latest/ui/ui.core.js"></script><script type="text/javascript"
src="http://jqueryui.com/latest/ui/ui.accordion.js"></script>

Die Aktivierung des Plugins geht rasch vonstatten:

$(function(){
$('#accordion').accordion();
});

Zuerst wählen Sie über einen Selektor das Element aus, für das Accordion aktiviert werden soll, und ergänzen dahinter den Befehl accordion(). Damit steht die Grundfunktionalität, die Sie jetzt noch an Ihre Bedürfnisse anpassen können.

Weitere Optionen übergeben Sie in Form eines Objektliterals. Soll beispielsweise nicht der erste, sondern der zweite Punkt automatisch ausgeklappt sein, notieren Sie active: 1 (die Zählung beginnt bei 0).

Wenn außerdem die Aktivierung nicht per Klick, sondern bei Mouseover erfolgen soll, ergänzen Sie event: 'mouseover'

$('#accordion').accordion({
event: 'mouseover',
active: 1
});

Genauso einfach können Sie auch andere Plugins einsetzen.