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 lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.