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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…