Kurs:Neueste Internet- und WWW-Technologien/jQuery und jQueryTools

JQuery ist eine browserübergreifende JavaScript Bibliothek, die nach dem eigens zugrunde gelegten Prinzips "Write less, do more"(zu deutsch:"Schreibe weniger, mache mehr") arbeitet. Sie dient dazu, die clientseitige Nutzung von Scriptelementen zu vereinfachen, indem sie die von JavaScript bereitgestellten Funktionen aufbereitet und kapselt. Mit Version 1.0 erschien die erste Version von JQuery im August 2006. JQuery wurde von John Resig entwickelt und unterliegt der GPL- und der MIT-Lizenz und ist damit auch für den kommerziellen Einsatz geeignet. Aktuell liegt JQuery in der Version 1.7.2 vor und bringt es in der minimierten, der Produktionsversion komprimiert auf 32kB, unkomprimiert auf 93kB und in der Entwicklungsversion unkomprimiert auf 257kB. Zudem bietet JQuery Funktionalitäten zum Selektieren im Document Object Model und zu deren Manipulation, zahlreiche Effekte und Animationen, Ajax-Funktionalitäten und erfreut sich einer einfachen Erweiterbarkeit durch Plug-ins.

JQuery Tools baut auf den Funktionen von JQuery auf, ist aber nur eine kleinere Teilmenge von JQuery UI. JQuery Tools bietet einen generischen Ansatz für Nutzerinterface-Elemente und dient zum Aufbessern von herkömmlichen Webseiten, um das Nutzererlebnis beim Besuch einer Webseite zu steigern. Aktuell liegt es in Version 1.2.7 vor. Beim Download hat man die Möglichkeit, die Bibliothek nach seinen eigenen Vorstellungen zu konfigurieren, indem man nur die Teile auswählt, die in einem späteren Projekt wirklich verwendet werden. Aktuell bringt es JQuery Tools ohne JQuery auf eine Gesamtgröße von 43.3kb, wenn man alle Teile zum Download auswählt, mit JQuery kommt man auf 136kb.

Grundsätzlich besteht eine Webseite aus 3 Komponenten. Die Struktur wird durch das HTML-Dokument bestimmt, das Design durch CSS und das Verhalten durch Javascript. Würde man JQuery in eine dieser drei Komponenten einer Webseite einordnen wollen, so würde man es in die Verhaltenskomponente einordnen.

JQuery

Allgemeines

Darstellbarkeit im Browser

JQuery ist eine Cross-Browser Bibliothek. Volle Unterstützung wird für den Internetexplorer ab Version 6.0, für den Firefox ab Version 3.6, für Safari ab Version 5.0 und für Chrome und Opera garantiert.

Voraussetzungen für die Entwicklung

JQuery ist sowohl browser- als auch plattformunabhängig. Man kann also gleichermaßen unter Windows, Linux oder Mac OS X arbeiten. Da nicht alle Browser auf jedem Betriebssystem gleichermaßen arbeiten können, benötigt man allerdings gewisse Tricks wie Virtualisierung, um zum Beispiel mit dem Internetexplorer unter Mac OS X zu arbeiten.

Um JQuerycode zu schreiben und zu testen, kann man sich eines beliebigen Editors bzw. einer beliebigen IDE bedienen.

Einbindung

Um die Funktionalitäten von JQuery nutzen zu können, kann man die Bibliothek auf verschiedene Weisen in seine Webseite einbinden.

Hierzu stehen zunächst einmal zwei mögliche Ausprägungen zur Verfügung. Auf der einen Seite gibt es die unkomprimierte Version, welches die Entwicklerversion ist. Sie ermöglicht einen tieferen Einblick in die genaue Funktionsweise von JQuery. Auf der anderen Seite steht die minimierte Version, welche für den Produktiveinsatz gedacht ist. Diese Version reicht vollkommen aus, um alle Funktionalitäten zu nutzen.

Lokal lässt sich JQuery über den Dokumentkopf des HTML Dokumentes mit folgendem Script-Befehl laden.

<script type="text/javascript" src="jquery-1.7.2.js ">

Bei dieser Variante müssen sich die Dateien natürlich im gleichen Ordner befinden. Je nach dem, wo sich die Bibliothek auf dem Produktionsserver befindet, muss der Pfad im src-Attribut entsprechend angepasst werden.

Eine weitere Möglichkeit, die Bibliothek einzubinden, ist sie über einen externen Anbieter zu laden. Im Folgenden zweiten Beispiel, welches ebenfalls im Kopf des entsprechenden HTML-Dokumentes seinen Platz findet, wird die Bibliothek beim Aufbau der Seite aus dem Content Delivery Network(CDN) von Google geladen.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Die dritte Möglichkeit ist eine Erweiterung der zweiten. Hierbei wird ebenfalls das Content Delivery Network von Google angesprochen, allerdings mit dem load-Befehl der Google-Api. Der erste Parameter innerhalb der google.load()-Funktion steht für das Framework, in diesem Fall JQuery, der zweite Parameter gibt die gewünschte Version an. Google liefert einem Nutzer automatisch die aktuellste zum angegebenen Parameter passende Version. Möchte man also Version 1.4.1 so muss man "1.4.1" angeben. Würde man nur "1.4" angeben, so würde Google die Version "1.4.4" ausliefern, da dies die aktuellste Version, die auf das Muster "1.4" passt, ist. Würde man nur "1" angeben, so würde man die momentan aktuellste Version "1.7.2" erhalten. Sollte der Entwickler der Webseite doch auf die unkomprimierte Entwicklerversion zurückgreifen wollen, müsste ein dritter Parameter eingefügt werden. Dieser lautet "{uncompressed:true}". Nutzt man die Google-onLoad Variante, so sollte man auf den setOnLoadCallback zurückgreifen und hier den Code notieren, der andernfalls in der $(document).ready() stünde.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1.7.2"); 
  google.setOnLoadCallback(function() {
  });
</script>

Die Vorteile der Content Delivery Network Varianten sind unter anderem die folgenden drei. Nach Auflösen der Adresse des CDN wird der am nächsten stehende Server mit der gewünschten Datei nach dieser angefragt, um diese dann von diesem herunterzuladen. So kann auch jemand, der z.B. auf einem dem eigenen Server fremden Kontinent die Seite aufruft, die benötigte Bibliothek schnell von einem ihm nahen Server beziehen. Zusätzlich wird der Parallelismus gesteigert, da ältere Browservarianten nicht mehr als zwei Verbindungen zu ein und demselben Host aufbauen können. Auf diesem Weg können die Dateien der Seite direkt heruntergeladen werden, während die JQuery Bibliothek über einen weiteren Host, eben dem CDN bezogen werden. Der dritte Vorteil liegt darin, dass es dem Nutzer möglicherweise ersparrt wird, die Bibliothek erneut zu laden, da sie nur erneut geladen werden würde, wenn er sie nicht noch im Speicher hätte.

Nachteilig an der Sache ist, dass die externen Bereitsteller jederzeit erreichbar sein müssen. Bei Google ist dies meist der Fall, allerdings gilt dies nicht für jedes CDN. Außerdem wäre es möglich, dass die externen Bereitsteller, den Zugriff protokollieren.

Grundsätzlich empfiehlt es sich, JQuery im Kopf des HTML-Dokumentes nach den CSS Dateien einzubinden, allerdings vor den eigentlichen Script-Befehlen.

Nutzung

Der eigentliche JQuery-Code wird im Allgemeinen nach dem Einbinden der Bibliothek in einem weiteren Script-Tag innerhalb des Kopfes einer Html-Seite notiert. Auffallend ist an dieser Stelle die $(document).ready()-Funktion. Die $()-Funktion kapselt hier das gesamte Dokument als JQuery-Objekt und stattet es dadurch mit der .ready()-Funktion aus. Diese wartet darauf, dass die gesamte Struktur des Dokumentes, nicht aber externe Ressourcen, wie Bilder, Musik oder Videos, geladen wurde. Nach dem Laden des Dokumentes kann dann die übergebene Callback-Funktion ausgeführt werden.

<script type="text/javascript">
$(document).ready(function() {
  //Hier könnte ihr Script-Code stehen
});
</script>

Natürlich ist es ebenfalls wie bei einfachem JavaScript möglich, heutzutage jedoch eher unüblich, JQuery direkt in einem Attribut eines HTML-Elementes, also inline zu nutzen. Hierbei ist an eine einfache Wiederverwendung des Codes ohne Duplikation und erschwerte Wartung nicht zu denken.

Eine dritte Möglichkeit spiegelt sich darin wider, eine externe Datei mit dem nötigen JQuery-Funktionen einzuladen. Dies funktioniert gleich dem Einbinden der JQuery Bibliothek, indem man die externe .js-Datei verlinkt. Wenn man eine vollständige Trennung wünscht, ist diese Variante anzuwenden. Es würden alle Strukturanweisungen in einer .html-Datei stehen, alle Designanweisungen in einer .css-Datei und alle Verhaltensanweisungen in einer .js-Datei.

Aufbau

Die Kernfunktion/Die $()-Funktion

Die wohl wichtigste Funktion innerhalb von JQuery ist die $()-Funktion, welche auch JQuery-Funktion genannt wird. Dies ist eine Factory-Funktion. Sie erstellt das eigentliche Objekt auf dem mittels Verkettung gearbeitet werden kann. Über Selektoren kann man die verschiedensten Elemente als Eingabe für die $()-Funktion selektieren, um diese dann im Anschluss zu bearbeiten. So ist es u.a. möglich mit $() die Eigenschaften eines selektierten Objektes oder einer Gruppe von selektierten Objekten zu verändern oder diese mittels eines Wrappers mit neuen Fähigkeiten auszustatten. Die Eingabe kann von einem einzelnen Element bis zum ganzen Dokument, wie es bei der $(document).ready()-Funktion zu sehen war, gehen. Während die Eingabe meistens Elemente sind, ist die Ausgabe stets ein JQuery-Objekt, das die Eingabe umschließt.

Selektoren

Um nun ein bestimmtes Element zu verändern, muss es zunächst im Baum des Document Object Models(DOM) gefunden und selektiert werden. Hierzu hat sich JQuery der bereits durch die Cascading Style Sheets(CSS) bekannten Selektoren bemächtigt, diese aber noch um einige weitere eigene ergänzt. Ebenso wie bei CSS kann man nun Elemente aufgrund ihrer Position im DOM oder eines, durch ein übergeordnetes Element gegebenen Kontextes, aber auch durch Eigenschaften wie ihres Types, einer ID oder dem Wert eines bestimmten Attributes auswählen. Der Selektor wird dann als String an die $()-Funktion übergeben, welche ihn zur Auswertung an die Sizzle Selektor Engine, welche ebenfalls auf JavaScript basiert und vom JQuery-Team entwickelt wurde, weiterleitet. Auf diesem Wege erhält die $()-Funktion die auf den Selektor passenden DOM-Elemente als Eingabe.

Dadurch wird es dem Entwickler erspart, auf Elemente über komplexe Schleifenstrukturen mittels JavaScript-Methoden wie getElementById(), getElementsByTagName() und getElementsByClassName() zurückgreifen zu müssen und somit eine browserübergreifende Lösung an die Hand gegeben.

Die Basisselektoren

$("*");   // selektiert alle Elemente unabhängig von ihrem Typ 
$("img"); // selektiert alle Grafiken bzw. alle Elemente des angegebenen Typus ("a" für Links, "div" für Container,...)
$(".MeineKlasse"); // selektiert alle Elemente der CSS-Klasse MeineKlasse
$("#MeineId"); //selektiert das Element mit der ID MeineId

//Man beachte die "", denn wie bereits erwähnt, wird alles als String übergeben.

Der Mehrfachklassenselektor

Klassenselektionen lassen sich zudem noch verketten, um die Auswahl der gewünschten Elemente zu verringern. Dabei verwendet man einen sogenannten Mehrfachklassenselektor.

$(".MeineErsteKlasse.MeineZweiteKlasse") // selektiert alle Elemente, die die Klasse MeineErsteKlasse und MeineZweiteKlasse besitzen, aber keine Elemente, die nur eine der Klassen inne haben

Die Gruppierungs- und Kontextselektoren

Manchmal ist es nötig, eine Gruppe von Elementen zusammenzustellen, die sich nicht einfach über einen Basisselektor finden lassen. Besonders klar wird dies, wenn man mehrere Elemente aufgrund ihrer ID selektieren möchte. Der Id-Selektor an sich gibt allerdings nur ein Element zurück. Hier müssen nun mehrere Id-Selektoren kombiniert werden, um eine Gruppe zusammenstellen zu können.

$("#id1, #id2, #id3"); //selektiert das Element mit der Id id1, das mit der Id id2 und das mit der Id id3. Insgesamt also 3 Elemente

Es ist allerdings auch möglich, mehrere verschiedene Selektoren miteinander zu kombinieren.

$("#id1, img, .MeineKlasse"); //selektiert das Element mit der Id id1, die Elemente, welche Grafiken sind und die Elemente, die die CSS-Klasse MeineKlasse beinhalten.

Um Elemente aus dem Kontext eines Elementes heraus zu erreichen, muss man die Kontextselektoren nutzen.

$("div img");   // selektiert alle Elemente vom zweiten Typ - hier img -, die Nachfahren eines Elementes des ersten Types - hier div - sind
$("div > img"); // selektiert alle Elemente vom zweiten Typ - hier img -, die Kindknoten eines Elementes des ersten Types - hier div - sind
$("div + img"); // selektiert alle Elemente vom zweiten Typ - hier img -, die unmittelbar auf ein Element des ersten Types - hier div - folgen
$("div ~ img"); // selektiert alle Elemente vom zweiten Typ - hier img -, die auf ein Element des ersten Types - hier div - folgende Geschwisterknoten sind

Auch diese Kontextselektoren sind wiederum kombinierbar.

Die Attritbutselektoren

Mit Attributselektoren wird eine weitere wichtige Art an Selektoren beschrieben. Sie dienen als Erweiterung, um wie der Name schon sagt, Elemente aufgrund ihrer Attribute auszuwählen. Man kann sie auch als eine Art Filter ansehen, da sie aus der Menge einer durch einen Typ bestimmten Anzahl von Elementen diejenigen herausfiltern, die in einem Attribut eine bestimmte Belegung haben und so die Ergebnismenge verringern. Im Folgenden soll nur eine kleine Auswahl an Attributsselektoren beschrieben werden.

$("div[style]"); // selektiert alle Elemente vom angebenen Typ - hier div -, die über das angegebene Attribut - hier style - verfügen
$("img[src='urlaub.png']"); // selektiert alle Elemente vom angegebenen Typ - hier img -, die das angegebene Attribut mit einem bestimmten Wert referenzieren - hier eine Ressource, die "urlaub.png" heißt
$("img[src^='urlaub']"); // selektiert alle Elemente vom angegebenen Typ - hier img -, deren Belegung des angegebenen Attribut - hier src - mit "urlaub" beginnt

Die Filter

Um eine Ergebnismenge noch weiter einzugrenzen, kann man auf Filter zurückgreifen. So kann man mit JQuery die Anzahl der selektierten Elemente aufgrund von besonderen Eigenschaften, die man einem Element nicht einfach zuweisen kann, verringern. Es gibt hier wiederum verschiedene Arten von Filtern, wie zum Beispiel allgemeine Filter, Sichtbarkeitsfilter, Inhaltsfilter und Kindfilter.

$("img:first");     // selektiert das erste Element vom angegebenen Typ - hier img - im Dokument
$("div img:even");  // selektiert alle gerade Elemente hier vom Typ img, die sich in einem anderen Element - hier einem div - befinden
$(":animated");     // selektiert alle animierten Elemente
$("div img:visible"); // selektiert alle sichtbaren Elemente - hier vom Typ img - die sich in diesem Fall in einem div-Container befinden
$("div img:hidden"); // selektiert alle versteckten Elemente - hier vom Typ img - die sich in diesem Fall in einem div-Container befinden
$("div:contains('Internet')"); // selektiert alle Elemente vom angebenen Typ - hier div - die einen Textknoten, mit dem übergebenen Text enthalten
$(":has(img)"); // selektiert alle Elemente, die mindestens ein Element beinhalten, auf das der übergebene Selektor passt. In diesem Fall alle Elemente, die mindestens ein img-Element beinhalten
$("li:first-child"); // selektiert alle Elemente, die die ersten Kinder vom angegebenen Typ - hier Listeneinträge - sind
$("img:only-child"); // selektiert alle Elemente, die die einzigen Kinder vom angegebenen Typ - hier img - sind

Traversierung

Mittels der Traversierung in JQuery ist es möglich das Document Object Model zu durchschreiten, um eine vorhandene Sammlung zu erweitern, zu verändern oder, wie bereits bei den Filtern erwähnt, weiter einzuschränken. Diese Art von Aktionen wird an eine bereits ausgeführte JQuery - Aktion angehangen. Das Traversieren von einem Knoten aus funktioniert in die Richtung des Elternknotens, der Kinderknoten, aber auch zu den Geschwisterelementen und zu allen weiteren Vorgängern und Nachfahren im DOM.

$("#MyId").parent() // selektiert den Elternknoten des Elementes mit der ID MyId 
$("div").children("p").css({border: '1px solid red'}) //umrahmt alle Elemente vom Typ p, die Kinder von div-Containern sind, mit einem roten Rahmen
$("#MyId").css({border: '1px solid red}).prevAll().css({border: '1px solid green'}); //umrahmt das Element mit der Id MyId mit einem roten und all seine vorhergehenden Geschwister mit einem grünen Rahmen
$("div").add("img") // erweitert die selektierte Sammlung aller Div-Container, um alle img-Elemente
$("div").slice(1,5) // reduziert die Menge der selektierten Div-Container auf den zweiten bis fünften

In einfachem JavaScript würden an dieser Stelle Funktionen wie .parentNode für den Elternknoten, .childNodes für die Kinderknoten, .firstChild für das erste Kind, .lastChild für das letzte Kind, .previousSibling für das vorhergehende Geschwisterchen und .nextSibling für das nachfolgende Geschwisterchen stehen, um durch den DOM zu navigieren.

Manipulation

Mit den bisher beschriebenen Punkten ist es möglich über Selektoren, Filter und Traversierung eine Menge von Elementknoten, aufgrund von bestimmten Elementeigenschaften, von Beziehungen innerhalb des DOMs und von Eigenschaften, die sich aus der Position innerhalb der selektierten Menge oder zugewiesenen Eigenschaften ergeben, zu erhalten. Diese einfach zu selektieren hätte keinen Nutzen, wenn man die Ergebnismenge nicht auch Veränderungen unterziehen könnte.

Attribute und CSS

Im Folgenden werden Veränderungen beschrieben, die das äußerliche Erscheinen eines Elementes mittels CSS per JQuery-Zuweisung ändern, aber auch das Auslesen und Ändern von Attributwerten.

$("a").attr("src"); // .attr ist mit nur einem Parameter ein Getter, der in diesem Fall die Werte des src-Attributes aller Links zurückgibt
$("a").attr("title","Hier ist ein Link"); // .attr ist mit zwei Parametern ein Setter, der in diesem Fall alle Links aufsucht und ihren Titel zu "Hier ist ein Link" ändert
$("a").css({border: '1px solid red'}); // sucht alle Links und weißt ihnen eine neue Darstellung zu. Hier wird per Css ein roter Rahmen hinzugefügt
$("a").addClass("MeineLinkKlasse"); // fügt allen Links die CSS-Klasse MeineLinkKlasse hinzu

Mit .attr(), .css(), .prop() und .val() werden Getter und Setter beschrieben. Wobei man bei .attr(), die entsprechenden Eigenschaft, die ausgelesen werden soll, als ersten Parameter übergibt, während der optionale zweite Parameter der neue Wert für die gewählte Eigenschaft ist. Mit .prop() kann auf die im ersten Parameter spezifizierte DOM-Eigenschaft. Es ist ebenso möglich über .removeClass(), .removeAttr() und .remoteProp(), die entsprechenden angegebenen Merkmale zu entfernen. Zum Beispiel nach einem Klick auf einen Button.

DOM-Manipulatoren

Es ist mit JQuery nicht nur möglich, einzelne Elemente an sich zu oder ihre Erscheinung zu verändern, sondern JQuery ermöglicht es einem Entwickler dynamisch die Struktur einer Html-Seite zu verändern, indem es das Document Object Model manipuliert. So ist es möglich bestimmte Elemente aus dem DOM zu entfernen oder welche einzufügen. Allerdings kann man auch bereits vorhandene Elemente mit neuen zu umschließen. Auf diesem Weg lassen sich sowohl neue Beziehungen als auch ein vollständig neuer DOM aufbauen. Es ist ebenso möglich, im DOM vorhandene Zweige an eine andere Stelle zu kopieren.

$("img").wrap("<div/>"); // umschließt alle img-Elemente mit einem div-Container
$("img").remove(); // entfernt alle img-Elemente aus dem DOM
$("div").append("<p>Ich häng an einem div</p>"); // hängt an alle div-Container ein p-Element an
$("div").text("<p>Ich steck in einem div</p>"); // Erzeugt einen Textknoten mit dem Text "<p>Ich steck in einem div</p>" innerhalb des divs
$("div").html("<p>Ich steck in einem div</p>"); // Erzeugt einen p-Elementknoten mit dem Text "Ich steck in einem div"

Die Funktion .html() kann ebenfalls als Getter verwendet werden.

Verkettung

Der nachfolgende Befehl soll das Prinzip der Verkettung darstellen. Hierbei werden mehrere Befehle aneinander gehängt. Dies funktioniert, da die JQuery-Funktionen auf JQuery-Objekten arbeiten und ebenfalls JQuery-Objekte zurückgeben. Nebenbei wird auch das Binden von Effekten gezeigt.

$(“#box p“).click(function(){ // Es werden alle Nachfahren vom Typ des Elementes mit der Id box selektiert und ein Klick-Event, das bei Mausklick reagiert an sie gebunden
	$(this)   // Jedes spezifisches Element führt für sich die folgenden Befehle aus
	.addClass(“green“) // Bei Klick wird dem p-Element die CSS-Klasse green zugewiesen
	.parent() // selektiere den Elternknoten, hier das Element mit der Id box
	.removeClass() // Entfernt alle Css-Klassen des selektierten Knotens
	.addClass(“boxColor-“ + $(“#box p“).index(this)); // fügt dem Elternknoten eine vom Index des entsprechenden Nachfahren abhängige CSS-Klasse hinzu
});

JQuery Tools

Allgemeines

Geschichte

Historisch gesehen, wurden einige Teile von JQuery Tools für Darstellungen im Videobereich entwickelt, bevor sie ihren Weg für die allgemeine Verwendung zu JQuery Tools fanden. So waren Scrollables zunächst für die Darstellung von Playlisten und Overlays für Videos, die Webseiten überdecken gedacht. Heute sind der Flowplayer und JQuery Tools zwei voneinander unabhängige Projekte.

Darstellbarkeit im Browser

Ebenso wie JQuery versucht JQuery Tools seine Funktionialitäten browserübergreifend zur Verfügung zu stellen. Hierbei werden nach eigenen Angaben der Firefox ab Version 2.0 aufwärts, der Internet Explorer ab Version 6 aufwärts, Safari ab Version 3 aufwärts, Opera ab Version 9 aufwärts und Chrome ab 1 aufwärts unterstützt. Einzelne Aspekte der JQuery Tools, wie das CSS, Effekte beim Erscheinen und Ausblenden oder auch das Auslösen von Effekten, können vom Entwickler angepasst.

Besonderheiten

Es ist möglich, alle bereits aus JQuery bekannten Funktionen mit den Funktionen von JQuery Tools zu kombinieren, um so aus den DOM-Elementen JQuery Objekte zu machen. Außerdem lassen sich alle JQuery Tool Objekte untereinander kombnieren, sodass man zum Beispiel Html5 Formulare innerhalb eines Overlays erzeugen kann oder auch Flashplayer samt Scrollables für Playlisten in Exposes.

UI-Tools

Tabs

Tabs dienen zum Platzsparen und Strukturieren der Informationen einer Webseite. Beispielhaft wird dies bei Menus oder wenn man Informationen themenspezifisch gruppieren möchte. In beiden Fällen kann es vorkommen, dass man nur wenige Informationen auf einmal fokussiert anbieten möchte, um den Grad der Übersichtlichkeit zu erhöhen.

Folgender Html5 Code genügt für ein kleines Beispiel. Hierbei werden über Aufzählung mit drei Listeneinträgen der Kopf der Tableiste zum Navigieren deklariert. Im Nachhinein wird für jeden Tab ein Div-Container erstellt.

<ul class='tabs'>
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<div class="tab-content">
<div>Tab 1 content</div>
<div>Tab 2 content</div>
<div>Tab 3 content</div>
</div>

Variante 1:

$("ul.tabs").tabs("div.tab-content > div");

Mit dieser ersten Variante wird die Aufzählung mit der Klasse tabs zunächst selektiert und auf ihr der Befehl tabs aufgerufen um das Tabobjekt zu erstellen. Ihm werden alle div-Container übergeben, die Kinder des Containers der Klasse tab-content übergeben. Die Container werden in der Reihenfolge, in der sie eingelesen werden, den Listeneinträgen der Aufzählung zugeordnet.

Variante 2:

$("ul.tabs").tabs("div.tab-content > div", {current: 'active', event: 'mouseover', effect: 'slide', fadeInSpeed: '500'});

Für diese zweite Variante gilt selbiges wie für die erste. Zusätzlich wird zur Anpassung noch ein JSON-Objekt übergeben. Dieser sorgt zum Beispiel für einen Slide-Effekt und die Auslösung durch überstreichen mit der Maus statt durch Klicken der einzelnen Tabreiter.

Tooltips

Tooltips sind im Allgemeinen kleine Helfer, die zusätzliche Informationen wie das Ziel eines Links, Kurztastenkombinationen oder Erklärungen zu Buttonbeschriftungen liefern. Dieses Werkzeug ist allerdings vom Entwickler einer Seite nicht mit CSS anpassbar. JQuery Tools ermöglicht es Tooltips sowohl mit CSS anzupassen, wie auch mit Html auszustatten.

Overlay

Overlays legen Inhalte über eine Webseite. Sie eignen sich ebenfalls für Bildergalerien, Videoplayer und andersweitige Zusatzinformationen. Es ist möglich sie mit einfachem Html, aber auch mit anderen JQuery Tools - Werkzeugen

Scrollable

Scrollables ermöglichen es ebenfalls, auf einer Webseite Inhalte zu verstecken und sorgen dafür, dass nur Teile einer Inhaltsreihe fokussiert betrachtet werden können. Ihr Anwendungsgebiet sind hauptsächlich Bilderreihen. Die Informationen befinden sich alle auf ein und derselben Webseite, sodass keine Informationen neu geladen werden müssen.

Form Tools

Validator

Der Validator von JQuery Tools arbeitet eng mit den vor allem durch Html5 input-Typen, wie url, email und number und Attribute, wie min, max und required.

Hat man nun per Html5 sein Formular zum Beispiel zum Registrieren eines neuen Nutzers definiert, so kann man mit folgendem Befehl das Formular kapseln.

$("#MeinFormular").validator();   //sucht nach einem Element mit der Id MeinFormular, welches ein Html-form sein sollte und kapselt es in einen Validierer

Wird nun ein ausgefülltes Formular abgeschickt, prüft der Validator anhand der Eigenschaften, der einzelnen Felder, ob diese korrekt ausgefüllt wurden. Findet er Fehler, gibt Fehlernachrichten an den entsprechenden Feldern aus und prüft jede neue Eingabe auf Korrektheit.

Rangeinput

Das Rangeinputelement arbeitet ebenfalls eng mit HTML5 zusammen.

Es ist notwendig das man ein Input-Element vom Typ Range benutzt und in diesem die Werte für die Attribute min und max, sowie step gesetzt werden. Ist JavaScript aktiviert, so kann mit folgendem Befehl das Rangeinputelement gekapselt werden.

$(":range").rangeinput(); // sucht die entsprechenden Input-Elemente vom Typ range und erstellt bzw. bindet sie an den Schieberegler

Ist JavaScript nicht aktiviert, so bleibt lediglich das Input-Element vom Typ Range. JQuery Tools kümmert sich nun, um das weitere Drag&Drop und das Anzeigen des Wertes im Inputfeld. Diese Lösung funktioniert browserübergreifend. Die genaue Erscheinung muss natürlich per CSS festgelegt werden.

Dateinput

Dateinputelemente arbeiten ähnlich wie Rangeinputelemente.

Es müssen hierbei Input-Elemente vom Typ Date benutzt werden. JQuery Tools kapselt aus ihnen wiederum ein Kalenderobjekt, über das man ein Datum auswählen und dessen Erscheinungsbild man mit CSS verändern kann. Mit folgendem Befehl wird das Objekt erstellt.

$(":date").dateinput() // sucht die entsprechenden Input-Elemente vom Typ date und erstellt bzw. bindet sie an ein Kalenderobjekt

Auch hier kann man diverse Aspekte selbst konfigurieren. Über folgendes Json-Objekt kann man weitere Spezifikationen vornehmen. "{ firstday:3, format: 'dd.mm.yyyy', lang:'de' }" Der erste Tag im Kalender wäre nun ein Mittwoch, das Datumsformat würde das in Deutschland übliche in numerischer Schreibeweise sein und die Sprache deutsch sein.

Toolbox

Expose

Ein Expose ist im Gegensatz zu einem Overlay ein modales Fenster ähnlich denen bei Desktopanwendungen. Hierbei handelt es sich um ein Fenster, dass im Vordergrund steht und auf Eingaben des Nutzers wartet, während der Hintergrund für den Nutzer nicht zur Verfügung steht. Das gilt jedoch nur für den aktuellen Tab. Außerhalb des Tabs und des Browsers reagieren alle Anwendungen normal.

Flashembed

Flashembed ist das einzige Tool, dass im Grund nicht auf JQuery aufbaut und für das JQuery nur eine unterstützende Syntax darstellt. Flash-Objekte kann man einfach aufrufen und per JSON diverse Einstellungen eintreffen.

  flashembed("flash", "my_flash.swf", {
  version:[4, 0],
  quality:best 
  });

Mit quality:best wird die beste Bildqualität ohne Rückssicht auf die Wiedergabegeschwindigkeit benutzt. Mit version:[4,0] wird die minimal verlangte Version für das Flash-Plugin festgelegt.

weitere JavaScript - Frameworks

Name	Betreuer	Quelle
script.aculo.us	Community	http://script.aculo.us/
GWT	Google	http://code.google.com/webtoolkit/
YUI	Yahoo	http://developer.yahoo.com/yui/
Dojo	Community	http://www.dojotoolkit.org/
Ext JS	Community	http://www.extjs.com/
Mootools	Community	http://mootools.net/

Unter http://dante.dojotoolkit.org/taskspeed/ kann man sich ein Bild von den Geschwindigkeiten einzelner Frameworks machen. Allerdings liegt JQuery hier nur in Version 1.4.1 vor.

Literatur

M.Vollendorf,F.Bongers:JQuery – Das Praxisbuch. Gallileo Computing,2011

Weblinks

http://jquery.com/
http://www.jquerytools.org/