Mehr Effizienz bei weniger Aufwand

Teil 7: 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.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".