LeseprobeIn diesem Auszug erhalten Sie einen leichten Einstieg in jQuery so-wie einen tieferen Einblick in das jQuery UI. Außerdem erhalten Sie das vollständige Inhalts- und Stichwortverzeichnis aus dem Buch.
Frank Bongers, Maximilian Vollendorf
jQuery – Das Praxisbuch935 Seiten, 3. Auflage 2013, mit DVD, 39,90 € ISBN 978-3-8362-2638-7
www.galileocomputing.de/3473
»jQuery – Der Einstieg« »jQuery UI«
Inhaltsverzeichnis
Index
Die Autoren
Wissen, wie’s geht.
41
3
Kapitel 3
jQuery – der Einstieg
Sie werden sehen, wie Ihnen jQuery Arbeit abnimmt. Sie schreiben
weniger Code, um zum Ergebnis zu kommen. Und Sie werden sehen,
welche Wege es gibt, jQuery in Ihr Projekt zu inkludieren.
In diesem Kapitel erfahren Sie einiges über die Grundlagen von jQuery und über die
Hintergründe des jQuery-Objekts und seines Einsatzes. Sie lernen, wie Sie mit jQuery
Elemente Ihrer HTML-Seite selektieren und anschließend Aktionen ausführen kön-
nen. Zum Verständnis benötigen Sie zumindest Grundkenntnisse in HTML und Java-
Script sowie – was in Zusammenhang mit jQuery beinahe noch wichtiger ist – ein
Grundverständnis von CSS und der Formulierung von CSS-Selektoren. Sollten Sie
hier einen Nachschlag benötigen, raten wir Ihnen, zuerst die letzten beiden Kapitel
zu lesen: Anhang A, »HTML und CSS«, und Anhang B, »JavaScript und DOM«. Lassen
Sie uns nun also einfach beginnen!
3.1 Vergleich: JavaScript mit und ohne jQuery
Um zu verdeutlichen, wie jQuery dem User tagtäglich viel Arbeit abnimmt und ihm
so das Leben im Web erleichtert, möchten wir hier zunächst mit einem Beispiel
anfangen, das – noch ohne die Hilfe von jQuery – die Manipulation eines HTML-
Elements vornimmt.
Angenommen, Sie wollen, abhängig von seinem Textinhalt, einem von mehreren
<p>-Absätzen die Klasse green zuweisen und ihm damit eine neue Schriftfarbe geben.
Dann betrachten Sie dazu zunächst einmal den Inhalt des <script>-Elements:
<html><head><title>Listing 1</title>
<style type="text/css">.green {
color:#009933;}
</style><script type="text/javascript">
3 jQuery – der Einstieg
42
window.onload = function() {var elements = document.getElementById("box")
.getElementsByTagName("p");for (var i = 0; i < elements.length; i++) {
if (elements[i].firstChild.data == "Zweiter Absatz") {
elements[i].className = "green";}
}}
</script></head><body>
<div id="box"><p>Erster Absatz</p><p>Zweiter Absatz</p><p>Dritter Absatz</p>
</div></body></html>
Listing 3.1 Schriftfarbe ändern ohne jQuery
Was in diesem Scriptabschnitt passiert, ist Folgendes: Sobald die komplette HTML-
Seite geladen ist (window.onload), wird eine Kollektion mit allen Absätzen ("p")
erstellt, die sich innerhalb des Containers mit der ID ("box") befinden.
Zum Zeilenumbruch vor dem Punktoperator
Wichtig: Sie dürfen vor dem Punktoperator in Objekten praktischerweise einen Zei-
lenumbruch machen, da der Punkt am Beginn der Folgezeile der Script-Engine deut-
lich macht, dass die Anweisung weitergeht. Überlange Programmzeilen wie diese
können so vermieden werden:
var elements = document.getElementById("box").getElementsByTagName("p");
Diese Kollektion wird in einer Variablen elements gespeichert. Anschließend werden
über eine for-Schleife und eine if-Anweisung alle gefundenen <p>-Container dahin-
gehend geprüft, ob sie einen Textknoten mit dem Inhalt »Zweiter Absatz« enthalten.
Wenn dem so ist, wird dem betreffenden Absatz die Klasse green hinzugefügt und
damit dessen Schriftfarbe auf »Grün« gesetzt. Sie brauchen an dieser Stelle nicht zu
sehr in die Tiefe zu gehen, um sich klarzumachen, dass Sie hier genau überlegen müs-
sen, wie Sie in Ihrem Script mit Bedingungen und Schleifen Ihre Suchergebnisse
3.2 jQuery einbinden
43
3
filtern, bis am Ende das gewünschte Ergebnis im Browser erscheint. Ein Framework
kann Ihnen dieses Kopfzerbrechen ersparen. Werden Sie also aktiv!
3.2 jQuery einbinden
Es versteht sich, dass das jQuery-Framework, um es nutzbar zu machen, zunächst in
eine HTML-Seite eingebunden werden muss: Dem ausführenden Browser müssen
die Funktionalitäten zur Verfügung stehen, um die besonderen Eigenschaften und
Methoden von jQuery zu interpretieren. Zunächst sollten Sie sich, falls dies nicht
bereits geschehen ist, eine aktuelle Version von jQuery besorgen – dies können Sie
direkt bei der offiziellen jQuery-Website http://jquery.com/download tun. Laden Sie
von dort sowohl die minimierte Produktionsversion als auch die Developer-Version
von jQuery herunter. Dort finden Sie auch das Plugin migrate.js.
Downloaden oder doch nicht downloaden?
Sie finden die erforderlichen jQuery-Dateien auch im Ordner jquery auf der Begleit-
DVD zu diesem Buch. Alle Beispiele basieren auf Version 1.10.x oder 2.0.x. Sollte es in
Zukunft eine wesentlich neuere jQuery-Version geben, sind Probleme jedoch nicht
auszuschließen. Verwenden Sie dann die Version aus dem Begleitmaterial.
Es gibt nun also, wie bereits gesagt, zwei verschiedene Versionen von jQuery. Einmal
die Version uncompressed, d. h. die unkomprimierte Datei, und einmal die Version
compressed, also eine verkleinerte Datei. Sind Sie daran interessiert, einmal einen
Blick in das »Getriebe« von jQuery zu werfen? Dann nehmen Sie die unkomprimierte
Datei zur Hand. Im Normalfall werden Sie das, selbst als Entwickler, kaum tun wollen,
sondern nur die angebotenen Funktionen im Produktiveinsatz nutzen. In diesem
Fall verwenden Sie die kompaktere compressed-Datei, deren Größe weniger als die
Hälfte der unkomprimierten Datei beträgt.
Abbildung 3.1 Download von »jquery.com«
3 jQuery – der Einstieg
44
3.2.1 jQuery 1.x oder 2.x – was denn nun?
Mit dem Erscheinen von jQuery 1.9 wurden die ersten von ein paar harten Schnitten
vorgenommen. Es wurden Methoden und Eigenschaften, die schon lange als depre-
cated markiert waren, aus dem Framework entfernt. Daneben wurden noch diverse
Rückgabewerte von Methoden verändert, das Pseudo-Event Hover wurde entfernt
(nicht zu verwechseln mit .hover(), das bleibt erhalten), und einige andere kleine Alt-
lasten wurden über Bord geworfen. Einen vollständigen Artikel zum Thema des
jQuery-Teams finden Sie hier: http://jquery.com/upgrade-guide/1.9
Im Folgenden sehen Sie eine Auflistung der wichtigsten Änderungen, den entfernten
Methoden:
Aber was tun Sie, wenn Sie eine der entfernten oder geänderten Methoden weiterhin
in einem Projekt benötigen? Wenn Sie beispielsweise ein älteres Plugin aus verschie-
densten Gründen weiter nutzen müssen? Sich ärgern? Nein. Dafür haben die Macher
von jQuery das migrate.js Plugin entwickelt. Binden Sie dieses Plugin unterhalb des
eigentlichen Frameworks ein, und Ihnen stehen alle Methoden und Eigenschaften
der »alten« API zur Verfügung. Ein Beispiel einer Einbindung erfolgt weiter unten.
Zum anderen wurde in der Version 2.0 ein harter Schnitt vorgenommen, die Unter-
stützung für ältere Browser wurde gekappt. Die Version 2.0 unterstützt lediglich den
IE ab der Version 9.x und höher sowie bei Google Chrome, Firefox und Opera die
aktuelle und eine Vorgängerversion. Safari wird ab der Version 5.x unterstützt. Es
wurden sämtliche Browserquirks und Hacks konsequent herausgenommen, so
Methode Grund
.toggle(fn,fn,...) Verwechslungsgefahr mit gleichlautender Methode
.toggle([duration] [,complete ]), die ein Element sichtbar
und unsichtbar schaltet.
jQuery.browser() Seit der Version 1.3 deprecated, da es dem Prinzip der feature
detection widerspricht.
.live() .live() wurde zu Gunsten des moderneren Konzeptes von
.on() entfernt.
.die() .die() wurde auf Grund des moderneren Konzeptes von
.off() entfernt (siehe .live()).
jQuery.sub() Die Zahl der Anwendungsfälle, für die diese Methode genutzt
werden könnte, ist zu gering, um sie weiter mit herumzu-
schleppen.
Tabelle 3.1 entfernte Methoden in jQuery 1.9
3.2 jQuery einbinden
45
3
wurde die Performance beträchtlich erhöht. Die Version 1.x wurde aber weiterentwi-
ckelt, derzeit, Stand Oktober 2013, sind wir hier bei der Version 1.10 angelangt. Diese
beiden Versionen 1.x und 2.x werden in der Zukunft weiterhin parallel weiterentwi-
ckelt, so dass Sie auch nach wie vor ältere Systeme unterstützen können. Und das
migrate.js Plugin erhält Ihnen auch noch ältere Features; was will man mehr. Das
jQuery-Team hat eben auch an die gedacht, die ältere Browser oder ältere Scripte
bedienen müssen und einen intelligenten Upgradepfad bereitgestellt.
3.2.2 jQuery online und offline nutzen
Vielleicht zunächst eine kleine Klärung im Vorfeld – benötigen wir zum Test von
jQuery eigentlich einen Webserver oder nicht? Man könnte antworten, im Prinzip
nein. Jedoch kann in diesem Fall dann auch nur ein Teil der jQuery-Funktionalität
genutzt werden: Einige der Tricks, die das Framework zur Verfügung stellt, basieren
auf der Nutzung von Ajax, was in der Regel einen Server voraussetzt, der die HTTP-
Anfragen interpretiert, die das Framework dann absetzen wird.
Benötigen wir kein Ajax, kann auch direkt aus dem Dateisystem heraus (sozusagen
»offline«) gearbeitet werden: Sie können beispielsweise ein HTML-Dokument unmit-
telbar aus dem Verzeichnis ins Browserfenster ziehen, um ein Script zu testen.
Ansonsten müssten Sie einen lokalen Webserver zur Verfügung haben und die
Übungsdateien in dessen Dokumentenverzeichnis ablegen (siehe Abschnitt 2.3,
»Webserver«).
3.2.3 jQuery lokal einbinden
Sie benötigen von jeder HTML-Seite, in der Sie jQuery nutzen möchten, einen Link
zur jQuery-Datei. Sie haben die Wahl zwischen der minimierten Version jquery-
1.10.2.min.js und der unkomprimierten Version jquery-1.10.2.js bzw. jquery-
2.0.3.js und jquery-2.0.3.min.js. Für die lokalen Übungen in diesem Buch macht
es keinen Unterschied, ob Sie eine unkomprimierte oder eine komprimierte Version
verwenden. Legen Sie einfach beide Dateien in einem Unterverzeichnis des htdocs-
Verzeichnisses des lokalen Servers auf Ihrem Rechner ab. (Wir nennen dieses Ver-
zeichnis buchbeispiele – selbstverständlich können Sie auch jeden beliebigen Namen
wählen.)
Wir empfehlen für die Arbeit mit den Beispielen dieses Buchs folgende Ordner-
struktur:
buchbeispiele/lib/
jquery-x.x.js
3 jQuery – der Einstieg
46
jquery-x.x.min.js_beispiel_/...
Dies erleichtert die kapitelübergreifend konstante Einbindung des Frameworks, des-
sen Dateien im Ordner jquery abgelegt werden (dies ist der Bezeichner, den wir für
dieses Buch gewählt haben). Parallel zu diesem Ordner legen Sie einen oder mehrere
Ordner mit Ihren Test- und Übungsdateien an. Ressourcen, die von den HTML-Seiten
benötigt werden (CSS- und Grafikdateien), platzieren Sie sinnvollerweise ebenfalls in
die Übungsordner.
Dies ermöglicht eine stets gleichförmige Formulierung des Links zur jQuery-Datei im
Dokumentkopf der Übungsdateien:
<script type="text/javascript"src="../lib/jquery-1.10.2.js"></script>
Eine ähnliche Anordnung empfiehlt sich auch für Projekte, in denen Sie jQuery ein-
setzen (erinnern Sie sich aber daran, für Produktionszwecke auf die minimierte Ver-
sion der jQuery-Datei zurückzugreifen). Reproduzieren Sie für den Online-Zugriff die
gleiche Verzeichnisstruktur auf Ihrem Produktionsserver. Sie können dann die rela-
tiven Links zum Framework unverändert beibehalten.
Das migrate.js Plugin binden Sie folgendermaßen ein:
<script type="text/javascript"src="../lib/jquery-1.10.2.js"></script>
<script type="text/javascript"src="../lib/jquery-migrate-1.2.1.js"></script>
Moderne HTML5 Seiten und auch HTML5 Templates wie HTML5 Boilerplate sind dazu
übergegangen, die Scripte vor dem Ende des Dokuments einzubinden:
<html><head>...</head><body><navigation>...<navigation><article>...</article><script type="text/javascript"
src="../lib/jquery-1.10.2.js"></script><script type="text/javascript"
src="../lib/jquery-migrate-1.2.1.js"></script><script type="text/javascript"
src="../js/eigenes-script.js"></script></body></html>
3.2 jQuery einbinden
47
3
Die Begründung ist, dass das Laden und das Ausführen der Seite auf diese Weise
beschleunigt wird. Entscheiden Sie selbst, beide Methoden sind gültig.
3.2.4 jQuery aus dem Google Online Repository einbinden
Eine Alternative zur lokalen Einbindung von jQuery ist die Nutzung des Google
Online Repository, das ein frei zur allgemeinen Nutzung zur Verfügung stehendes
Framework anbietet. (Gedacht ist dieses Repository für den Live-Betrieb einer Web-
site. Sie können das Prinzip jedoch auch für die Buchbeispiele einsetzen, sofern Ihr
Rechner jederzeit über eine Online-Verbindung verfügt.)
Das Content Delivery Network (CDN) von Google hält neben jQuery auch andere Java-
Script-Frameworks bereit, wie Prototype, MooTools, Dojo und Ext JS. Im Falle von
jQuery 1.10.2 geschieht die Einbindung wie folgt:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Man kann auch einen Schritt weiter gehen und jQuery über den load-Befehl der
Google JavaScript API einbinden. Hierfür muss allerdings zunächst eben diese API
verlinkt werden. Anschließend steht die Methode google.load() zur Verfügung, mit
der jQuery ebenfalls bereitgestellt werden kann.
Deren erstes Argument bestimmt das Framework. Achtung: Der zweite Parameter,
der die gewünschte Version nennt, ist obligatorisch und kann daher nicht einfach
weggelassen werden! Mit der folgenden Anordnung wird die minimierte Version
von jQuery 1.10.2 aus dem Google CDN geladen:
<script type="text/javascript"src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.10.2");
</script>
Wollen Sie die unkomprimierte Variante einbinden, fügen Sie noch ein drittes Argu-
ment hinzu (achten Sie auf die geschweiften Klammern):
<script type="text/javascript">google.load("jquery", "1.10.2",{uncompressed:true});
</script>
Pro und Kontra
Diese Lösung hat wie so vieles ihre Licht- und Schattenseiten. Als Vorteil könnte man
werten, dass man nicht gezwungen ist, jQuery auf dem eigenen Server abzulegen. Die
Anbieter werden zudem meist mehrere Versionen des Frameworks (darunter sicher-
3 jQuery – der Einstieg
48
lich die jeweils aktuelle) zur Verfügung stellen. Bei einer stehenden Online-Verbin-
dung steht auch einer Nutzung von Repositories im Rahmen von ansonsten lokalen
Tests nichts im Wege.
Ein Nachteil ist, dass die Funktion der eigenen Website von der konstanten Bereit-
stellung des Frameworks durch eine andere Partei abhängig ist. Bei Yahoo oder
Google kann man immerhin davon ausgehen, dass der Service dauerhaft zur Verfü-
gung stehen wird. Nicht vergessen sollte man jedoch, dass die Einbindung einer
extern gehosteten Datei auch ein Protokollieren der Nutzung der eigenen Website
durch den Provider des Frameworks ermöglicht (ohne dies unterstellen zu wollen).
Ob man sich darauf einlassen möchte, sei dem Einzelnen überlassen. (Wir werden in
diesem Buch die konventionelle Einbindung verwenden und jQuery aus dem lokalen
Verzeichnis einbinden.)
3.2.5 Das Beste aus beiden Welten
Es gibt auch die Möglichkeit, jQuery über das Google CDN zu laden, und einen Fall-
back für den Fall bereitzustellen, wenn kein Internetzugang zur Verfügung steht:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script>window.jQuery || document.write('<script src="../lib/jquery-1.10.1.min.js"><\/script>')</script>
Sie laden jQuery über das Google CDN, anschließend fragen Sie mit window.jQuery ab,
ob das jQuery-Objekt vorhanden ist. Ist es das nicht, schreiben Sie per JavaScript mit
document.write() den lokalen Pfad zum Framework. So ist sichergestellt, dass auch
beim lokalen Testen oder bei Netzwerkfehlern seitens Google immer eine Version
geladen werden kann.
3.3 Das erste richtige Beispiel mit jQuery
Legen Sie die heruntergeladene Framework-Datei wie beschrieben in ein Verzeichnis
parallel zu dem, in dem die HTML-Seite gespeichert ist. Bevor Sie nun das Script kon-
struieren, müssen Sie erst das Framework in die Seite einbinden. Ähnlich einem
externen Stylesheet wird die Datei in das Hauptdokument inkludiert.
Im ersten <script>-Element geben Sie den Pfad zur Bibliothek an:
<script type="text/javascript"src="../jquery/jquery-1.10.2.min.js"></script>
3.3 Das erste richtige Beispiel mit jQuery
49
3
Wo genau soll die Einbindung im Quelltext erfolgen?
Unser Tipp: Wenn Sie das jQuery-Framework im <head>-Verzeichnis inkludieren,
dann stets nach der Einbindung der CSS-Dateien. Achten Sie darauf, dass Ihre eige-
nen JavaScript-Funktionen bzw. -Dateien wiederum stets nach dem Framework ein-
gebunden werden.
Legen Sie nun ein weiteres <script>-Element an, und fügen Sie die jQuery-Funktio-
nen ein. Das gesamte Beispiel sieht jetzt folgendermaßen aus (der jQuery-Code ist
fett hervorgehoben):
<html><head>
<title>Listing 2</title>
<!-- Zunächst die Style-Angaben: --><style type="text/css">
.green {color:#009933;
}</style>
<!-- Nun das Framework einbinden: --><script type="text/javascript"
src="../jquery/jquery-1.10.2.min.js"></script>
<!-- ... und jetzt unseren eigenen Code: --><script type="text/javascript">
$(document).ready(function() {$("#box p:contains('Zweiter Absatz')").addClass("green");
});</script>
</head><body>
<div id="box"><p>Erster Absatz</p><p>Zweiter Absatz</p><p>Dritter Absatz</p>
</div></body></html>
Listing 3.2 Schriftfarbe ändern mit jQuery
3 jQuery – der Einstieg
50
Das jQuery-Objekt als Factory-Funktion
Es springt sofort ins Auge, dass gerade einmal drei Zeilen Code benötigt werden, um
das gesteckte Ziel zu erreichen. Das fundamentale Konstrukt in jQuery ist die Funk-
tion $(). Es handelt sich dabei um eine so genannte Factory-Funktion – sie wird so
bezeichnet, weil sie das erzeugt, was anschließend als Arbeitsgrundlage dient.
Zum Vergleich: Die im vorigen Listing eingesetzten DOM-Funktionen getElement-
ById() und getElementsByTagName() holen nur existierende Bestandteile des Doku-
ments, verändern diese aber nicht. Sie müssen mit den »natürlichen« Eigenschaften
der gefundenen Dokumentknoten zurechtkommen.
Anders bei der $()-Funktion. Diese Funktion erhält zwar auch ein Argument, das
bestimmt, womit die Funktion arbeitet. Hier ist es jedoch das gesamte Dokument –
Sie werden aber auch noch andere Fälle kennenlernen. Allerdings begnügt sich die
$()-Funktion nicht damit, sich das bezeichnete Objekt zu beschaffen, sie stattet die-
ses mit weiteren Fähigkeiten aus. Diese neuen Fähigkeiten umgeben das alte Objekt
wie ein Mantel – man spricht daher von Wrapping. Das so erzeugte neue Objekt wird
(unabhängig davon, welche Art von Objekt als Grundlage fungiert) als jQuery-Objekt
bezeichnet.
Mit dem Aufruf von $() wird also immer ein neues jQuery-Objekt erzeugt und zu-
rückgegeben. Danach steht es mit seinen ganzen Methoden und Eigenschaften für
das weitere Scripting zur Verfügung. Eine dieser Methoden nennt sich .ready().
Sie wird allerdings speziell dann verwendet, wenn das jQuery-Objekt aus einem
document-Objekt gebildet wurde (zugegeben, ein Sonderfall).
Jetzt wissen Sie für den Anfang genug – analysieren wir nun den hervorgehobenen
Code aus dem vorigen Listing Zeile für Zeile:
1. Sobald das Dokument fertig geladen wurde, ...
$(document).ready( ... );
2. ... führen Sie die in ready() befindliche anonyme Funktion aus, ...
$(document).ready( function() {...
});
3. ... die besagt: Bilden Sie aus allen <p>-Elementen mit dem Inhalt 'Zweiter Absatz'
innerhalb des <div>-Containers mit der ID box ein jQuery-Objekt:
$(document).ready( function() {$("#box p:contains('Zweiter Absatz')")...
});
3.3 Das erste richtige Beispiel mit jQuery
51
3
4. Wenden Sie nun auf dieses die Funktion addClass() an, um den <p>-Containern
die Klasse green hinzuzufügen (wir machen wieder einen Zeilenumbruch vor dem
Punktoperator – das ist nicht nur für das Listing im Buch praktisch):
$(document).ready( function() {$("#box p:contains('Zweiter Absatz')").addClass("green");
});
Das war’s. Sie brauchen sich nicht mit Schleifen und Bedingungen herumschlagen.
Stattdessen navigieren Sie mittels des Selektors "#box p:contains('Zweiter
Absatz')" direkt zum gewünschten Element, verkapseln es als jQuery-Objekt und
verändern es. (Übrigens, der Filterpseudoselektor :contains() ist eine Dreingabe von
jQuery, die Ihnen in reinem CSS nicht zur Verfügung steht.)
Die gewünschte Veränderung geschieht durch den Aufruf von addClass(). Mit dieser
Methode können Sie beliebige CSS-Klassen an beliebige HTML-Elemente binden.
(Dass die Klasse mit ihren Eigenschaften vorher im Stylesheet definiert werden
muss, versteht sich von selbst.)
Warum muss es ein jQuery-Objekt sein?
Die Verkapselung in ein jQuery-Objekt ist in diesem Fall der springende Punkt. Den
<p>-Container bekämen Sie zwar auch anders zu fassen (wie zuvor bereits beschrie-
ben), aber er wäre eben nur ein <p>-Container. Versuchten Sie, auf ihn direkt die
Methode addClass("green") anzuwenden, hätten Sie Pech. Anders sieht es aus,
wenn der <p>-Container »jQuerifiziert« wurde (in ein jQuery-Objekt verpackt ist). In
diesem Fall stehen ihm unmittelbar alle Methoden von jQuery zur Verfügung.
Das jQuery-Objekt als Knotenliste
Wir haben das jQuery-Objekt als Wrapper für ein Einzelobjekt kennengelernt. Mit
Hilfe dieser Verkapselung stehen Ihnen für dieses Objekt alle jQuery-Tricks zur Ver-
fügung. Ein Einzelobjekt war es aber schlicht deshalb, weil der an $() übergebene
Ausdruck lediglich ein Objekt als Ergebnis hatte.
Wenn dies aber nicht so eindeutig ist, was dann? Ganz einfach – jQuery macht aus
allen übergebenen Objekten (nehmen wir mal an, es seien Elementknoten) gemein-
sam ein jQuery-Objekt. Dieses nimmt dann, wie man sagt, die Eigenschaften einer
»Liste« an. Im herkömmlichen JavaScript spricht man von einer Knotenliste (node
list). In jQuery läuft dies darauf hinaus, dass für jedes Element der Liste alle jQuery-
Optionen zur Verfügung stehen.
Legen wir einmal mehrere Elemente im jQuery-Objekt ab, indem wir jetzt alle
Absätze innerhalb des Containers #box selektieren. Hierfür genügt es, den Filter
3 jQuery – der Einstieg
52
:contains('Zweiter Absatz') wegzulassen.1 Damit ist die Einschränkung auf den
zweiten Absatz aufgehoben:
$(document).ready(function() {$("#box p").addClass("green");
});
Das Ergebnis ist wenig spektakulär, vielleicht sogar als »intuitiv vorhersehbar« zu
bezeichnen: Alle Textabsätze erhalten die grüne Schrift und Hintergrundfarbe.
Obwohl ... das bedeutet doch, dass jQuery alle Elemente seiner Liste nimmt und auf
jedes einzelne die angehängte Methode anwendet? Genau: jQuery arbeitet eine Kno-
tenliste Item für Item ab, und zwar vollautomatisch. Behalten Sie das im Hinterkopf
– Stichwort: implizite Schleife.
Welches Argument erwartet die Funktion $()?
An dieser Stelle möchten wir kurz auf die Frage eingehen, was für ein Argument die
$()-Funktion eigentlich erwartet. Wir haben gesagt, dass es sich um CSS-Selektoren
handelt, teilweise noch mit jQuery-spezifischen Erweiterungen. Es geht aber auch
noch mehr, wie Sie später noch sehen werden. Bleiben wir jedoch zunächst bei CSS.
jQuery unterstützt im Rahmen der $()-Funktion nahezu alle CSS-Selektoren, von CSS
1.0 bis CSS 3.0. Dies macht es für Webworker mit CSS-Erfahrung leichter, sich in
jQuery einzuarbeiten. Wenn nicht, in Anhang A, »HTML und CSS«, stellen wir Ihnen
die wichtigsten Grundbegriffe vor.
3.4 Wir haben fertig
Gehen wir kurz auf die .ready()-Methode im folgenden Ausdruck ein:
$(document).ready(fn)
Bei .ready() handelt es sich um eine grundlegende Methode innerhalb des Event-
Moduls von jQuery: Eine Funktion fn, die an .ready() übergeben wird, führt jQuery
aus, sobald das Dokument geladen wurde. In unserem Fall ist es eine anonyme Funk-
tion, die die Dokumentabfrage enthält.
Der Grund für dieses Manöver ist folgender: Wenn Sie die Anweisung $("#box
p").addClass("green") unmittelbar auswerteten, erzielten Sie keine Treffer – in die-
sem Moment gäbe es schlicht noch kein Dokument, aus dem das Script den <p>-Con-
tainer holen könnte. Das ist nämlich noch gar nicht geschrieben. Also muss
abgewartet werden. JavaScript bietet uns mit window.onload zu diesem Zweck bereits
1 Wir könnten hier sogar noch einfacher $('p').addClass('green') schreiben. Schön, nicht?
3.4 Wir haben fertig
53
3
von Haus aus einen passenden Event-Handler an. Ist fn die aufzurufende Funktion,
schreiben Sie mit seiner Hilfe:
window.onload = fn;
Den gleichen Dienst leistet der onload-Event-Handler im <body>-Element. Wo ist der
Unterschied zum (zudem komplizierter zu schreibenden) Ansatz von jQuery? Der
Unterschied ist das Timing: Mit window.onload wird die Funktion fn erst aufgerufen,
wenn alle Abhängigkeiten des Dokuments aufgelöst sind, beispielsweise die Grafiken
geladen wurden. Die Grafiken brauchen Sie aber gar nicht, wenn Sie nur an die Ele-
mente wollen!
Der Vorteil von $(document).ready(fn) besteht darin, dass das Script bereits dann die
Callback-Funktion fn ausführt, wenn die für Sie relevante HTML-Struktur bereitsteht.
Das DOM ist dann zwar nur »weitestgehend geladen«, aber Sie können auch schon
früher darauf zugreifen. Ein Problem ist das nicht – das Laden der Bilder können wir
bei der Analyse und Manipulation des HTML-Dokuments in vielen Fällen vernach-
lässigen.
Sie könnten beliebig oft $(document).ready(fn) in einer Seite ausführen lassen. Im
Endeffekt mag das aber ein wenig unübersichtlich werden. Hier besteht der Hinterge-
danke primär darin, Funktionscode aus dem ready-Block auszulagern, um diesen
möglichst einfach zu halten (sonst könnten die Funktionsblöcke von tuDies() und
tuJenes() auch ebenso im ready-Block selbst stehen – der würde dann allerdings
möglicherweise ziemlich lang werden):
// definieren, was tuDies() machen soll:function tuDies() {
$("div p").click(function(){ ... });}
// erster ready()-Block:$(document).ready( function() {
// und tuDies() aufrufen, wenn’s so weit ist:tuDies();
});
// definieren, was tuJenes() machen soll:function tuJenes() {
$("ul li").click(function(){ ... });}
// zweiter ready()-Block:$(document).ready(function() {
3 jQuery – der Einstieg
54
// und tuJenes() aufrufen, wenn’s so weit ist:tuJenes();
});
Wie gesagt, das geht, bietet aber keine Vorteile. Eine Funktion aus dem ready-Block
auszulagern, ist jedoch immer eine gute Sache. Sie sehen auch, dass Sie dort ebenfalls
die jQuery-Schreibweise verwenden dürfen. (Dies ist also nicht etwa auf den ready-
Block beschränkt, um es einmal deutlich zu sagen.)
Um Übersicht zu schaffen, beschränken Sie sich besser auf nur eine einzige ready-
Anweisung. Innerhalb der anonymen Callback-Funktion dieser Anweisung (von der
es nur eine geben darf!) können Sie »huckepack« beliebig viele Funktionen aufrufen:
$(document).ready(function() {tuDies();tuJenes();// etc.
});
3.5 Das Mausereignis – Bindung eines Click-Events
Nun macht unser allererstes Beispiel scheinbar nicht allzu viel Sinn, da Sie doch Stil-
eigenschaften allein mittels Stylesheet festlegen könnten,2 ohne JavaScript zu Hilfe
zu rufen. Geschenkt – wenn Sie eine solche Manipulation aber mit einem Mausereig-
nis verbinden, wird es interessanter: Sie wollen als Nächstes erreichen, dass ein
Absatz seine Schriftfarbe ändert, sobald Sie ihn anklicken. Gehen wir kurz durch, wie
dies ohne die Hilfe von jQuery erfolgen könnte.
3.5.1 Zunächst – die »aufdringliche« Variante
Warum wir dies mit »aufdringlich« betiteln, wird gleich klarer. Jedenfalls werden
Aktionen wie der Klick auf ein Element gewöhnlich mit Hilfe von Event-Handlern
erfasst. Diese werden wie Attribute in den Start-Tag des Elements geschrieben.
Um die <p>-Container klickbar zu machen, genügt dann folgender Code:
<div id="box"><p onclick="farbwechsel(this)">Erster Absatz</p><p onclick="farbwechsel(this)">Zweiter Absatz</p><p onclick="farbwechsel(this)">Dritter Absatz</p>
</div>
2 Bedenkt man aber, dass Sie den Style anhand des Elementinhalts binden können, ist es vielleicht
doch ganz spannend, oder?
3.5 Das Mausereignis – Bindung eines Click-Events
55
3
Was an dieser Stelle kurz erläutert werden soll, ist das Schlüsselwort this. Der Aus-
druck stellt ein Objekt dar, das an die aufgerufene Funktion farbwechsel() übergeben
wird. Es bezieht sich jeweils auf das <p>-Element, das gerade angeklickt wurde. Es han-
delt sich hier um das so genannte Kontextobjekt (also das Objekt, an dem aktuell
etwas passiert). So weit, so gut – auch die Funktion farbwechsel() ist nicht sonderlich
kompliziert:
// das übergebene this landet in der Variable meinP:function farbwechsel(meinP) {
// der geklickte Absatz bekommt die Klasse zugewiesen:meinP.className = "green";
}
Erst einmal funktioniert alles. Sie sehen, dass Sie auf diese Weise beliebige HTML-
Elemente mit einem Click-Event versehen können. Allerdings sollten Sie, um die Be-
nutzerführung eindeutig zu halten, bei entsprechend »aktivierten« Elementen die
Cursor-Eigenschaft per CSS auf pointer setzen, damit der Benutzer erkennt, dass hier
eine Interaktion möglich ist.
Dies geschieht in unserem Beispiel in einer Styleregel für <p>-Container. Des Weite-
ren fügen Sie der Klasse green eine Hintergrundfarbe hinzu und setzen die Cursor-
Darstellung dort wieder auf »normal« – immerhin braucht der Absatz, sobald er die
Klasse hat, ja kein zweites Mal geklickt werden:
p {cursor:pointer;
}.green {
color:#009933;background-color:#E2FFEC;cursor:default;
}
3.5.2 Etwas weniger aufdringlich, bitte!
Was ist nun schlecht daran? Unschön ist, dass hier der Click-Event-Handler samt
Funktionsaufruf in das HTML-Dokument geschrieben wurde, obwohl er nicht Teil
der Informationsstruktur ist. Er ist außerdem überflüssig, wenn kein JavaScript aktiv
ist (weil es abgeschaltet oder vom Client nicht unterstützt ist).
Im Sinne des Ansatzes Unobtrusive JavaScript (wir haben dazu im vorangegangenen
Kapitel ein paar Worte verloren) bevorzugt man daher, den Event-Handler wegzulas-
sen und die Klickfunktionalität per JavaScript nachträglich hinzuzufügen. Das HTML
bleibt auf diesem Weg »sauber«.
3 jQuery – der Einstieg
56
Um einem Absatz »von außen« dem Click-Event zuzuweisen, müssen zunächst alle
<p>-Container innerhalb des Bereichs #box gesammelt werden.
Dies geschieht wie zuvor:
var meineP = document.getElementById("box").document.getElementsByTagName("p");
Über das Array mit den Textabsatzknoten läuft eine Schleife, die den Click-Event bin-
det. Die Zahl der Knoten wird in einer Variablen len abgelegt, damit das Array nicht
bei jedem Schleifendurchlauf erneut ausgelesen werden muss:
for(var i =0, len= meineP.length; i<len; i++) {// Fein. Jetzt den Click-Event binden. Aber wie?}
Für die Art und Weise, wie Sie den Click-Event »ordentlich« binden, gibt es verschie-
dene, untereinander unverträgliche Varianten: die offizielle und die für den Internet
Explorer. Eine Fallunterscheidung ist möglich, aber umständlich. Der Rettungsanker
findet sich beim guten alten DOM Level 0 und der dort definierten onclick-Eigen-
schaft. Diese Vorgehensweise ist zwar nicht zeitgemäß, hat aber den Vorteil, dass sie
dann doch browserübergreifend funktioniert:
window.onload = function() {var meineP = document.getElementsByTagName("p");for(var i=0, len=meineP.length; i<len; i++) {
meineP[i].onclick= function() {this.className = "green";}
}}
Dies ist in seiner Kompaktheit durchaus vertretbar. Sollte es noch schöner gehen?
Oder zumindest kürzer?
3.5.3 Ein unaufdringlicher Dreizeiler, dank jQuery
Innerhalb von jQuery verwenden Sie nicht eine DOM-Eigenschaft namens onclick,
sondern eine jQuery-Methode, die den (durchaus treffenden) Namen click() trägt.
Mit ihrer Hilfe kann jedem Absatz innerhalb des Elements mit der ID box ein Click-
Event-Handler hinzugefügt werden. Schreiben Sie also das Script einfach einmal ent-
sprechend um. Ob Ihnen wieder drei Zeilen reichen werden? Na sicher!
3.5 Das Mausereignis – Bindung eines Click-Events
57
3
$(document).ready( function() {$('#box p').click( function() {
$(this).addClass("green");});
});
Dass $('#box p') in seiner Kürze dasselbe bewirkt wie der längere Ausdruck docu-
ment.getElementById("box").getElementsByTagName("p") haben Sie vielleicht bereits
akzeptiert. Erinnern Sie sich, dass Sie hier auf die for-Schleife verzichten können:
jQuery wendet ja im Fall einer Knotenliste (Sie wissen, dass es sich nicht um eine
»gewöhnliche« Knotenliste handelt) eine Methode auf alle Items der Liste an (als
»implizite Schleife«). Praktisch!
Sobald ein <p>-Element tatsächlich geklickt wird, tritt die anonyme Funktion im
Inneren von click() in dessen Namen in Aktion. (Wie Sie bereits zuvor erfahren
haben, bezeichnet man diese Funktion als Callback-Funktion. Als solche wird sie erst
dann ausgeführt, wenn das Klick-Event eintritt.)
Das this in ihrem Inneren bezieht sich auf den geklickten <p>-Container. Da dieses
this (als herkömmlicher <p>-Container) mit addClass() nichts anfangen könnte,
wrappen Sie es über die $()-Funktion wieder in ein jQuery-Objekt.
Unter die Lupe damit:
// die anonyme Funktion in click():$('#box p').click( function() {
// das Kontextobjekt this wird jQueryfiziert:$(this).addClass("green");
});
Hier folgt zusammenfassend der Quellcode der gesamten Datei:
<html><head>
<title>Listing 3</title>
<!-- Zunächst die Style-Angaben: --><style type="text/css">
p {cursor:pointer;
}.green {
color:#009933;background-color:#E2FFEC;cursor:default;
}
3 jQuery – der Einstieg
58
</style>
<!-- Nun das Framework einbinden: --><script type="text/javascript"
src="../jquery/jquery-1.6.2.min.js"></script>
<!-- ... und jetzt unseren eigenen Code: --><script type="text/javascript">
$(document).ready(function() {$("#box p").click(function() {
$(this).addClass("green");});
});</script>
</head><body>
<div id="box"><p>Erster Absatz</p><p>Zweiter Absatz</p><p>Dritter Absatz</p>
</div></body></html>
Listing 3.3 Schriftfarbe ändern mit Click-Event (mit jQuery)
Wollen Sie innerhalb eines klickbaren Textabsatzes die Koordinaten des Klick-Ereig-
nisses erfassen, stoßen Sie auf eine weitere Diskrepanz zwischen den JavaScript-
Implementierungen der Browser.
Der Standard verlangt die Übergabe der Informationen über ein Ereignis (u. a. Art
und Ort des Ereignisses) an die durch das Ereignis getriggerte Funktion, die die Infor-
mation auswerten kann. Die Informationsstruktur wird als ein JavaScript-Objekt
übergeben, das allgemein als Event-Objekt bezeichnet wird. Es wird von der Zielfunk-
tion durch einen Parameter (meist wird für diesen der Bezeichner e wie event ver-
wendet) in den Argumentklammern aufgefangen:
meineP[i].onclick = function(e) { ... }, false);
Leider implementiert der Internet Explorer dies nicht auf die gleiche Weise. Nicht
dass es hier keine Informationen über das Ereignis gäbe, das stattgefunden hat. Aller-
dings lagern diese in einem Objekt event, das dem window-Objekt unterstellt ist:
window.event. Die Funktion bekommt keinen Wert übergeben, sondern muss sich
diesen vielmehr holen.
3.5 Das Mausereignis – Bindung eines Click-Events
59
3
In standardkonformen Browsern können Sie, um die Klickkoordinaten zu erfassen,
Folgendes schreiben:
meineP[i].onclick = function(e) {// Zugriff auf das übergebene Event-Objekt e:alert('Klick an ' + e.clientX + ' und ' + e.clientY);
};
Im Internet Explorer müsste dies wie folgt geschehen (Sie schreiben kurz event statt
window.event und lassen dafür den Übergabeparameter in den Funktionsklammern
weg – zum Glück sind wenigstens die Eigenschaften des Event-Objekts gleich
benannt):
meineP[i].onclick = function() {// direkter Zugriff auf window.event:alert('Klick an ' + event.clientX +
' und ' + event.clientY);};
Nun müssten wir, um zu entscheiden, nach welchem Modell gearbeitet wird, feststel-
len, ob der Funktion etwas übergeben wird oder nicht. Hierfür gibt es einen alten Pro-
grammierertrick, der den Übergabeparameter prüft, ohne umständlich auf eine
if-else-Bedingung zurückzugreifen. Sie setzen einfach (sehr viel kürzer) den ter-
nären Operator ? : ein – hier ein erläuterndes Beispiel:
meineP[i].onclick = function(e) {// wurde ein e übergeben?e ? alert("e definiert!") : alert("e undefiniert!");// und nun weiter ...
};
Geprüft wird das übergebene e. Ist es undefiniert (wurde das Script also im IE ausge-
führt) und damit false, wird der Ausdruck rechts vom Doppelpunkt verwendet,
ansonsten (e wird zu true ausgewertet) links davon. Die Inkompatibilität überwinden
Sie demnach, indem Sie, bei false, e gleich window.event setzen (ansonsten e einfach
belassen) und anschließend nach »Schema F« fortfahren:
meineP[i].onclick = function(e) {e? e : e = window.event;// Prima, auch in IE heißt window.event jetzt e:alert('Klick an ' + e.clientX + ' und ' + e.clientY);
};
Abgesehen von dieser kleinen »Verrenkung« ist die Lösung nun recht einfach
browserübergreifend zu schreiben. Der gesamte Code sieht jetzt so aus:
3 jQuery – der Einstieg
60
window.onload = function() {var meineP = document.getElementsByTagName("p");for(var i =0, len=meineP.length; i<len; i++) {meineP[i].onclick = function(e) {e? e : e = window.event;alert('Klick an ' + e.clientX + " und " + e.clientY);};
}}
Schauen Sie aber nun einmal, wie jQuery dies löst:
$(document).ready( function() {$('p').click( function(e) {alert('Klick an ' + e.clientX + " und " + e.clientY);
});});
Offensichtlich spart jQuery nicht nur (wie Sie bereits wissen) die for-Schleife ein, son-
dern sorgt obendrein dafür, dass die durch ein Ereignis getriggerte Funktion stets ein
Event-Objekt übergeben bekommt. Die $()-Funktion bietet aber noch mehr, lassen
Sie sich überraschen!
3.6 Give me more! – Verkettung von jQuery-Methoden
Eine angenehme Eigenheit von jQuery ist, dass Sie mehrere jQuery-Methoden hin-
tereinander an ein jQuery-Objekt hängen können. Das Geheimnis besteht darin, dass
jede jQuery-Methode wieder ein jQuery-Objekt zurückgibt.
Dieses jQuery-Objekt (es handelt sich um das gleiche wie am Anfang, nur mit den
»eingearbeiteten« Veränderungen der eben angewendeten Methode) steht somit
quasi »am Ausgang« zur Verfügung, so dass eine weitere Methode darauf angewen-
det werden kann. Und dies funktioniert immer so weiter. Sie können sich das wie ein
Werkstück vorstellen, das eine Montagestraße entlangläuft:
// die jQuery-Methoden werden einfach verkettet:$(selektorausdruck).methode1().methode2().methode3();
Das könnten Sie (nur zur Erinnerung) auch wie folgt schreiben (Vorsicht: Bloß kein
Semikolon an die Zeilenenden setzen – außer ganz am Schluss!):
3.6 Give me more! – Verkettung von jQuery-Methoden
61
3
// die jQuery-Methoden werden einfach verkettet:$(selektorausdruck).methode1().methode2().methode3();
Aber schauen Sie es sich einfach einmal genau an: Sie haben bereits mit $(this).
addClass("green") gesehen, dass Sie einem Element eine CSS-Klasse hinzufügen
können. Lassen Sie uns dieses Beispiel erweitern.
3.6.1 Den Elternknoten eines Elements manipulieren
Sagen wir, wir wollen das Elternelement von this (den die <p>-Container umgeben-
den <div>-Container) mit den Klassen boxColor-0 bis boxColor-2 versehen.
Anklickbar sein sollen hierbei nach wie vor die Textabsätze selbst. Sie müssen es nun
so einrichten, dass jQuery dem Div die CSS-Klasse abhängig davon zuweist, welcher
<p>-Container angeklickt wurde. Das heißt, für den ersten <p>-Container erhält der
Div die Klasse boxColor-0, für den zweiten vergeben Sie boxColor-1 etc.
Bei jedem Klick muss die vorher an den Div vergebene Klasse allerdings entfernt wer-
den. Ebenso soll nur der eben angeklickte <p>-Container die Klasse green besitzen,
von allen anderen muss sie wieder verschwinden. Eine ganze Menge an Randbedin-
gungen! Allerdings ist das halb so schlimm, wenn Sie sich Stück für Stück an die
Lösung heranarbeiten.
Selektieren Sie zunächst alle <p>-Container in Div#box, und machen Sie sie an-
klickbar:
$("#box p").click( function() {...
});
So weit, so gut. Der angeklickte <p>-Container soll die Klasse green erhalten. Diesen
Container holen Sie mit $(this). Auch das kennen Sie bereits:
$("#box p").click( function() {$(this).addClass("green");
});
Jetzt wird es interessanter – Sie haben den angeklickten <p>-Container bereits in der
Hand, wollen jetzt aber etwas mit dessen Elternknoten, dem Div, machen. Gut, wech-
seln Sie einfach vom <p>-Container dorthin.
3 jQuery – der Einstieg
62
jQuery bietet Ihnen hierfür die Methode parent(). Weil Sie im Baum von einem Ele-
ment zum anderen klettern (Bergsteiger bezeichnen dies als traversieren), zählt
jQuery die parent()-Methode zu den Tree-traversing-Methoden.
Gehen Sie also zum Div:
$("#box p").click( function() {$(this).addClass("green").parent();
});
Nochmals zum Verständnis – der Ausdruck $(this).addClass("green"). Der
parent() ist jetzt der <div>-Container. Kürzer hätten Sie $(this).parent() schreiben
können, aber Sie hatten ja »unterwegs noch etwas zu erledigen« ...
Nun sorgen Sie dafür, dass am <div>-Container CSS-mäßig »Tabula rasa« gemacht
wird: Mit removeClass() entfernen Sie eventuell dort befindliche CSS-Klassen:
$("#box p").click( function() {$(this).addClass("green").parent().removeClass();
});
Jetzt soll dem Div die gewünschte Klasse hinzugefügt werden. Dies machen Sie wie-
derum mit addClass(). Weichen Sie auf die mehrzeilige Schreibweise aus, und kom-
mentieren Sie das Geschehen ein wenig mit:
$("#box p").click( function() {$(this) // der angeklickte P-Container.addClass("green") // erhält die Klasse green.parent() // wir traversieren zum Elternknoten.removeClass() // entfernen dort alle CSS-Klassen.addClass( ... ); // und fügen eine neue hinzu
});
Stopp – wo bekommen Sie nun den Klassennamen her, den Sie .addClass() überge-
ben müssen? Der Bezeichner beginnt immer mit boxColor- und geht dann mit einer
der Ziffern 0, 1 oder 2 weiter, die den <p>-Container bezeichnen. Das erinnert an die
Indexziffern eines Arrays.
Handelt es sich hier denn um ein Array? Sozusagen. Und zwar, wenn Sie den grundle-
genden Ausdruck $("#box p") nehmen. Von diesen drei <p>-Containern ist einer
angeklickt worden, der im Rahmen unserer Funktion durch this bezeichnet wird.
jQuery bietet Ihnen nun eine Methode .index(), die Ihnen die Position pos eines
Objekts in einer Knotenliste nennen kann.
Das Prinzip ist dieses:
var pos = $(knotenliste).index(vergleichsobjekt);
3.6 Give me more! – Verkettung von jQuery-Methoden
63
3
Auf unseren Fall angewendet, schreiben Sie beispielsweise:
var pos = $("#box p").index(this);
Speichern Sie aber den Rückgabewert nicht, sondern setzen Sie ihn direkt ein:
$("#box p").click( function() {$(this) // der angeklickte P-Container.addClass("green") // erhält die Klasse green.parent() // wir traversieren zum Elternknoten.removeClass() // entfernen dort alle CSS-Klassen.addClass("boxColor-" + $("#box p").index(this));
});
Sie haben nun ganz vergessen, dafür zu sorgen, dass noch die Klasse green von vorher
geklickten <p>-Containern entfernt werden muss. Dies erledigen Sie einfach pauschal
zu Beginn der Funktion. Es macht nichts, dass einer der Absätze sofort wieder die
gleiche Klasse erhält ...
$("#box p").click( function() {// pauschal überall die Klasse green entfernen:$("#box p").removeClass("green");$(this) // der angeklickte P-Container.addClass("green") // erhält die Klasse green.parent() // wir traversieren zum Elternknoten.removeClass() // entfernen dort alle CSS-Klassen.addClass("boxColor-" + $("#box p").index(this));
});
Das ist jetzt insoweit schön, als dass es funktioniert. Allerdings ist es ein wenig unor-
dentlich. Außerdem haben Sie nun dreimal ein jQuery-Objekt mit demselben Aus-
druck $("#box p") gebildet. Das wirkt unökonomisch. Sie könnten dieses Objekt auch
speichern, also in eine Variable packen, und »recyceln«:
var obj = $("#box p");
Sie erhalten dann:
var obj = $("#box p");obj.click( function() {
// pauschal überall die Klasse green entfernen:obj.removeClass("green");$(this) // der angeklickte P-Container.addClass("green") // erhält die Klasse green.parent() // wir traversieren zum Elternknoten
3 jQuery – der Einstieg
64
.removeClass() // entfernen dort alle CSS-Klassen
.addClass("boxColor-" + obj.index(this));});
Damit lässt sich schon besser arbeiten. Nun könnten Sie auch das ständige Hin und
Her mit Entfernen und Hinzufügen von Klassen sortieren:
var obj = $("#box p");obj.click( function() {
// erst alle Klassen entfernenobj.removeClass("green").parent().removeClass();// jetzt Klassen hinzufügen:$(this).addClass("green").parent().addClass("boxColor-" + obj.index(this));
});
Lagern Sie nun noch die Indexerzeugung aus dem unteren Ausdruck aus:
var obj = $("#box p");obj.click( function() {
// welcher P-Container wurde angeklickt?var pos = obj.index(this);// erst alle Klassen entfernenobj.removeClass("green").parent().removeClass();// jetzt Klassen hinzufügen:$(this).addClass("green").parent().addClass("boxColor-" + pos);
});
So sieht die Funktion nun im Großen und Ganzen aus – das vorher Geschriebene
muss lediglich noch in einen ready-Block eingefügt werden:
<html><head>
<title>Listing 4</title>
<!-- Zunächst die Style-Angaben: --><style type="text/css">
p {cursor:pointer;
}.green {
color:#009933;background-color:#E2FFEC;cursor:default;
3.6 Give me more! – Verkettung von jQuery-Methoden
65
3
}.boxColor-0 {
background-color:#CCCCCC;}.boxColor-1 {
background-color:#EEEEEE;}.boxColor-2 {
background-color:#999999;}
</style>
<!-- Nun das Framework einbinden: --><script type="text/javascript"
src="../jquery/jquery-1.10.2.min.js"></script>
<!-- ... und jetzt unseren eigenen Code: --><script type="text/javascript">
$(document).ready(function() {var obj = $("#box p");obj.click(function() {
var pos = obj.index(this);obj.removeClass().parent().removeClass();$(this).addClass("green").parent().addClass("boxColor-" + pos);
});});
</script></head><body>
<div id="box"><p>Erster Absatz</p><p>Zweiter Absatz</p><p>Dritter Absatz</p>
</div></body></html>
Listing 3.4 Verkettung von jQuery-Funktionen
3 jQuery – der Einstieg
66
3.7 Zusammenfassung
jQuery stellt Ihnen ein wichtiges Event zur Verfügung, mit dem Sie überprüfen kön-
nen, ob ein HTML-Baum fertig geladen wurde, und zwar $(document).ready(fn), um
erst anschließend, nach der Prüfung, eine Funktion auszuführen. Es stellt Ihnen ein
einfaches Modell zur Navigation durch den Dokumentenbaum zur Verfügung, mit
Hilfe von Selektoren, die sich an den Spezifikationen der CSS-Selektoren orientieren.
Sie können aus einem Arsenal an Werkzeugen wählen, mit dem Sie eine HTML-Seite
manipulieren können, wobei Sie bei Ihren ersten Gehversuchen .addClass(name)
kennengelernt haben. Sie können nun zudem mehrere jQuery-Methoden miteinan-
der verketten. Alles in allem entsteht damit ein schlanker Code, und eine strikte
Strukturierung Ihrer Projekte wird möglich, da Sie die HTML-Seite von allem mögli-
chen Ballast befreien und diesen zu Ihrer besseren Übersicht in externe Dateien aus-
lagern können.
Und wie jetzt weiterarbeiten?
Mit Kapitel 4, »jQuery – die Übersicht«, folgt ein längeres (zugegeben sehr langes)
Kapitel, in dem wir Ihnen das gesamte Vokabular von jQuery vorstellen und es aus-
führlich besprechen. Irgendwo muss ja alles stehen. Sie können es natürlich hier und
jetzt durchlesen, um einen Kompletteindruck zu erhalten. Vielleicht möchten Sie
aber stattdessen die Ärmel hochkrempeln, die Siebenmeilenstiefel anziehen und
direkt zum Praxisteil in Kapitel 5, »jQuery – der Praxiseinsatz«, springen. Dort wer-
den die jQuery-Methoden angewendet, aber nicht erklärt. Erklärt werden natürlich
die Beispiele. Sie können die vorgestellten Beispiele nachvollziehen und immer dann
in den Referenzteil zurückblättern, wenn Sie Hintergrundinformationen benötigen.
551
6
Kapitel 6
jQuery UI
Das Paket jQuery UI ist ein Aufsatz auf das jQuery-Basisframework. Im
Prinzip besteht UI aus Interaktionsroutinen und einer Reihe aufeinan-
der abgestimmter, über CSS-Themes optisch konfigurierbarer Plugins,
die Oberflächenelemente (so genannte »Widgets«) erzeugen.
Das jQuery UI steht für jQuery User Interface. Es ist eine Erweiterung des jQuery-
Frameworks, das einerseits erweiterte Interaktion wie Effekte, Drag & Drop, Easing
und Farbanimationen bereitstellt, andererseits komplexe Oberflächen-Controls
(Widgets) wie Datepicker, Navigationen und Dialogboxen zur Auswahl bietet.
Abbildung 6.1 Die Website http://jqueryui.com
6 jQuery UI
552
jQuery UI umfasst eine Sammlung von leicht individualisierbarer, einfach zu konfi-
gurierender Plugins. Im Einzelnen unterscheidet man folgende Bereiche.
6.1 Download und Konfiguration von jQuery UI
jQuery UI kann als Komplettpaket downgeloadet und in vollem Umfang in ein Pro-
jekt eingebunden werden.
� Die aktuelle Version von jQuery UI ist 1.10.3 (1.67 MB)
� Die Legacy-Version von jQuery UI ist 1.9.2 (1.70 MB)
Beide Versionen werden gepflegt; in der Regel wird man die aktuelle Version bevor-
zugen (die ältere unterstützt noch IE6).
Der Nachteil des Komplettpakets besteht darin, dass man Features und Widgets
downloadet und in die Projektdaten einbezieht, die möglicherweise nie verwendet
werden. Die UI-Datei wird unnötig groß.
Aus diesem Grund ist ein frei konfigurierbarer Custom Download möglich, bei dem
beliebig Elemente an- und abwählbar sind.
Interaktion Drag/Drop, Größenänderung, Auswahlen, Sortierungen
Widgets Accordion, Autovervollständigung, Button, Datepicker, Dialog,
Fortschrittsbalken, Schieberegler, Tabs
Utilities Positionierung, Mausinteraktion
Effekte Die Methoden effect(), Farbanimationen mit animate(),
switchClass(), Erweiterungen für Methoden show(), hide(),
toggle(), addClass(), removeClass(), toggleClass().
Tabelle 6.1 jQuery UI – Übersicht
Abbildung 6.2 Download auf Startseite http://jqueryui.com/
6.1 Download und Konfiguration von jQuery UI
553
6
6.1.1 Der Download Builder von jQuery UI
Der Download Builder zum Erstellen eines Custom Downloads gilt sowohl für die
aktuelle Version als auch das Legacy-UI.
Der Build ist unterteilt in die Bereiche
� UI Core (Dienst-Funktionen und Basis-Utilities)
Core, Widget, Mouse, Position
� Interactions (Verhalten für Elemente und Widgets)
Draggable, Droppable, Resizable, Selectable, Sortable
� Widgets (Interface-Elemente, benötigen Core und Interactions)
Accordion, Autocomplete, Button, Datepicker, Dialog, Menu, Progressbar, Slider,
Spinner, Tabs, Tooltip
� Effects (autarke Effekte mit vielfältiger API)
Effects Core, Blind Effect, Bounce Effect, Clip Effect, Drop Effect, Explode Effect,
Fade Effect, Fold Effect, Highlight Effect, Pulsate Effect, Scale Effect, Shake Effect,
Slide Effect, Transfer Effect
Abbildung 6.3 Der Download Builder von jQuery UI
6 jQuery UI
554
Zwischen den Abteilungen bestehen Abhängigkeiten – so sind weder Interactions
noch Widgets ohne (zumindest Teile des) UI Core anwendbar. Der Downloader warnt
aber bei Diskrepanzen und wählt entsprechende Module selbstständig zu oder ab.
6.2 Theming von jQuery UI
Die Widgets von jQuery UI sind themeable, das bedeutet, es existieren vordefinierte
CSS-Klassen innerhalb der HTML-Struktur des Widget-Markups. Auf diese Klassen
sind CSS-Stylesheet-Dateien (Themes) abgestimmt, die im Rahmen des UI-Pakets mit
downgeloadet werden.
Sie können bereits beim Download im Builder ein Theme auswählen. Das Default-
Theme trägt den Namen »Smoothness«. Es handelt sich um ein extrem zurückhal-
tendes Farbschema. Alternativ sind auch ausgesprochen bunte Themes erhältlich.
Wenn Sie das Aussehen der Widgets mit einem bestimmten Theme begutachten
möchten, wechseln Sie in die Abteilung Themes.
Hier haben Sie im Rahmen des ThemeRollers die Option, entweder ein komplett eige-
nes Theme zu definieren (planen Sie hierfür etwas Zeit ein) oder anhand einer Gallery
die Wirkung der vordefinierten Themes zu begutachten.
Abbildung 6.4 Auswahl eines Themes im ThemeRoller
6.2 Theming von jQuery UI
555
6
Das gewählte Theme kann als Ausgangspunkt für eine Eigenkreation dienen. Sie kön-
nen (u. a.) Schriften, Eckenradius, Farben von Kopf- und Fußleisten und anderer
Bereiche frei wählen.
Abbildung 6.5 Die ThemeRoller Gallery – links »Smoothness«, rechts »Darkness«
Abbildung 6.6 Farbwahl für den Header-Bereich eines eigenen Themes
6 jQuery UI
556
Das fertige Theme steht nach Abschluss der Bearbeitung als Download zur Verfü-
gung. (Sie wählen dann noch die UI-Komponenten dazu aus.)
Bookmarken Sie Ihren Download
Bookmarken Sie die ThemeRoller-Seite vor dem Download. Sie haben so die Mög-
lichkeit, den Bearbeitungszustand Ihres Themes zu speichern, um beispielsweise
später daran weiterzuarbeiten oder es zu modifizieren.
Alle Theme-Parameter werden im URI-String festgehalten:
http://jqueryui.com/themeroller/#zThemeParams=5d00000100490600 ...
Es besteht ansonsten keine Möglichkeit, ein downgeloadetes Theme zur Bearbei-
tung wieder upzuloaden (anders als bei jQuery Mobile).
6.2.1 Scoped Themes
Möchten Sie mehrere Themes gleichzeitig in Ihrem Dokument verwenden, oder ein-
fach zwischen zwei Themes wechseln können, so besteht die Möglichkeit, beim
Download einen Scope (aka eine Basisklasse) für das Theme festzulegen.
Geben Sie den gewünschten Klassennamen einfach in das Feld CSS Scope ein. Verges-
sen Sie nicht den Punkt vor dem Bezeichner!
Abbildung 6.7 Downloadbutton des ThemeRollers
Abbildung 6.8 Angabe einer Basisklasse für einen Theme-Download
6.2 Theming von jQuery UI
557
6
Der Effekt ist der, dass die Basisklasse allen Selektoren des Themes vorangestellt
wird:
.redmond .ui-widget {font-family: Lucida Grande, sans-serif;font-size: 1.1em;
}
Dies gibt Ihnen die Möglichkeit, ein Theme durch Einsatz seiner Basisklasse auf Be-
reiche zu beschränken oder an- und abzuschalten:
<body class="redmond">... überall im Dokument Theme "Redmond" ...</body>
<body class="cupertino">... überall im Dokument Theme "Cupertino" ...</body>
...<div class="redmond">... hier Theme "Redmond".</div><div class="cupertino">... hier Theme "Cupertino".</div>...
Hinweis: Die von den UI-CSS-Dateien eingesetzten Grafiken sind farblich und dem
Dateinamen nach auf das jeweilige Theme angepasst und liegen relativ zur CSS-Datei
stets in einem Unterordner images/.
Setzen Sie mehrere Themes gleichzeitig oder alternativ ein, so ist eine Ordnerstruk-
tur wie diese hier sinnvoll (CSS entsprechend umbenennen):
css/
smoothness/
smoothness.css
images/
redmond/
redmond.css
images/
cupertino/
cupertino.css
images/
...
Hierbei könnte Smoothness (ohne Basisklasse) als Default fungieren.
6 jQuery UI
558
6.3 Einsatz von jQuery UI
jQuery UI wird grundsätzlich als gezipptes Paket ausgeliefert – das ist unabhängig
davon, ob Sie das Komplettpaket oder einen konfigurierten Download herunter-
laden.
Auch wenn Sie lediglich ein Theme laden, also alle UI-Optionen im Konfigurator
abgewählt haben, ergibt sich dieselbe Struktur. Die JavaScript-Dateien sind dann
aber weitgehend leer.
6.3.1 Dateistruktur von jQuery UI
Betrachten Sie nun bitte die Struktur des entpackten Pakets. Das Downloadpaket ent-
hält eine Startseite index.html und drei Unterordner:
� development-bundle/
Dieser Ordner beinhaltet Anwendungsbeispiele (in demos/), zusätzliche Plugins
(in external/), die Dokumentation (in docs/), Lizenzbestimmungen und in
themes/ zwei Beispielthemes. Im Unterordner ui/ finden Sie alle UI-Plugins als
Einzeldateien.
� [jquery-ui-ordner]/js/
Hier befindet sich eine Datei mit dem jQuery-Framework in Version jquery-1.9.2.js
sowie eine weitere Datei jquery-ui-1.10.3.custom.js, in der die jQuery UI-Plugins zu-
sammengefasst sind – ebenso als Minified-Version jquery-ui-1.10.3.custom.min.js.
Dateien umbenennen – machen Sie es sich einfacher!
Sie können die Dateien der Einfachheit halber kopieren und umbenennen in
jquery-ui.js und jquery-ui.min.js.
� [jquery-ui-ordner]/css/
Hier finden Sie alle Dateien, die Sie benötigen, um den Widgets ein Layout zu ver-
leihen oder das vorgegebene Aussehen zu verändern. Pro Theme finden Sie hier
einen Unterordner (per Default smoothness/), der die CSS-Dateien und Icon-Grafi-
ken enthält.
Die CSS-Dateien tragen etwas unhandliche Namen wie jquery-ui-1.10.3.custom.css
etc. Auch diese Dateien können Sie beliebig umbenennen oder verschieben, indem
Sie etwa dem Vorschlag bei den »scoped« Themes folgen. Behalten Sie aber in jedem
Fall die Relation zum dazugehörenden images-Ordner bei! Die Grafiken sind je
Theme verschieden (Farben, Dateinamen).
6.4 Einbinden von jQuery UI
559
6
6.4 Einbinden von jQuery UI
Um jQuery UI in Ihrem Projekt einzusetzen, kopieren Sie einen Teil des entpackten
UI-Zips in Ihr Projektverzeichnis.
Legen Sie die JavaScript-Dateien jquery-ui-1.10.3.custom.js und jquery-ui-1.10.3.
custom.min.js aus js/ in den gleichen Ordner, in dem bereits Ihr jquery.js liegt.
Benennen Sie die Dateien um, wenn Sie möchten.
Kopieren Sie den Ordner smoothness/ aus dem css-Verzeichnis des UI-Zips (inklusive
des Unterorders images/).
Benennen Sie die CSS-Dateien darin um, wenn Sie dies möchten (wir wählen den
Namen smoothness.css bzw. smoothness.min.css).
Ihr Projektordner könnte nun aussehen wie folgt:
projekte/
js/
jquery.js
jquery-ui.js
jquery-ui.min.js
css/
smoothness/
smoothness.css
smoothness.min.css
images/
uebungen-ui/
...
Das Einbinden von jQuery UI ist einfach – zu beachten ist lediglich, dass Sie (zumin-
dest sofern Sie Widgets einsetzen möchten, was aber meist der Fall ist) mindestens
ein UI-Theme einbinden müssen. Dies geschieht vor dem Einbinden der JavaScript-
Dateien.
Bei diesem ist, ebenso wie beim Einsatz von Plugins (auch UI besteht aus Plugins),
eine Reihenfolge zu beachten – zuerst jQuery, dann jQuery UI.
<!DOCTYPE HTML><html lang="de-DE"><head>
<meta charset="UTF-8"><title>jQuery UI einbinden</title><link rel="stylesheet"href="../css/smoothness/smoothness.css"><script type="text/javascript"
6 jQuery UI
560
src="../js/jquery.js"></script><script type="text/javascript"src="../js/jquery-ui.js"></script><script type="text/javascript">
// Ihr Code hier ...</script>
</head><body>
...</body></html>
6.5 CSS-Klassen eines UI-Widgets
Betrachten wir zunächst die Widgets, da sie als sichtbare Oberflächenelemente den
spektakulärsten Aspekt des UI-Frameworks darstellen. Alle Widgets besitzen einen
annähernd gleichen Aufbau, der durch eine HTML-Struktur bestimmt wird, in der
festgelegte CSS-Klassen vergeben sind. Diese Klassen legen die Rolle fest, die die
betreffenden HTML-Elemente innerhalb des Widgets einnehmen. Daraus folgt auch
eine bestimmte Optik.
<div class="ui-widget"><div class="ui-widget-header"><p>Dies ist ein Widget-Header</p>
</div><div class="ui-widget-content"><p>Dies ist der Contentbereich des Widgets, umgebenvon einem Element der Klasse ui-widget-content.</p>
</div></div>
Hierbei sind folgende drei Basisklassen beteiligt:
� ui-widget
Das Widget selbst bzw. der Widget-Container.
� ui-widget-header
Der Container, der den Header-Bar des Widgets generiert.
� ui-widget-content
Der Container, der die Inhalte des Widgets umschließt.
Mit Zusatzklassen können weitere Grundstylings wie Eckradien der Header- und des
Content-Containers gesetzt werden.
6.5 CSS-Klassen eines UI-Widgets
561
6
� ui-corner-all
Alle vier Ecken des Containers erhalten den border-radius des Themes.
� ui-corner-top, ui-corner-bottom
Die beiden oberen respektive unteren Ecken werden gerundet.
� ui-corner-left, ui-corner-right
Die beiden linken respektive rechten Ecken werden gerundet.
Die nicht betroffenen Ecken behalten den Default-Radius 0. Die Klassen können
nicht auf den Widget-Container selbst angewendet werden.
Mit vergebenen Corner-Klassen sieht die Widget-Struktur so aus:
<div class="ui-widget"><div class="ui-widget-header ui-corner-top"><p>Dies ist ein Widget-Header</p>
</div><div class="ui-widget-content ui-corner-bottom"><p>Dies ist der Contentbereich des Widgets, umgebenvon einem Element der Klasse ui-widget-content.</p>
</div></div>
Weitere Klassen dienen dem Zuweisen von Zuständen (»inaktiv« bzw. »aktiv«),
wobei dies optisch durch ein Icon unterstützt werden kann. Diese Klassen werden bei
Interaktion mit dem Widget automatisch vergeben:
� ui-state-default
Definiert den Default-Zustand eines Containers oder UI-Elements (»nicht ausge-
wählt«, »inaktiv«).
Abbildung 6.9 HTML-Struktur mit Widget-Klassen, rechts mit ui-corner-radius
6 jQuery UI
562
� ui-state-active
Definiert den aktiven Zustand des UI-Elements.
� ui-state-hover
Diese Klasse definiert den Hover-Zustand des UI-Elements.
Alle drei Klassen sind im ThemeRoller konfigurierbar (siehe Abbildung 6.10):
Beispiel: Der Contentbereich eines Widgets wird klickbar gemacht und wechselt
seine Interaktionsklasse. Im Container befindet sich ein weiteres Element, das den
Bereich eines Icons definiert.
<div class="ui-widget"><div class="ui-widget-header ui-corner-top"><p>Dies ist ein Widget-Header</p>
</div><div class="ui-widget-content
ui-state-defaultui-corner-bottom">
<p class="ui-icon ui-icon-circle-plus"style="float:left;margin:21px 10px"></p>
<p>Dieser Content ist durch Klick aktivierbar.</p></div>
</div>
Dies geht natürlich nicht ganz von selbst – fügen Sie ein Script ein, das am Content-
bereich die Klasse ui-state-active toggelt:
$(document).ready(function(){$('.ui-widget-content').click(function(){
$(this).toggleClass('ui-state-active');});
})
Abbildung 6.10 Der ThemeRoller als Interface für die Interaktionsklassen
6.6 Layout-Widgets aus jQuery UI
563
6
Beachten Sie, dass das Icon seine Darstellung ebenfalls anpasst.
6.6 Layout-Widgets aus jQuery UI
Zur Erstellung von Layout-Elementen, aber auch zur allgemeinen Gestaltung von
User Interfaces und dem Handling von Interaktionen enthält jQuery UI eine Reihe
vordefinierter, aber in hohem Maße konfigurierbarer Widgets. Die Gestaltung all die-
ser Widgets wird durch das jeweilige Theme bestimmt.
� Das Dialog-Widget ersetzt die modalen Dialogboxen des Betriebssystems durch
konfigurierbare modale Dialoge.
� Die Progressbar ist ein modales Widget, das den Verlauf eines Ladevorgangs signa-
lisieren kann.
� Das Accordion-Widget bietet den bekannten Akkordeon-Effekt beim Umschalten
zwischen verschiedenen Inhaltsbereichen (Content-Panes).
� Das Tab-Widget funktioniert analog zum Accordion-Widget, verwendet aber ein
Tab-Menü zur Steuerung.
6.6.1 Dialog-Widget
Ein Dialog wird auf Basis einer HTML-Struktur generiert, die »jQuery-fiziert« wird –
dies geschieht durch Selektion und anschließende Anwendung einer UI-Methode auf
die Collection.
Beginnen wir mit einer einfachen Struktur. Die ID hilft lediglich bei der Selektion –
wichtiger ist das title-Attribut:
<div id="meindialog" title="Einfacher Dialog"><p>Ein Dialog wird auf Grundlage dieser einfachenStruktur generiert und kann durch ein von jQuery UIerzeugtes Icon geschlossen werden.</p>
</div>
Abbildung 6.11 Aktivierbarer Content, links Default, rechts aktiviert
6 jQuery UI
564
Der Code zur eigentlichen Erzeugung eines Default-Dialogs ist simpel:
$(document).ready(function() {$("#meindialog").dialog();
});
Dies bringt folgendes Ergebnis (hier mit Theme »redmond«):
Um einen Standard-Dialog zu erzeugen, braucht auf das selektierte Element lediglich
die UI-Methode dialog() angewendet werden. Ein solcher Dialog besitzt ein paar
Grundeigenschaften:
� nicht modal (Seite bleibt interaktiv)
� skalierbar und verschiebbar
� öffnet sich beim Laden automatisch und zentriert
Konfigurieren des Dialogs
Um ein vom Standarddialog abweichendes Verhalten festzulegen, muss dem Dialog
ein Konfigurationsobjekt übergeben werden:
$(document).ready(function() {$("#meindialog").dialog( {
resizable: false,modal: true,height:150
} );});
Ein solcher Dialog ist modal und besitzt eine feste Größe, die vom User nicht verän-
dert werden kann.
Abbildung 6.12 Der Dialog ist skalier- und verschiebbar.
6.6 Layout-Widgets aus jQuery UI
565
6
Ein Dialog mit Buttons
Auch das Hinzufügen von Buttons ist möglich:
$(document).ready(function() {$("#meindialog").dialog({
resizable: false,modal: true,height:215,buttons: {
OK: function() {$(this).dialog("close");
},Cancel: function() {
$(this).dialog("close");}
}});
});
In diesem Fall dienen die Buttons nur dem Schließen des Dialogs – hierfür wird das
Dialog-Widget this mit der Option »close« aufgerufen:
$(this).dialog("close");
Auf einen Dialog kann die Methode dialog() angewendet werden.
Statt Ok und Cancel können Buttons beliebige Beschriftungen erhalten. Auch die Zahl
der Buttons ist wählbar:
Abbildung 6.13 Konfigurierte Dialoge (rechts mit OK-/Cancelbuttons)
6 jQuery UI
566
buttons: {"Ja": function() {
$(this).dialog("close");},"Nein": function() {
$(this).dialog("close");},"Vielleicht": function() {
$(this).dialog("close");}
}
Konfigurationseigenschaften das Dialogs
Im Rahmen der Konfiguration können verschiedene Parameter gesetzt werden. Hier
eine Auswahl:
Parameter Wert (Default) Erläuterung
autoOpen boolean (true) Verhindert automatisches Öffnen des
Dialogs
buttons Object ({}) Konfiguriert Buttons des Dialogs als
Button-Array in einem Unterobjekt
draggable boolean (true) Macht Dialog verschiebbar
height, width Number
(»auto«)
Setzt Höhe und Breite des Dialogs als
Ausgangswert
hide String (null) Nennt den Effekt beim Schließen des
Dialogs:
»explode«, »bounce«, »drop« ...
maxHeight, maxWidthminHeight, minWidth
Number (false) Minimal- und Maximalgrößen des Dialogs,
abhängig von den Inhalten
modal boolean (false) Setzt Dialog auf »modal« und verhindert
Interaktion mit dem Rest des Dokuments
resizable boolean (true) Größenveränderbarkeit durch den User
title String ( – ) Setzt den Titeltext des Dialogs
Tabelle 6.2 Konfigurationsparameter des Dialogs
6.6 Layout-Widgets aus jQuery UI
567
6
Die API des Dialogs
Eine Übersicht über die komplette API des Dialogs finden Sie hier:
http://api.jqueryui.com/dialog
Getter und Setter für Optionen
Alle Optionen können nachträglich gesetzt werden, indem einfach ein weiteres Mal
ein Konfigurationsobjekt übergeben wird.
Alternativ kann der Dialog-Methode das Keyword option übergeben werden, das
zusammen mit einem Parameternamen als Getter fungiert und als Setter, wenn
zusätzlich noch ein Wert hineingereicht wird:
// Gettervar draggable =meinDialog.dialog("option", "draggable"); //-> true// SettermeinDialog.dialog("option", "draggable", false);
Öffnen per Button: dialog(»open«)
Interessant ist es, das Öffnen des Dialogs steuerbar zu machen. Hierzu muss zum
einen in der Konfiguration die autoOpen-Option abgewählt werden. Zum anderen
muss ein Interface-Element (z. B. ein Button) das Öffnen programmatisch vor-
nehmen:
<p><button id="meinbutton">Dialog öffnen</button></p><div id="meindialog" title="Einfacher Dialog">
<p>Diese Meldung ist wahnsinnig wichtig.</p></div>
Das Script dazu:
$(document).ready(function() {$("#meindialog").dialog({ autoOpen: false,
modal:true });$( "#meinbutton" ).click(function() {
$( "#meindialog" ).dialog("open");});
});
6 jQuery UI
568
Dialog programmatisch erzeugen und befüllen
Die HTML-Struktur, die den Dialog aufspannt, muss nicht bereits im Dokument sein
– sie kann ebenso programmatisch erzeugt werden.
Hierfür wird einfach die $()-Funktion als Factory eingesetzt:
var meinDialog = $('<div></div>');meinDialog.dialog({autoOpen: false});
Dies geschieht nur aus Platzgründen in zwei Zeilen – Sie können die Dialog-Methode
auch unmittelbar auf das erzeugte jQuery-Objekt anwenden. Die Übergabe von auto-
Open:false verhindert, dass der Dialog sofort geöffnet wird.
Das (unsichtbare) Widget kann jetzt weiter konfiguriert werden. Dies geschieht durch
wiederholte Anwendung der Dialog-Methode mit erneuter Übergabe eines Konfigu-
rationsobjekts:
meinDialog.dialog({ modal:true,title:'Generierter Dialog' });
In der Tat wird die bisherige Konfiguration hierdurch ergänzt und nicht überschrie-
ben. Um einen Parameter zu überschreiben, müssen Sie ihn explizit neu setzen!
Sie können den Dialog jetzt öffnen – die Aktion wird an den Klick eines Buttons
gebunden:
$("#meinbutton").click(function() {meinDialog.dialog("open");
});
Der Dialog besäße jetzt allerdings noch keinen Inhalt und muss daher noch »befüllt«
werden – hier mit einem einfachen HTML-String. Dies kann im Verlauf des Öffnens
geschehen (ob davor oder danach, ist gleichgültig):
meinDialog.html('Das ist <i>generierter</i> Text.').dialog("open");
Die Widgetstruktur ist irrelevant für den Einsatz
Sie brauchen nichts über die HTML-Struktur des Widgets zu wissen, um den Dialog-
inhalt zu verändern.
6.6 Layout-Widgets aus jQuery UI
569
6
Methoden des Dialog-Widgets
Ein Dialog verfügt über eine Reihe von Methoden:
Die Methoden werden nicht direkt am Widget aufgerufen – dies geschieht stets über
die Dialog-Methode, wobei der Methodenname als String übergeben wird:
meinDialog.dialog("open"); // öffnet den DialogmeinDialog.dialog("close"); // schließt ihn
Falsch ist hingegen:
meinDialog.open() oder meinDialog.dialog().open();
Abbildung 6.14 Generierter Dialog – sieht aus wie ein »normaler« Dialog
Methode Erläuterung
open Öffnet den Dialog
close Schließt den Dialog
destroy Schließt den Dialog, wenn er offen ist und entfernt das Widget-
HTML aus dem Dokument
isOpen Returns: boolean; prüft, ob das Widget offen oder geschlossen ist
moveToTop Legt den Dialog bei mehreren geöffneten Dialogen in den obers-
ten Z-Index
Tabelle 6.3 Methoden des Dialog-Widgets
6 jQuery UI
570
6.6.2 Progressbar
Das Progressbar-Widget erzeugt einen Fortschrittsbalken, wie er als Feedback wäh-
rend eines Ladevorgangs o. Ä. eingesetzt wird. Es kann ganz einfach auf ein bestehen-
des HTML-Element aufgesetzt werden, auf das dann die Progressbar-Methode
angewendet wird:
<div id="pbar"></div>$(document).ready(function() {
$("#pbar").progressbar();});
Ohne Konfiguration ist das Widget allerdings nicht nützlich, da der Balken komplett
leer ist. Immerhin füllt er seinen Eltern-Container in der Horizontalen voll aus, ohne
dass hierfür Angaben erforderlich sind.
In der Regel wird man aber einen Wert value übergeben, der den Stand des Fort-
schrittsbalkens in Prozent angibt – ein Wert von »0« bis »100« wird akzeptiert:
$(document).ready(function() {$("#pbar").progressbar({ value:50 });
});
Dies erweitert die HTML-Struktur wie folgt (ARIA-Klassen weggelassen):
<div id="pbar"class="ui-progressbar ui-widget
ui-widget-content ui-corner-all"><div style="width:50 %;"
class="ui-progressbar-valueui-widget-header ui-corner-left">
</div></div>
Die Farbe des Balkens wird im Theme festgelegt. Um mehr Leben ins Spiel zu bringen,
kann per CSS das background-image-Property gesetzt werden, das ein animiertes GIF
einbindet. Als Selektoren werden die Klassen ui-progressbar und ui-progressbar-
value eingesetzt (siehe vorausgehendes Codebeispiel):
Parameter Wert (Default) Erläuterung
disabled boolean (false) Deaktivierung
value Number (0) Stand des Fortschrittszeigers
Tabelle 6.4 Konfigurationsparameter der Progressbar
6.6 Layout-Widgets aus jQuery UI
571
6
<style>.ui-progressbar .ui-progressbar-value {
background-image: url(../css/images/pbar-ani.gif);}</style>
Events für die Progressbar
Die Progressbar besitzt drei spezifische Arten von Event-Handlern, an die man bei
der Konfiguration Callback-Funktionen binden kann.
Der Einsatz geschieht am übersichtlichsten, indem man das Konfigurationsobjekt
getrennt von der Initialisierung der Progressbar definiert:
var pconf = {value:50,create: function(){
console.log('Progressbar initialisiert.')};
var change: function(){console.log('Der value hat sich geändert.')
Abbildung 6.15 Einfache Progressbar mit value 50 %
Ereignis Erläuterung
create Das Widget wird initialisiert.
change Der Wert des value-Parameter ändert sich.
complete Der Wert des value-Parameters hat 100 erreicht.
Tabelle 6.5 Events der Progressbar
6 jQuery UI
572
};var complete: function(){
console.log('Vorgang abgeschlossen.')}
};var pbar = $("#pbar").progressbar(pconf);
Ajax-gesteuerte Progressbar
In diesem Beispiel wird die Progressbar durch ein JSON-Objekt gesteuert, das durch
eine PHP-Datei generiert wird.
Hier der Scriptcode:
$(function(){var pconf = {
value:0,complete: function(){
console.log('Vorgang abgeschlossen.')}
};// Progessbar initialisierenvar pbar = $("#pbar").progressbar(pconf);// AIF-Function (startet automatisch):(function simulateprogress() {$.ajax({// Server liefert JSONdataType: "json",// URL erhält stets aktuellen Statusurl: './progress03_ajax.php?status=' +
pbar.progressbar("option", "value" ),// Nach erfolgreichem Abschluss des Requestssuccess: function(data) {
// PHP liefert in 'data' ein JSON Objekt mit// den Properties 'status' und 'message' zurück
// Überprüfen, ob ein JSON Objekt da ist.if(data.status && data.message) {
// Updaten der Progressbarpbar.progressbar("option",
"value",data.status);
6.6 Layout-Widgets aus jQuery UI
573
6
// Meldung darstellen$("#msg").html(data.message);
// Solange 100 % nicht erreicht sind ...if(data.status!=100) {
simulateprogress();}
}}); // Ende $.ajax
})() // Start der Funktion simulateprogress als AIF});
Die PHP-Datei, die das JSON-Objekt zurückgibt, finden Sie als progress03_ajax.php
auf der Begleit-DVD.
Hier ein Einblick in den Code:
$zufall = rand(1,3); // Zufallszahl generierensleep($zufall);// Prozessfortschritt als Prozentwert$php_array['status'] = $_GET['status']+($zufall * 3);// Bei 100 % ist Schlussif($php_array['status'] > 100) {
$php_array['status'] = 100;}// Ausgabe der Nachrichtif($php_array['status'] != 100) {
$php_array['message'] = 'Aktueller Status:'.$php_array['status'].' von 100, Countdown: '.(100 – $php_array['status']);
} else {$php_array['message'] = 'Aktueller Status: '
.'Ladevorgang abgeschlossen.';}
// Ausgabe des PHP-Arrays als JSON-Objektecho json_encode($php_array);
Die Konfiguration kann noch durch Callbacks bei Initialisierung und Wertänderung
ergänzt werden:
var pconf = {value:0,create: function(){
6 jQuery UI
574
console.log('Progressbar initialisiert.');},change: function(){
console.log('Der value hat sich geändert:',pbar.progressbar("option", "value"))
},complete: function(){
console.log('Vorgang abgeschlossen.');}
};
6.6.3 Akkordeon-Widget
Das Akkordeon-Widget gehört zu den Content-Widgets. Es handelt sich um ein Layout-
Element, das auf begrenzter und definierbarer Fläche mehrere alternative Inhalte (in
Form so genannter Content-Panes) zeigen kann, von denen gewöhnlich jeweils nur
einer aktiv ist.
Eine Content-Pane besteht aus einem Überschriftenelement (Header Bar) und dem
eigentlichen Inhaltsbereich.
Abbildung 6.16 Ajax-Progressbar mit animiertem Hintergrund und Events
6.6 Layout-Widgets aus jQuery UI
575
6
Der Header Bar dient als Klickfläche, um den Inhalt zu zeigen (und gegebenenfalls
wieder zu verstecken. Je nach Konfiguration schließt sich ein geöffneter Inhalt beim
Öffnen eines anderen Panes automatisch. Die Inhaltsfläche kann mit beliebigem
HTML-Inhalt gefüllt werden.
Die HTML-Struktur folgt einem Muster:
<div id="accordioncontainer"><h3>Header Bar 1</h3><div>Contentbereich 1</div><h3>HeaderBar 2</h3><div>Contentbereich 2</div>...
</div>
Im HTML muss also stets ein äußeres DIV-Element die Rolle des Widget-Containers
übernehmen. In diesem Container folgen Paare aus Überschriften-Containern und
wiederum DIV-Containern aufeinander.
Jedes dieser Paare erzeugt gemeinsam ein Content Pane, das aus Header Bar und
Contentbereich besteht.
Abbildung 6.17 Einfaches Akkordeon ohne weitere Konfiguration
6 jQuery UI
576
Es kommt allein auf die Struktur an
Allein die paarige Struktur ist entscheidend. Es ist nicht erforderlich, dass der Hea-
der-Bar-Container wirklich eine Überschrift ist. Jedes beliebige Blockelement funkti-
oniert, also auch DIV- oder P-Container ebenso wie jede Überschrift von H1 bis H6.
Auch muss der Contentbereich nicht notwendigerweise ein DIV-Container sein –
dies ist allerdings dann erforderlich, wenn der Inhalt eine Struktur (z. B. mehrere
Absätze o. Ä.) erhalten soll. Soll der Inhalt lediglich einen Absatz umfassen, so
genügt ein P-Container für den Contentbereich.
<div id="accordion">...
</div>
Geht man von einem Widget-Container mit id="accordion" aus (siehe oben), der eine
geeignete Innenstruktur besitzt, so genügt folgender Aufruf:
$(document).ready( function() {$("#accordion").accordion();
});
Konfiguration des Akkordeons
Auch das Akkordeon kann über ein Konfigurationsobjekt konfiguriert werden. Fol-
gende Eigenschaften existieren:
Parameter Wert (Default) Erläuterung
active Number (0) Nennt das aktuell offene Panel (Array-
Index; oberstes Panel hat Index 0).
Mit active:false sind alle Panels beim
Laden geschlossen. Gleichzeitig muss
collapsible:true stehen.
animate String oder Object
({})
Effekt beim Panel-Wechsel, z. B.
animate: "bounceslide"
Anmerkung: Option derzeit buggy!
event String (»click«) Nennt das Ereignis (oder die Ereignisse),
das (die) den Panelwechsel steuert
(steuern):
event: "mouseover"
Tabelle 6.6 Konfigurationseigenschaften des Akkordeons
6.6 Layout-Widgets aus jQuery UI
577
6
6.6.4 Tab-Widget
Ebenso wie das Accordion-Widget gehört das Tab-Widget zu den Layout-Widgets.
Auch hier werden Content-Panes gezeigt, zwischen denen gewechselt wird, jedoch
erfolgt die Steuerung über eine Karteireiter-Navigation (»Tabs«).
collapsible boolean (false) Erlaubt mit true das Schließen aller
Panels
header Selector Nennt das Element, das im Markup die
Rolle des Header-Containers spielt.
heightstyle String (»auto«) Die Höhe des Widgets:
»auto«: Höhe des höchsten Panels
»fill«: Höhe des Parent-Containers
»content«: pro Panel individuell
icons Object Nennt das Icon im Header-Bar:
icons: { "header": "ui-icon-plus", "headerSelected": "ui-icon-minus"}
Parameter Wert (Default) Erläuterung
Tabelle 6.6 Konfigurationseigenschaften des Akkordeons (Forts.)
Abbildung 6.18 Tab-Widget mit vier Tabs
6 jQuery UI
578
Zum Erstellen genügt die Anwendung der Methode .tabs() auf dem Widget-Contai-
ner (üblicherweise ein DIV-Container):
$(document).ready( function() {$("#tabs").tabs();
});
Die HTML-Struktur ist etwas komplexer als beim Akkordeon – die Tab-Navigation
besteht aus einer UL-Liste, die sich als erstes Child im Widget-Container befindet:
<div id="tabs"><ul>
<li><a href="#tabs-1">Alice (Teil 1)</a></li><li><a href="#tabs-2">Alice (Teil 2)</a></li>...
</ul>...</div>
Pro Content-Pane muss ein List-Item mit Link vorhanden sein, das einen Fragment-
Identifier besitzt, der auf ein Pane mit entsprechender ID zielt.
<div id="tabs"><ul>
<li><a href="#tabs-1">Alice (Teil 1)</a></li><li><a href="#tabs-2">Alice (Teil 2)</a></li>...
</ul><div id="tabs-1">
...</div><div id="tabs-2">
...</div>
...</div>
Tab mit externen Inhalten per Ajax
Die Content-Panes eines Tab-Widgets können auf einfachste Weise per Ajax befüllt
werden. Im Prinzip genügt es, statt das Fragment-Identifier-Links einen Link auf eine
externe Ressource in die Tab-Navigation zu platzieren:
<div id="tabs"><ul><li><a href="#tabs-1">Alice (Teil 1)</a></li>
6.7 Formular-Widgets aus jQuery UI
579
6
<li><a href="alice01.html">Alice (Teil 2)</a></li><li><a href="alice02.html">Alice (Teil 3)</a></li><li><a href="alice03.html">Alice (Teil 4)</a></li>
</ul><div id="tabs-1"><p>Ich komme nicht per Ajax</p>
</div></div>
Für die per Ajax geladenen Tabs braucht kein korrespondierendes Content-Pane im
Markup eingefügt werden!
6.7 Formular-Widgets aus jQuery UI
Speziell für Formulare hält jQuery UI einige Widgets bereit, die immer dort gelegen
kommen, wo korrespondierende HTML5-Formularelemente nicht verfügbar sind
(ältere Browser) oder aus anderen Gründen nicht erwünscht sind (ungenügend kon-
figurierbar oder nicht ausreichend stylebar). Auch in Zeiten, wo beispielsweise der
Abbildung 6.19 Tab-Inhalte werden per Ajax geladen
6 jQuery UI
580
Datepicker-Input nativ verfügbar ist, haben diese Widgets nach wie vor einige
Berechtigung.
Im folgenden Abschnitt wird das Gewicht auf Datepicker, Slider und den erweiterten
Button sowie die Autocomplete-Funktionalität gelegt. Es stehen jedoch noch weitere
Widgets wie z. B. der Spinner für Zahleneingabe zur Verfügung.
6.7.1 Datepicker
Ein spezielles Formularelement zur Eingabe von Datumswerten verfügbar zu haben,
birgt enorme Vorteile. Zwei davon stehen im Vordergrund:
� Reglementierung des Eingabeformats:
Der Datums-String liegt in einem Format vor, wie es für die Verarbeitung erforder-
lich ist.
� Intuitive Bedienung:
Der User wählt das Datum in einer übersichtlichen Kalendermetapher.
Das Fehlen eines entsprechenden nativen Elements führte in HTML5 zur Einführung
des Input-Typs »date«. Seitdem braucht man (in der Theorie) eigentlich nicht mehr
als dies hier:
<input type="date" name="datum">
Abbildung 6.20 Nativer HTML5-Date-Input in Opera (links) und Chrome (rechts)
6.7 Formular-Widgets aus jQuery UI
581
6
Eigentlich hat man hier mehrere Vorteile:
� Unabhängigkeit von JavaScript
� Native Validierung im Rahmen der HTML5-Formularvalidierung
Den Vorteilen stehen aber auch gravierende Nachteile gegenüber:
� Mangelhafte Unterstützung:
Implementierung bislang nur in aktuellen Opera- und (teilweise) Chrome-Brow-
sern (siehe: http://caniuse.com/#feat=input-datetime)
� Mangelhafte Gestaltungsmöglichkeiten:
Das Widget Interface wird durch den Browser im Rahmen der vom Betriebssystem
vorgegebenen Gestalt erzeugt. Ein Einfluss (Theming) per CSS ist nicht möglich.
Das jQuery-Widget Datepicker
Der jQuery-Weg ist bereits altbekannt – ein HTML-Element (sinnvollerweise ein For-
mular-Input) wird per ID ausgewählt und die UI-Methode datepicker() darauf ange-
wendet:
<input type="text" id="datepicker">
Hier der Code:
$(document).ready( function() {$("#datepicker").datepicker();
});
Abbildung 6.21 jQuery UI-Datepicker in Opera (links) und Chrome (rechts)
6 jQuery UI
582
Lokalisierung des Datepickers
Die Oberfläche des Widgets ist per Default in Englisch gehalten. Eine andere Lokali-
sierung erfordert das Einbinden einer passenden Lokalisierungsdatei – Sie finden alle
derartigen Dateien im Ordner development-bundle/ui/ Ihres UI-Pakets im dortigen
Unterordner i18n/.
Kopieren Sie von dort das File jquery.ui.datepicker-de.js (deutsche Lokalisierung) und
legen Sie es in Ihr js-Verzeichnis, am besten in ein neues Unterverzeichnis i18n/.
Binden Sie die Datei wie folgt ein:
<script type="text/javascript"src="../js/jquery.js"></script>
<script type="text/javascript"src="../js/jquery-ui.js"></script>
<script type="text/javascript"src="../js/i18n/jquery.ui.datepicker-de.js"></script>
Achtung: Die Lokalisierung ist nicht automatisch im UI-Script inkludiert!
Legen Sie noch eine weitere Datei, jquery.ui.datepicker-fr.js, in das lokale i18n-Ver-
zeichnis. Nun können Sie die Lokalisierung zwischen deutscher und französischer
Ausgabe umstellen.
Abbildung 6.22 Datepicker, deutsch lokalisiert
6.7 Formular-Widgets aus jQuery UI
583
6
Der Datepicker besitzt ein Objekt-Attribut $.datepicker.regional, das die geladenen
Lokalisierungen enthält. Die Default-Lokalisierung befindet sich in einem Property
mit dem Key "" (leerer String).
Solange nur eine zusätzliche Lokalisierung geladen ist, befindet sich nur ein weiteres
Property im Objekt (derzeit "de" für Deutsch). Laden Sie nun die französische Lokali-
sierung dazu:
...<script type="text/javascript"
src="../js/i18n/jquery.ui.datepicker-de.js"></script><script type="text/javascript"
src="../js/i18n/jquery.ui.datepicker-fr.js"></script>...
Sie sehen, dass der Datepicker nun eine französische Oberfläche besitzt – binden Sie
einzelne Lokalisierungen ein, so gilt stets die letzte.
Um die deutsche Lokalisierung (wieder) zu erhalten, ohne die Reihenfolge der Script-
einbindung zu verändern, können Sie die Lokalisierung als Argument bei der Gene-
rierung des Widgets übergeben:
$("#datepicker").datepicker($.datepicker.regional["de"]
);
Achtung: Hier wird kein Konfigurationsobjekt übergeben! Die Konfiguration gilt
obendrein nur für das aktuelle Widget.
Wollen Sie alle Datepicker des Dokuments gleichmäßig lokalisieren, so geschieht
dies über die Option $.datepicker.setDefaults():
$.datepicker.setDefaults($.datepicker.regional["de"]);
Dies setzt alle Datepicker-Widgets auf die deutsche Lokalisierung. Möchten Sie auf
die Default-Lokalisierung zurück, so übergeben Sie statt "de" den leeren String "":
$.datepicker.setDefaults($.datepicker.regional[""]);
Noch mehr Lokalisierungen
Um allumfassende Lokalisierungsmöglichkeiten verfügbar zu haben, binden Sie die
Datei jquery-ui-i18n.js ein. Diese Datei ist allerdings im Verhältnis (69kB) recht groß.
...<script type="text/javascript"
src="../js/jquery-ui.js"></script>
6 jQuery UI
584
<script type="text/javascript"src="../js/i18n/jquery-ui-i18n.js"></script>
...
Nun können Sie die Lokalisierung (wie auch immer) anpassen – hier geschieht dies
über folgende Select-Option:
<select id="locale"><option value="da">Danish (Dansk)</option><option value="en-GB">English/UK</option><option value="fi">Finnish (suomi)</option><option value="de">German (Deutsch)</option><option value="fr" >French (Français)</option><option value="no">Norwegian (Norsk)</option>
</select>
Die aktuelle Lokalisierung des Datepicker-Widgets geschieht über folgende Funktion
(setzt den Parameter über die Setter-Funktion der Optionen):
$("#locale").change(function() {$("#datepicker" ).datepicker(
"option", $.datepicker.regional[$(this).val()]);
});
Abbildung 6.23 Datepicker nach Umschaltung auf finnische Lokalisierung
6.7 Formular-Widgets aus jQuery UI
585
6
Konfiguration des Datepickers
Optionen für einen Datepicker können (derzeit) nicht sinnvoll im Rahmen eines
Konfigurationsobjekts während der Widget-Erstellung gesetzt werden.
Setzen Sie sie stattdessen nachträglich über den Option-Setter:
// Widget erstellen:var dp = $("#datepicker").datepicker();// Widget konfigurieren:dp.datepicker("option", "showAnim", "slideDown");
Dies ändert die Einblendeanimation eines Datepickers auf SlideDown.
Auf folgendem Weg erreichen Sie, dass für Monat und Jahr je ein Dropdownmenü im
Widget erscheint:
var dp = $("#datepicker").datepicker();dp.datepicker("option", {
changeMonth: true,changeYear:true
});
Sie können dem Option-Setter auch ein Objekt übergeben!
Das Ausgabeformat des Datums steuern Sie über die dateFormat-Option:
var dp = $("#datepicker").datepicker();dp.datepicker( "option", "dateFormat", "yy-mm-dd" );
Abbildung 6.24 Datepicker mit changeYear- und changeMonth-Option
6 jQuery UI
586
API des Datepickers
Eine Übersicht über die API des Datepickers erhalten Sie hier:
http://api.jqueryui.com/datepicker
6.7.2 Slider
Das Slider-Widget stellt eine intuitiv nutzbare Eingabemöglichkeit für numerische
Werte dar, die vom Nutzer einfach durch Ziehen eines Schiebereglers vorgenommen
werden kann.
Das Basis-Element eines Sliders ist gewöhnlich ein Div-Container, auf den die UI-
Methode slider() angewendet wird:
<div id="slider"></div>
Dieses wird einfach zum Slider gemacht:
$(document).ready( function() {$("#slider").slider();
});
Ein Slider ist kein Range-Input!
Ein Enhancement eines Inputs, um den HTML5-Input »range« zu simulieren, ist
nicht möglich. Basis-Element muss ein Container sein!
Am Slider treten bei Betätigung Ereignisse auf, an die per Konfiguration Handler-
Funktionen attacht werden können. Hier ein Beispiel für das Change-Ereignis, das bei
Verschieben des Reglers auftritt. Es wird der Inhalt eines Span-Containers mit dem
aktuellen Wert nach Betätigen gefüllt:
<div id="slider"></div><div>Slider steht auf: <span id="output">0</span></div>
Hier der Code:
var out = $('#output');$("#slider").slider({
change:function(evt, ui){console.log(ui.value);out.html(ui.value);
}});
6.7 Formular-Widgets aus jQuery UI
587
6
Der Callback erhält als erstes Argument evt ein Event-Objekt, als zweites Argument
ui den Slider, dessen value direkt auslesbar ist.
Möchten Sie eine kontinuierliche Ausgabe bereits während der Bewegung (Change
feuert erst nach Abschluss der Bewegung), so verwenden Sie das Event slide:
var out = $('#output');$("#slider").slider({
slide:function(evt, ui){out.html(ui.value);
}});
Über den step-Parameter kann eine Rasterung des Regelbereichs (von 0 bis 100)
erreicht werden:
var out = $('#output');$("#slider").slider({
step : 10,slide:function(evt, ui){
out.html(ui.value);}
});
Mit Hilfe der Optionen min und max lässt sich der Regelbereich beliebig definieren:
var out = $('#output');$("#slider").slider({
min : 10,
Abbildung 6.25 Slider mit Wertausgabe
6 jQuery UI
588
max : 20,step : 2,slide:function(evt, ui){
out.html(ui.value);}
});
Mit der range-Option lässt sich ein Slider mit zwei Reglern definieren. Der value
nimmt dann die Form eines Arrays an:
var out = $('#output');$("#slider").slider({
range: true,min: 0,max: 250,values: [ 50, 150 ], // Startwerte
slide:function(ev, ui){out.html(ui.values[0] +
'€ bis ' +ui.values[1] +'€.');
}});
Abbildung 6.26 Slider mit min, max (zwischen 10 und 20), sowie step
6.7 Formular-Widgets aus jQuery UI
589
6
API des UI-Sliders
Die komplette API des UI-Sliders finden Sie hier:
http://jqueryui.com/slider
6.7.3 Button
Das Buttonwidget von jQuery UI erzeugt klickbare Button-Elemente auf der Grund-
lage unterschiedlicher HTML-Markups, die über das jeweilige UI-Theme gestaltet
sind. Mit dem Widget können Einzel-Buttons, aber auch Buttonarrays (analog zu
Checkboxen oder Radiobuttons) realisiert werden, die auf Wunsch auch mit einem
Icon versehen werden können.
Das unterliegende Markup kann sein:
� ein Button-Element <button>
� ein Input des Typs »button«, »submit« oder »refresh«
� ein beliebiger Link in Form eines <a>-Elements
Auf das entsprechend ausgewählte Element ist lediglich die UI-Methode button()
anzuwenden.
Abbildung 6.27 Ein Slider als Range-Regler mit zwei Eckwerten
6 jQuery UI
590
Einfacher Button
Einen einfachen Button erreichen Sie, indem Sie die UI-Methode auf ein passendes
HTML-Element anwenden – hier ist es ein Buttoncontainer:
<button id="meinButton">Ein einfacher Button</button>
Hier der Code dazu:
$(document).ready( function() {$("#meinButton")
.button()
.click(function( event ) {console.log("Button geklickt.");
});});
Sie können ein Icon über das Konfigurationsobjekt hinzufügen – die Option icons
erhält ein Objekt, das die Properties primary und secondary für bis zu zwei Icons
enthält:
$("#meinButton").button( {
icons: {primary: "ui-icon-folder-open"
}});
Abbildung 6.28 Ein Buttonwidget mit Icon
6.7 Formular-Widgets aus jQuery UI
591
6
Eine Übersicht über die verfügbaren Icons und ihre Namen erhalten Sie im Theme-
Roller (Ansicht gekürzt, siehe Abbildung 6.29).
Togglebutton
Ein Togglebutton ist ein Button, der seinen Zustand nach Klick wechselt. Grundlage
für ihn ist ein Checkbox-Input. Die Button-Beschriftung wird dem korrespondieren-
den Label-Container entnommen:
<label for="cb">Toggle-Button</label><input type="checkbox" id="cb">
Folgender Scriptcode ist erforderlich:
$("#cb").button( { icons: {
primary: "ui-icon-folder-collapsed"}
});
Abbildung 6.29 Icons für jQuery UI
6 jQuery UI
592
Buttonarrays mit buttonset()
Mehrere Checkboxen oder Radiobuttons können gemeinsam als Array eingesetzt
werden. Hierfür ist die Methode buttonset() auf die Container-Box der Inputs anzu-
wenden:
<div id="array"><label for="cb1">Rosen</label><input type="checkbox" id="cb1"><label for="cb2">Tulpen</label><input type="checkbox" id="cb2"><label for="cb3">Nelken</label><input type="checkbox" id="cb3">
</div>
Es genügt die einfache Anweisung:
$("#array").buttonset();
Analog können Radiobuttons eingesetzt werden. In diesem Fall kann nur eine
Option selektiert werden.
Abbildung 6.30 Togglebutton (im Toggle-Zustand)
Abbildung 6.31 Buttonarray aus Checkboxen (zweiter Button selektiert)
6.7 Formular-Widgets aus jQuery UI
593
6
API des UI-Buttons
Die komplette API des UI-Buttons finden Sie hier:
http://jqueryui.com/button
6.7.4 Autocomplete
Das Autocomplete-Widget dient als Vorschlagsliste für Text-Inputs, aus der der User
einen Vorschlag durch Klick auswählen kann.
Als zu Grunde liegendes HTML-Element dient ein Text-Input, das von einem Div-
Container mit der Klasse ui-widget umgeben sein muss (ohne dies funktioniert es
nicht):
<div class="ui-widget"><label for="prog">Ihre Lieblingssprache: </label><input type="text" id="prog">
</div>
Hier ist die Datenquelle ein Array:
var sprachen = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL","ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript","Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];$( "#prog" ).autocomplete({source: sprachen});
API des Autocomplete-Widgets
Die komplette API des Autocomplete-Widgets finden Sie hier:
http://api.jqueryui.com/autocomplete
Abbildung 6.32 Autocomplete – alle Items mit »B« werden gezeigt
Inhalt
5
Inhalt
Vorwort .................................................................................................................................................. 17
1 jQuery kennenlernen 21
1.1 Was jQuery alles kann ...................................................................................................... 21
1.2 Ein Framework? Eine Community! .............................................................................. 23
1.3 Nicht ohne mein JavaScript ............................................................................................ 24
1.3.1 Gründe für das Entstehen von Frameworks ............................................... 25
1.3.2 Nochmals – was ist ein Framework? ............................................................. 25
1.3.3 Aufgaben eines Frameworks ............................................................................ 26
1.3.4 Aktuelle Frameworks für JavaScript .............................................................. 27
1.3.5 Frameworks – ein Rückblick ............................................................................. 28
1.4 jQuery – viel mit wenig erreichen ............................................................................... 29
2 Den Arbeitsplatz einrichten 31
2.1 Rechner und Betriebssystem ......................................................................................... 31
2.1.1 Windows ................................................................................................................. 32
2.1.2 Mac OS X ................................................................................................................. 32
2.1.3 Linux ......................................................................................................................... 32
2.2 Browser .................................................................................................................................... 33
2.2.1 Internet Explorer .................................................................................................. 33
2.2.2 Google Chrome ..................................................................................................... 33
2.2.3 Firefox ...................................................................................................................... 33
2.2.4 Safari ........................................................................................................................ 34
2.2.5 Opera ........................................................................................................................ 35
2.3 Webserver .............................................................................................................................. 35
2.4 IDEs und Editoren ................................................................................................................ 36
Inhalt
6
3 jQuery – der Einstieg 41
3.1 Vergleich: JavaScript mit und ohne jQuery ............................................................. 41
3.2 jQuery einbinden ................................................................................................................. 43
3.2.1 jQuery 1.x oder 2.x – was denn nun? ............................................................. 44
3.2.2 jQuery online und offline nutzen ................................................................... 45
3.2.3 jQuery lokal einbinden ....................................................................................... 45
3.2.4 jQuery aus dem Google Online Repository einbinden ............................ 47
3.2.5 Das Beste aus beiden Welten .......................................................................... 48
3.3 Das erste richtige Beispiel mit jQuery ........................................................................ 48
3.4 Wir haben fertig .................................................................................................................. 52
3.5 Das Mausereignis – Bindung eines Click-Events ................................................... 54
3.5.1 Zunächst – die »aufdringliche« Variante ..................................................... 54
3.5.2 Etwas weniger aufdringlich, bitte! ................................................................. 55
3.5.3 Ein unaufdringlicher Dreizeiler, dank jQuery ............................................. 56
3.6 Give me more! – Verkettung von jQuery-Methoden .......................................... 60
3.6.1 Den Elternknoten eines Elements manipulieren ...................................... 61
3.7 Zusammenfassung ............................................................................................................. 66
4 jQuery – die Übersicht 67
4.1 Im Zentrum – das jQuery-Objekt ................................................................................. 67
4.1.1 Drei Arten von jQuery-Methoden ................................................................... 68
4.2 Die Funktion $() und ihre Signatur .............................................................................. 69
4.2.1 Leerer Aufruf ohne Argument ......................................................................... 69
4.2.2 DOM-Elemente, jQuery-Objekt oder Plain Object als Argument ......... 69
4.2.3 HTML-String als Argument ............................................................................... 73
4.2.4 Callback-Funktion als Argument .................................................................... 76
4.2.5 CSS-Selektor als Argument ............................................................................... 77
4.3 CSS-Selektoren für die primäre Collection .............................................................. 80
4.3.1 Die Basisselektoren ............................................................................................. 81
4.3.2 Mehrfachklassenselektor .................................................................................. 82
4.3.3 Gruppen- und Kontextselektoren .................................................................. 82
4.3.4 Attributselektoren ............................................................................................... 85
4.3.5 Basis-Filterausdrücke für Selektoren ............................................................. 89
4.3.6 Inhaltsfilter ............................................................................................................. 94
4.3.7 Filter für Formularelemente ............................................................................. 97
Inhalt
7
4.3.8 Sichtbarkeitsfilter ................................................................................................ 98
4.3.9 Child-Filter – nach Position ............................................................................... 100
4.3.10 Child-Filter – nach Typ und Position .............................................................. 104
4.4 Accessoren – Eigenschaften der Collection ............................................................. 106
4.4.1 Methode .each(callback) .................................................................................... 107
4.4.2 Methode .get() und .get(index) ....................................................................... 109
4.4.3 Methode .index(subject) ................................................................................... 110
4.4.4 Methode .size() ..................................................................................................... 110
4.4.5 Eigenschaft .length .............................................................................................. 110
4.4.6 Eigenschaften .selector und .context ............................................................ 111
4.4.7 Methode .toArray() .............................................................................................. 112
4.4.8 Methode .is() .......................................................................................................... 112
4.5 Traversieren – ausgehend von Collections .............................................................. 113
4.5.1 Was ist und wann benötigt man eine »Traverse«? .................................. 113
4.5.2 jQuery-Methoden zur Achsen-Traverse ....................................................... 114
4.5.3 jQuery-Methoden zur erweiterten Achsen-Traverse ............................... 119
4.5.4 Filtern von Collections ........................................................................................ 127
4.5.5 Aufheben einer Filterung .................................................................................. 133
4.5.6 Kopieren einer Collection .................................................................................. 134
4.6 Events und Event-Handling ............................................................................................ 137
4.6.1 Das Event-Objekt in JavaScript ........................................................................ 137
4.6.2 Das jQuery-Event-Objekt ................................................................................... 139
4.6.3 Die jQuery-Methoden zu Event-Bindung ..................................................... 147
4.6.4 Direktes Binden und Lösen von Event-Listenern ....................................... 148
4.6.5 Convenience-Methoden für direkte Event-Bindung ................................ 156
4.6.6 Shortcut-Methoden für direkte Event-Bindungen ................................... 158
4.6.7 Delegierendes Binden und Lösen von Event-Listenern ........................... 167
4.6.8 Triggern und Erzeugen von Events ................................................................ 173
4.7 Inhalte, Attribute, Datenspeicher ................................................................................ 179
4.7.1 Lesen, Ändern und Entfernen von Attributen und
DOM-Eigenschaften ............................................................................................ 181
4.7.2 Manipulation von Text- und Elementinhalt ............................................... 186
4.7.3 Beliebige Daten an DOM-Elementen speichern ........................................ 191
4.8 Formulare verarbeiten mit jQuery .............................................................................. 194
4.8.1 Filterausdrücke für Formularelemente ........................................................ 194
4.8.2 Filter für Zustände von Formularinputs ....................................................... 198
4.8.3 Binden von Events an Formularelemente ................................................... 202
4.8.4 Serialisierung von Formulardaten .................................................................. 204
4.8.5 Extraktion von Formularfeldwerten .............................................................. 207
Inhalt
8
4.9 DOM-Manipulation ............................................................................................................ 211
4.9.1 Methoden zum Einfügen von Knoten .......................................................... 213
4.9.2 Entfernen von Knoten ........................................................................................ 218
4.9.3 Ersetzen von Knoten .......................................................................................... 221
4.9.4 Wrapping-Methoden ......................................................................................... 223
4.10 CSS und Style-Eigenschaften ......................................................................................... 229
4.10.1 Methoden für das class-Attribut .................................................................... 230
4.10.2 CSS-Eigenschaften manipulieren .................................................................. 238
4.10.3 Abmessungen von Containern ....................................................................... 240
4.10.4 Position von Containern ................................................................................... 242
4.10.5 Scrollen und Scrollposition .............................................................................. 246
4.11 Animationen ......................................................................................................................... 249
4.11.1 Animationen ohne jQuery – CSS3-Transitions und
CSS3-Animations ................................................................................................. 249
4.11.2 jQuery und CSS-Animationen ......................................................................... 255
4.11.3 jQuery-Animationen – Zeigen und Verstecken ......................................... 259
4.11.4 Slides – Zeigen und Verstecken mit Animation ........................................ 263
4.11.5 Fades – Zeigen und Verstecken über Opacity ............................................ 268
4.11.6 Utility-Methoden für Animationen ............................................................... 270
4.11.7 Animation mehrerer CSS-Parameter ............................................................ 274
4.11.8 Die Queue – Warteschlange für Effekte ...................................................... 283
4.11.9 Vollständiges Beispiel zu .queue() ................................................................. 287
4.11.10 Utilities für Queue und Animationen ........................................................... 290
4.12 Deferreds und Promises ................................................................................................... 291
4.12.1 Erzeugen eines Deferred-Objekts .................................................................. 292
4.12.2 Erzeugen eines Promise-Objekts .................................................................... 293
4.12.3 Test des Zustands des Deferred-Objekts ..................................................... 299
4.12.4 Das Deferred auflösen oder zurückweisen: Resolve, Reject, Notify ... 300
4.12.5 Bindung von Callbacks an Deferreds und Promises ................................ 306
4.12.6 Methode deferred.always() .............................................................................. 307
4.12.7 Methode deferred.done() ................................................................................. 308
4.12.8 Methode deferred.fail() ..................................................................................... 308
4.12.9 Methode deferred.progress() .......................................................................... 309
4.12.10 Callback-Bindung mit neuem Promise als Rückgabewert .................... 310
4.12.11 Methode deferred.then() .................................................................................. 311
4.12.12 Methode deferred.pipe() ................................................................................... 316
4.12.13 Deferreds im Einsatz mit Animationen ....................................................... 316
4.12.14 $.when() – Zusammenfassen mehrerer Promises ................................... 322
Inhalt
9
4.13 Managen von Callback-Ketten mit $.Callbacks() .................................................. 328
4.13.1 Callback-Liste erstellen mit $.Callbacks() .................................................... 328
4.13.2 Callback-Liste erweitern – callbacks.add() .................................................. 329
4.13.3 Callback-Liste reduzieren – callbacks.remove() ........................................ 330
4.13.4 Callback-Liste überprüfen – callbacks.has() ............................................... 330
4.13.5 Callbacks feuern – callbacks.fire() und callbacks.fireWith() ................. 331
4.13.6 Callback-Liste leeren – callbacks.empty() ................................................... 333
4.13.7 Callback-Liste stilllegen – callbacks.disable() ............................................ 333
4.13.8 Die Flags der Callback-Liste .............................................................................. 333
4.13.9 Callback-Liste verriegeln – callbacks.lock() ................................................. 336
4.13.10 Ein Click-Counter mit Callback-Liste ............................................................. 338
4.14 Ajax & JSON ........................................................................................................................... 341
4.14.1 Grundlagen zu Ajax ............................................................................................ 342
4.14.2 Daten und Datentypen für Ajax ..................................................................... 346
4.14.3 jQuery und Ajax ................................................................................................... 348
4.14.4 Low-level Ajax-Ultilities .................................................................................... 348
4.14.5 Das jqXHR-Objekt als Promise ........................................................................ 361
4.14.6 Ajax-Utilities und Convenience-Requests .................................................. 365
4.14.7 Globale Handler-Methoden ............................................................................. 377
4.15 Utilities des $-Objekts – praktisches Dies und Das .............................................. 380
4.15.1 Konfliktvermeidung mit anderen Frameworks ......................................... 381
4.15.2 Browser- und Feature-Detection ................................................................... 387
4.15.3 Utilities zur Array-Verarbeitung ..................................................................... 389
4.15.4 Utility zur Stringbearbeitung .......................................................................... 394
4.15.5 Utilities für DOM-Knotenverarbeitung ........................................................ 395
4.15.6 Utilities für Funktionsaufrufe ......................................................................... 398
4.15.7 Objektverarbeitung und Erweiterung von jQuery ................................... 400
4.15.8 Test-Utilities .......................................................................................................... 405
4.16 Zusammenfassung und Ausblick ................................................................................. 408
5 jQuery – der Praxiseinsatz 409
5.1 Wie organisiere ich meine Scripte ............................................................................... 410
5.1.1 Die klassische Notation ..................................................................................... 411
5.1.2 Verwendung von Objekt-Literalen ................................................................ 412
5.1.3 Das Modul-Muster .............................................................................................. 414
5.1.4 Sinn und Unsinn dieses Beispiels ................................................................... 416
5.1.5 Zusammenfassung ............................................................................................. 418
Inhalt
10
5.2 Schönere Navigationen .................................................................................................... 418
5.2.1 Die FlyOut-Navigation ........................................................................................ 419
5.2.2 Flyout mit CSS-Transitions ................................................................................ 430
5.2.3 Flyout-Menü mit dem Plugin-Transit ............................................................ 434
5.2.4 Die Tabs: Karteireiter .......................................................................................... 436
5.2.5 Das Akkordeon ...................................................................................................... 441
5.2.6 Das Tree-Menu ...................................................................................................... 445
5.2.7 Zusammenfassung .............................................................................................. 451
5.3 Von Tooltips und Links ...................................................................................................... 451
5.3.1 Tooltips .................................................................................................................... 451
5.3.2 Links sammeln, im Footer ausgeben ............................................................. 454
5.4 Spiel mit Bildern .................................................................................................................. 456
5.4.1 Galerie I: Einfache Slideshow ........................................................................... 459
5.4.2 Galerie II: Imagebox ............................................................................................ 468
5.4.3 Die Original Lightbox .......................................................................................... 478
5.5 Ajax mit jQuery einsetzen ............................................................................................... 480
5.5.1 Laden von HTML-Elementen ............................................................................ 481
5.5.2 Laden von JSON .................................................................................................... 489
5.5.3 Laden von JSONP .................................................................................................. 495
5.5.4 Zusammenfassung .............................................................................................. 497
5.6 Formulare beherrschen mit jQuery ............................................................................. 497
5.6.1 Formulare validieren ........................................................................................... 498
5.6.2 Formulare senden mit Ajax .............................................................................. 504
5.6.3 Datepicker .............................................................................................................. 507
5.6.4 Nächste Ausbaustufe: Autocomplete ........................................................... 509
5.7 Flexible Tabellen mit jQuery .......................................................................................... 513
5.7.1 Die Zebra-Tabelle ................................................................................................. 513
5.7.2 Die Tabelle sortieren ........................................................................................... 517
5.7.3 Paginierung von Tabellen .................................................................................. 524
5.7.4 Grid-Plugins ........................................................................................................... 529
5.7.5 Zusammenfassung .............................................................................................. 534
5.8 Von Browsern und Fenstern ........................................................................................... 535
5.8.1 Cookies .................................................................................................................... 535
5.8.2 Die History des Browsers ................................................................................... 541
5.8.3 Scrolling ................................................................................................................... 545
5.8.4 Für faule Browser: Lazy-Load ........................................................................... 548
5.8.5 Zusammenfassung .............................................................................................. 550
Inhalt
11
6 jQuery UI 551
6.1 Download und Konfiguration von jQuery UI .......................................................... 552
6.1.1 Der Download Builder von jQuery UI ............................................................ 553
6.2 Theming von jQuery UI ..................................................................................................... 554
6.2.1 Scoped Themes ..................................................................................................... 556
6.3 Einsatz von jQuery UI ........................................................................................................ 558
6.3.1 Dateistruktur von jQuery UI ............................................................................. 558
6.4 Einbinden von jQuery UI .................................................................................................. 559
6.5 CSS-Klassen eines UI-Widgets ....................................................................................... 560
6.6 Layout-Widgets aus jQuery UI ...................................................................................... 563
6.6.1 Dialog-Widget ....................................................................................................... 563
6.6.2 Progressbar ............................................................................................................ 570
6.6.3 Akkordeon-Widget .............................................................................................. 574
6.6.4 Tab-Widget ............................................................................................................ 577
6.7 Formular-Widgets aus jQuery UI .................................................................................. 579
6.7.1 Datepicker .............................................................................................................. 580
6.7.2 Slider ......................................................................................................................... 586
6.7.3 Button ...................................................................................................................... 589
6.7.4 Autocomplete ........................................................................................................ 593
6.8 Effekte und Interaktionen aus jQuery UI ................................................................. 594
6.8.1 Die Effekte aus jQuery UI ................................................................................... 596
6.8.2 Interaktionen aus jQuery UI ............................................................................. 603
6.8.3 Drag & Drop mit Draggables und Droppables ........................................... 610
6.8.4 Sortierbare Elemente – Sortables ................................................................... 623
6.8.5 Größenveränderbare Elemente – Resizables .............................................. 635
6.8.6 Auswählbare Elemente – Selectables ........................................................... 643
6.9 Zusammenfassung und Ausblick ................................................................................. 648
7 Plugin-Entwicklung für jQuery 649
7.1 Das Plugin-Repository von jQuery ............................................................................... 650
7.1.1 Suche im Repository ............................................................................................ 651
7.1.2 Ein Plugin downloaden ...................................................................................... 652
7.1.3 Ein Plugin anwenden .......................................................................................... 654
Inhalt
12
7.2 Selbst ist der Mann – eigene Plugins schreiben .................................................... 658
7.2.1 Plugin-Gattungen: Functions und Methods ............................................... 659
7.3 jQuery-Function-Plugin .................................................................................................... 659
7.3.1 Function-Plugin – der Aufbau .......................................................................... 660
7.3.2 Beispiel für ein Function-Plugin – ein einfacher Logger ......................... 660
7.3.3 Beispiel für ein Function-Plugin – Ein CSS-Tool ......................................... 662
7.4 jQuery-Method-Plugin ...................................................................................................... 663
7.4.1 Method-Plugin – der Aufbau ........................................................................... 664
7.5 Method-Plugin – Setzen von CSS-Styles ................................................................... 665
7.5.1 Method-Plugin mit Argument ......................................................................... 665
7.5.2 Method-Plugin mit mehreren Argumenten ............................................... 666
7.5.3 Method-Plugin mit Konfigurationsobjekt ................................................... 667
7.5.4 toggleClick – Ein Ersatz für die Event-Methode .toggle() ....................... 671
7.5.5 multiToggle – Noch ein Ersatz für die Event-Methode .toggle() .......... 673
7.5.6 Method-Plugin mit Subroutinen .................................................................... 677
7.6 Das jQuery-Method-Plugin rekapituliert ................................................................. 683
7.7 Zusammenfassung und Ausblick ................................................................................. 684
8 Responsive Webdesign 685
8.1 Wann macht ein Responsive Layout Sinn? .............................................................. 686
8.2 Methodik: Mobile first vs. Desktop first ................................................................... 686
8.3 Media-Queries ...................................................................................................................... 687
8.3.1 Media-Angabe für verlinkte Stylesheets ...................................................... 688
8.3.2 Media-Angabe für Stylesheet-Import ........................................................... 688
8.3.3 Media-Angabe innerhalb eines Stylesheets ............................................... 688
8.4 Syntax der CSS-Media-Angabe ..................................................................................... 689
8.4.1 Typangabe des User Agents ............................................................................. 689
8.4.2 Query-Aspekt der Media-Query ...................................................................... 691
8.4.3 Keywords für Media-Queries ........................................................................... 691
8.5 Media-Features des User Agents ................................................................................. 693
8.5.1 Media-Features: width, height ........................................................................ 694
8.5.2 Media-Features: device-width, device-height ............................................ 694
8.5.3 Media-Feature: orientation .............................................................................. 695
8.5.4 Media-Features: aspect-ratio, device-aspect-ratio ................................... 695
8.5.5 Media-Feature: color ........................................................................................... 695
Inhalt
13
8.5.6 Media-Feature: color-index .............................................................................. 696
8.5.7 Media-Feature: monochrome .......................................................................... 696
8.5.8 Media-Feature: resolution ................................................................................ 697
8.6 Einsatz der Media-Query im Responsive Layout ................................................... 697
8.6.1 Anpassung des Layouts anhand der Viewport-Breite ............................. 698
8.7 Responsive Design und jQuery ..................................................................................... 700
8.7.1 Reihenfolge von Containern ändern ............................................................. 700
8.7.2 Bilder in verschiedenen Auflösungen ........................................................... 702
8.7.3 Slider mit Touch .................................................................................................... 703
8.7.4 Maurerhandwerk mit JavaScript und jQuery ............................................. 706
8.8 Zusammenfassung und Ausblick ................................................................................. 708
9 Going mobile mit jQuery 709
9.1 Ein Seitenblick auf die mobile Welt ............................................................................ 709
9.2 Emulatoren und IDEs für Mobilgeräte ....................................................................... 711
9.2.1 Emulatoren und IDEs für iPhone ..................................................................... 711
9.2.2 Dreamweaver CC für jQuery Mobile .............................................................. 714
9.3 Ins mobile Web mit jQuery Mobile ............................................................................. 716
9.3.1 Download oder Einbinden von der Website ............................................... 718
9.3.2 Der jQuery Mobile Download Builder ........................................................... 719
9.4 Ein erstes Dokument mit jQuery Mobile .................................................................. 720
9.4.1 jQuery Mobile-Dateien im Header einbinden ............................................ 720
9.4.2 Grundstrukturen im Body ................................................................................. 721
9.4.3 Mehrere Seiten in einem Dokument ............................................................. 722
9.4.4 Eine einfache Navigation .................................................................................. 723
9.4.5 Navigationen in der Toolbar ............................................................................. 725
9.5 Seitenübergänge ................................................................................................................. 727
9.6 Listenbuttons ........................................................................................................................ 729
9.6.1 Listviews mit Count-Bubbles ........................................................................... 730
9.6.2 Listenbuttons in Splitviews .............................................................................. 731
9.6.3 Listview mit Splitansicht – verbesserte Version ........................................ 733
9.6.4 Seiten per Ajax ansprechen .............................................................................. 735
9.7 Navbar-Button-Leisten ..................................................................................................... 736
9.7.1 Navbar im Header ................................................................................................ 736
9.7.2 Navbar im Content-Bereich .............................................................................. 737
Inhalt
14
9.7.3 Navbar im Footer-Bereich ................................................................................. 738
9.7.4 Button-Leisten und Data-Grid ......................................................................... 738
9.7.5 Button-Leisten mit Icons ................................................................................... 741
9.8 Layoutraster – Inhalte anordnen ................................................................................. 744
9.9 Collapsibles – Platzsparende Inhalte ......................................................................... 746
9.9.1 Collapsibles ............................................................................................................ 746
9.9.2 Collapsible-Sets .................................................................................................... 747
9.10 Formulare mit jQuery Mobile ........................................................................................ 749
9.10.1 Progressiv erweiterte Formularelemente .................................................... 750
9.10.2 Native Formularelemente ................................................................................. 751
9.10.3 Formularelemente im Einzelnen .................................................................... 751
9.10.4 Formulare versenden .......................................................................................... 756
9.10.5 Plugin-Methoden ................................................................................................. 756
9.10.6 Zurücksetzen (Degradieren) von Formularelementen ............................ 759
9.11 Themes und Swatches – Farben und Hintergründe ............................................ 759
9.11.1 Eigene Themes – »Roll your own« mit dem ThemeRoller ...................... 765
9.12 Das mobileinit-Event ......................................................................................................... 771
9.12.1 Enhancement des jQuery Mobile-Dokuments ........................................... 772
9.12.2 Die Optionen des $.mobile-Konfigurationsobjekts .................................. 775
9.12.3 HTML5-data-Attribute in jQuery Mobile ...................................................... 779
9.13 Events in jQuery Mobile ................................................................................................... 792
9.14 Methoden von jQuery Mobile ....................................................................................... 798
9.15 Zusammenfassung ............................................................................................................. 806
10 Der eigene jQuery-Build 807
10.1 Voraussetzungen zum Erstellen eines Builds ......................................................... 808
10.1.1 Installation von Git .............................................................................................. 809
10.1.2 Installation von NodeJS ..................................................................................... 811
10.1.3 Installation von Grunt und Bower .................................................................. 812
10.2 Das Git-Repository klonen .............................................................................................. 813
10.3 Einen Build des vollständigen jQuerys erzeugen .................................................. 814
10.4 Einen individuellen jQuery-Build aufbauen ............................................................ 816
Inhalt
15
11 QUnit – Testen mit jQuery 821
11.1 Ideen zum Testen von JavaScript ................................................................................. 821
11.1.1 Das alert-Statement ............................................................................................ 821
11.1.2 Die Konsole als Ausgabemedium ................................................................... 822
11.1.3 Eine Funktion durchleuchten ........................................................................... 822
11.2 Testen mit Unit-Tests ........................................................................................................ 825
11.2.1 Enter QUnit ............................................................................................................ 826
11.3 Ein Blick auf QUnit .............................................................................................................. 826
11.3.1 Download und Einbinden von QUnit ............................................................ 827
11.4 Ein Test mit QUnit – die Methode test() ................................................................... 831
11.5 Assertions ............................................................................................................................... 832
11.5.1 ok() ............................................................................................................................ 832
11.5.2 equal() und notEqual() ....................................................................................... 835
11.5.3 deepEqual() und notDeepEqual() ................................................................... 837
11.5.4 strictEqual() und notStrictEqual() ................................................................... 838
11.6 Module – mehrere Tests unter einer Haube ........................................................... 840
11.7 Testen asynchroner Anwendungen ............................................................................ 842
11.7.1 Das Kontextproblem bei asynchronen Tests .............................................. 842
11.7.2 Explizites Stoppen und Starten des Tests .................................................... 843
11.7.3 Testlauf in Wartestellung – asyncTest() ....................................................... 844
11.8 Zusammenfassung und Ausblick ................................................................................. 846
Anhang 847
A HTML und CSS ....................................................................................................................... 847
A.1 Trennungen – Struktur, Präsentation, Verhalten ..................................... 847
A.2 HTML – Beschreibung der Struktur ................................................................ 849
A.3 Aufbau von HTML-Dokumenten ..................................................................... 852
A.4 CSS – Beschreibung der Präsentation ........................................................... 864
B JavaScript und DOM ........................................................................................................... 887
B.1 JavaScript – Beschreibung des Verhaltens .................................................. 887
B.2 Die Synthese – das Document Object Model ............................................. 915
Index ........................................................................................................................................................ 921
Index
921
Index
$()-Funktion ............................................................... 67
Argument Callback ............................................ 76
Argument CSS-Selektor .................................... 77
Argument CSS-Selektor mit Kontext .......... 78
Argument CSS-Selektor mit Kontext,
DOM .................................................................... 78
Argument CSS-Selektor mit Kontext,
Selektor .............................................................. 79
Argument DOM-Collection ............................ 70
Argument DOM-Knoten .................................. 70
Argument HTML-String ................................... 73
Argument HTML-String, owner-
Document ......................................................... 75
Argument jQuery-Objekt ................................. 71
Argument Plain Object .................................... 72
$.ajax ......................................................................... 349
$.ajax, accepts .......................................................... 351
$.ajax, async ............................................................. 358
$.ajax, beforeSend ................................................. 354
$.ajax, cache ............................................................. 358
$.ajax, complete ..................................................... 356
$.ajax, contents ...................................................... 352
$.ajax, contentType ............................................... 351
$.ajax, context ......................................................... 351
$.ajax, converters .................................................. 353
$.ajax, crossDomain ............................................. 357
$.ajax, data ............................................................... 352
$.ajax, dataFilter ..................................................... 355
$.ajax, dataType ..................................................... 352
$.ajax, error .............................................................. 354
$.ajax, global ............................................................ 359
$.ajax, headers ......................................................... 351
$.ajax, ifModified ................................................... 359
$.ajax, isLocal .......................................................... 359
$.ajax, jsonp ............................................................. 357
$.ajax, jsonpCallback ............................................ 357
$.ajax, mimeType .................................................. 359
$.ajax, password ..................................................... 359
$.ajax, processData ............................................... 352
$.ajax, scriptCharset ............................................ 360
$.ajax, statusCode ................................................ 360
$.ajax, success ......................................................... 355
$.ajax, timeout ....................................................... 360
$.ajax, traditional ................................................. 360
$.ajax, type .............................................................. 350
$.ajax, url ................................................................... 351
$.ajax, username .................................................... 359
$.ajax, xhr .................................................................. 361
$.ajax, xhrFields ...................................................... 361
$.ajaxSetup .............................................................. 349
$.boxModel ............................................................. 387
$.browser .................................................................. 387
$.Callbacks() ............................................................. 328
$.Callbacks(), callbacks.add() ............................. 329
$.Callbacks(), callbacks.disable() ...................... 333
$.Callbacks(), callbacks.disabled() ................... 333
$.Callbacks(), callbacks.empty() ....................... 333
$.Callbacks(), callbacks.fire() .............................. 331
$.Callbacks(), callbacks.fired() ............................ 331
$.Callbacks(), callbacks.fireWith() .................... 331
$.Callbacks(), callbacks.has() ............................. 330
$.Callbacks(), callbacks.lock() ............................ 336
$.Callbacks(), callbacks.locked() ....................... 338
$.Callbacks(), callbacks.remove() .................... 330
$.Callbacks(), Flag 'memory' .............................. 334
$.Callbacks(), Flag 'once' ...................................... 334
$.Callbacks(), Flag 'stopOnFalse' ...................... 336
$.Callbacks(), Flag 'unique' ................................. 335
$.Callbacks(), Flags ................................................ 333
$.contains() .............................................................. 395
$.data() ........................................................................ 193
$.Deferred() .............................................................. 293
$.each() ..................................................................... 390
$.extend() ................................................................ 400
$.extend(obj) .......................................................... 403
$.fn.extend() ........................................................... 403
$.get() ......................................................................... 366
$.getJSON() ............................................................... 369
$.getScript() ............................................................. 370
$.globalEval() ........................................................... 398
$.grep() ....................................................................... 392
$.inArray() ................................................................ 393
$.isArray() ................................................................ 406
$.isEmptyObject() ................................................ 406
$.isFunction() ......................................................... 407
$.isPlainObject() .................................................... 407
$.map() ...................................................................... 393
$.merge() .................................................................. 390
$.mobile.activePage ............................................ 805
$.mobile.changePage() ........................................ 798
$.mobile.loadPage (method) ........................... 800
$.mobile.navigate() .............................................. 801
$.mobile.path.get() .............................................. 803
$.mobile.path.isAbsoluteUrl() ........................ 805
Index
922
$.mobile.path.isRelativeUrl() ........................... 804
$.mobile.path.makePathAbsolute() .............. 803
$.mobile.path.makeUrlAbsolute() ................. 804
$.mobile.path.parseUrl() ................................... 802
$.mobile.silentScroll() ........................................ 805
$.noConflict() ......................................................... 384
$.noConflict(), extreme ...................................... 386
$.param() .................................................................... 371
$.post() ...................................................................... 368
$.proxy() ................................................................... 399
$.pushStack() .......................................................... 396
$.removeData() ....................................................... 193
$.support .................................................................. 388
$.trim() ...................................................................... 394
$.unique() ................................................................. 391
$.when() ..................................................................... 322
A
add() ............................................................................. 125
addBack() ................................................................... 127
addClass() ................................................................. 232
after() .......................................................................... 214
Ajax ............................................................................. 341
$.ajax() ........................................................ 349, 496
$.ajax(), Konfiguration .................................. 349
$.ajaxSetup() ...................................................... 349
$.get() .................................................................... 366
$.getJSON() ......................................................... 369
$.getScript() ........................................................ 370
$.param() .............................................................. 371
$.post() ................................................................. 368
.load() .................................................................... 373
Crossdomain-Request ................................... 495
Cross-Domain-Schranke ................................ 347
Datentypen ........................................................ 346
Datentypen, HTML ......................................... 346
Datentypen, JASONP ....................................... 347
Datentypen, JSON ............................................. 347
Datentypen, Scriptdaten ............................... 347
Datentypen, Textdaten ................................. 346
Datentypen, XML ............................................. 347
klassischer Ansatz ............................................ 342
Low-level Utilities ............................................ 348
mit jQuery .......................................................... 348
Same Domain Policy ....................................... 373
XHR-Objekt ......................................................... 342
XHR-Objekt, .open() ......................................... 342
XHR-Objekt, .send() .......................................... 344
XHR-Objekt, onreadystatechange ............. 343
XHR-Objekt, readyState ................................. 343
Ajax (Forts.)
XHR-Objekt, responseText ........................... 344
XHR-Objekt, Spezifikation ............................ 346
XHR-Objekt, status .......................................... 345
XHR-Objekt, Statusmeldung ....................... 345
XHT-Objekt, responseXML ........................... 347
XMLHttpRequest ............................................... 341
ajaxComplete() ...................................................... 378
ajaxError() ................................................................ 378
Ajax-Request
.ajaxComplete() ................................................ 378
.ajaxError() .......................................................... 378
.ajaxSend() .......................................................... 378
.ajaxStart() ........................................................... 377
.ajaxStop() ........................................................... 378
.ajaxSuccess() ..................................................... 378
allgemein ............................................................. 349
Defaultkonfiguration ..................................... 349
Get .......................................................................... 366
Get JSON .............................................................. 369
Get Script ............................................................. 370
Globale Handler ................................................ 377
Konfiguration .................................................... 350
Konfiguration, accepts-Eigenschaft .......... 351
Konfiguration, async-Eigenschaft ............ 358
Konfiguration, beforeSend-Callback ....... 354
Konfiguration, cache-Eigenschaft ............ 358
Konfiguration, Callbacks .............................. 353
Konfiguration, complete-Callback ........... 356
Konfiguration, contents-Eigenschaft ...... 352
Konfiguration, contentType-
Eigenschaft ..................................................... 351
Konfiguration, context-Eigenschaft ......... 351
Konfiguration, converters-Eigenschaft ... 353
Konfiguration, crossDomain-
Eigenschaft ..................................................... 357
Konfiguration, data-Eigenschaft ............... 352
Konfiguration, dataFilter-Callback ........... 355
Konfiguration, dataType-Eigenschaft ..... 352
Konfiguration, error-Callback .................... 354
Konfiguration, global-Eigenschaft ........... 359
Konfiguration, headers-Eigenschaft ......... 351
Konfiguration, ifModified-Eigenschaft ... 359
Konfiguration, isLocal-Eigenschaft .......... 359
Konfiguration, jsonpCallback-
Eigenschaft ..................................................... 357
Konfiguration, jsonp-Eigenschaft .............. 357
Konfiguration, mimeType-Eigenschaft ... 359
Konfiguration, password-Eigenschaft .... 359
Konfiguration, processData-Eigenschaft 352
Index
923
Ajax-Request (Forts.)
Konfiguration, scriptCharset-
Eigenschaft ................................................... 360
Konfiguration, statusCode-
Eigenschaft ................................................... 360
Konfiguration, success-Callback ................ 355
Konfiguration, timeout-Eigenschaft ....... 360
Konfiguration, traditional-
Eigenschaft ................................................... 360
Konfiguration, type-Eigenschaft .............. 350
Konfiguration, url-Eigenschaft .................... 351
Konfiguration, username-Eigenschaft .... 359
Konfiguration, xhr-Eigenschaft ................. 361
Konfiguration, xhrFields-Eigenschaft ...... 361
Load ....................................................................... 373
Post ....................................................................... 368
ajaxSend() ................................................................. 378
ajaxStart() ................................................................. 377
ajaxStop() .................................................................. 378
ajaxSuccess() ........................................................... 378
Akkordeon-Navigation ....................................... 441
AMD
define() ................................................................. 807
AMD, Asynchronous Module Definition ... 807
andSelf() ..................................................................... 127
animate() .................................................................. 274
Animationen .......................................................... 249
.animate() ............................................................ 274
.animate(), Argumente ................................... 275
.animate(), Dauer ............................................. 276
.animate(), Easing ............................................ 277
.animate(), Easingfunktionen ...................... 278
.animate(), Optionsobjekt ............................. 282
.animate(), Property-Map ............................. 275
.delay() ................................................................... 271
.dequeue() ........................................................... 286
.fadeIn() ............................................................... 270
.fadeOut() ............................................................ 270
.fadeTo() .............................................................. 268
.fadeToggle() ...................................................... 268
.hide() ..................................................................... 261
.queue() ................................................................. 285
.queue(), Callback ............................................ 286
.queue(), Name der Queue ........................... 286
.show() ................................................................... 261
.slideDown() ....................................................... 264
.slideToggle() ..................................................... 266
.slideUp() ............................................................. 264
.stop() ..................................................................... 272
.toggle() ................................................................ 261
Abbrechen von ................................................... 272
Animationen (Forts.)
CSS-Eigenschaften animieren ..................... 274
Dauer .................................................................... 261
Easingfunktionen ............................................. 277
Easingfunktionen, Default .................. 278, 279
Fades ..................................................................... 268
Farbwerte animieren ...................................... 276
Globaler Stop .................................................... 290
jQuery Easing Plugin ...................................... 278
Queue .................................................................... 283
Slides ..................................................................... 263
Utilities ....................................................... 270, 290
Verzögerung ....................................................... 271
Zeigen und Verstecken ................................... 259
append() ..................................................................... 217
appendTo() ............................................................... 218
Array-Verarbeitung ............................................. 389
$.each() ................................................................ 390
$.grep() .................................................................. 392
$.inArray() ........................................................... 393
$.map() ................................................................. 393
$.merge() ............................................................. 390
$.unique() .............................................................. 391
Test auf Array ................................................... 406
attr() ............................................................................. 183
Attribute ................................................................... 180
entfernen ............................................................. 184
lesen ........................................................................ 183
schreiben .............................................................. 183
B
before() ....................................................................... 217
bind() .......................................................................... 148
blur() .................................................................. 162, 203
Bower ........................................................................ 809
C
change() ........................................................... 162, 203
children() ................................................................... 116
click() ........................................................................... 159
clone() ................................................................ 135, 216
closest() ...................................................................... 122
Collection, Eigenschaften .................................... 68
Collection, primäre ................................................ 67
contents() .................................................................. 117
context ........................................................................ 111
Cookies ....................................................................... 535
css() ............................................................................. 238
Index
924
CSS-Anweisung
Aufbau ................................................................. 867
Deklarationsblock ........................................... 867
Eigenschaftsdeklaration .............................. 867
Selektor ................................................................ 867
CSS-Datei, Import ................................................. 865
CSS-Datei, Verlinkung ........................................ 864
CSS-Eigenschaften
.addClass() ........................................................... 232
.css() ....................................................................... 238
.hasClass() ............................................................ 231
.height() ................................................................ 241
.innerHeight() ..................................................... 241
.innerWidth() ...................................................... 241
.outerHeight() .................................................... 241
.outerWidth() ...................................................... 241
.removeClass() ................................................... 234
.toggleClass() ...................................................... 235
.width() .................................................................. 241
Abmessungen ................................................... 240
animieren ............................................................ 274
computed height ............................................. 240
computed width ............................................... 240
Position ................................................................ 242
Scrollposition .................................................... 246
CSS-Selektoren
Gruppierung ...................................................... 868
ID-Selektor .......................................................... 870
Klassenselektor, frei ....................................... 869
Klassenselektor, gebunden .......................... 869
Typ-Selektor ....................................................... 868
D
data() .......................................................................... 192
dblclick() .................................................................... 159
Deferred .................................................................... 291
always() ............................................................... 307
done() ................................................................... 308
fail() ....................................................................... 308
isRejected(), Deprecated .............................. 300
isResolved(), Deprecated .............................. 300
Konstruktor ........................................................ 293
Methoden ........................................................... 306
notify() ....................................................... 305, 309
notifyWith() ............................................. 305, 309
Pending-Zustand .............................................. 293
pipe() ...................................................................... 316
progress() ............................................................ 309
promise() .................................................... 293, 294
Promise-Objekt .................................................. 293
Deferred (Forts.)
reject() ................................................................... 302
Rejected-Zustand ............................................. 293
rejectWith() ......................................................... 303
resolve() ............................................................... 304
Resolved-Zustand ............................................ 293
resolveWith() ...................................................... 305
state() .................................................................... 299
Status .................................................................... 293
then() ...................................................................... 311
Deferred-Objekt ..................................................... 292
delay() ......................................................................... 271
delegate() ................................................................... 167
dequeue() ................................................................. 286
Desktop first .......................................................... 686
detach() ..................................................................... 220
DHTML ......................................................................... 23
die() [abgeschafft] .................................................. 172
Doctype-Definition ............................................... 851
Doctype-Deklaration ............................................ 851
Document Object Model .................................... 915
Child ...................................................................... 916
decorating the tree ........................................... 917
Dokumentknoten .............................................. 915
Elementknoten .................................................. 916
Parent ................................................................... 916
Dokument-Style ................................................... 866
DOM-Eigenschaften
checked ................................................................. 199
data ....................................................................... 180
dataset ................................................................. 180
disabled ................................................................ 198
innerHTML ................................................... 74, 180
innerText ............................................................. 180
lesen ........................................................................ 185
nodeValue ........................................................... 180
schreiben .............................................................. 185
textContent ........................................................ 180
DOM-Knotenverarbeitung
$.contains() ......................................................... 395
$.pushStack() ...................................................... 396
DOM-Manipulation .............................................. 211
.after() .................................................................... 214
.append() ............................................................... 217
.appendTo() ......................................................... 218
.before() ................................................................. 217
.clone() .................................................................. 216
.detach() ............................................................... 220
.insertAfter() ........................................................ 215
.insertBefore() ..................................................... 217
.prepend() ............................................................. 218
Index
925
DOM-Manipulation (Forts.)
.prependTo() ....................................................... 218
.remove() .............................................................. 219
.replaceAll() ......................................................... 222
.replaceWith() ..................................................... 222
.unwrap() ............................................................. 227
.wrap() ................................................................... 224
.wrapAll() ............................................................. 226
.wrapInner() ........................................................ 225
Einfügen von Knoten ...................................... 213
Entfernen von Knoten .................................... 218
Ersetzen von Knoten ....................................... 221
Wrapping ............................................................. 223
DOM-Manipulation, klassisch .......................... 211
DOM-Methoden
.addEvent-Listener() ......................................... 137
.appendChild() ................................................... 212
.createElement() ........................................... 73, 211
.createTextNode() ............................................. 212
.getAttribute() ................................................... 180
.getElementById() ............................... 69, 70, 137
.getElementsByClassName() ........................... 71
.getElementsByTagName() ..................... 69, 70
.insertBefore() ..................................................... 212
.removeChild() ................................................... 213
.setAttribute() ............................................ 180, 212
DOM-Properties
entfernen ............................................................. 186
DOM-Referenz, online ....................................... 920
DOM-Scripting ......................................................... 23
E
each() .......................................................................... 107
Editoren
Adobe Dreamweaver ........................................ 36
Aptana .................................................................... 37
BBedit ...................................................................... 36
Eclipse IDE ............................................................. 37
Microsoft Visual Studio 2013 ......................... 37
Notepad++ ............................................................ 36
TextWrangler ....................................................... 36
Elementinhalt
lesen ....................................................................... 187
löschen ................................................................. 190
schreiben .............................................................. 187
empty() ..................................................................... 190
end() ............................................................................ 134
eq() ............................................................................... 129
error() ......................................................................... 166
Event
Propagation ........................................................ 145
Event-Bindung
.bind() .................................................................... 148
.blur() ...................................................................... 161
.change() ...................................................... 161, 203
.click() ..................................................................... 159
.dblclick() .............................................................. 159
.delegate() ............................................................. 167
.die() [abgeschafft] ............................................ 172
.error() ................................................................... 166
.focus() .......................................................... 161, 203
.focusin() ...................................................... 161, 203
.focusout() ................................................... 161, 203
.hover() .................................................................. 157
.keydown() ........................................................... 160
.keypress() ............................................................ 160
.keyup() ................................................................. 160
.live() [abgeschafft] ........................................... 172
.load() ..................................................................... 163
.mousedown() ..................................................... 159
.mouseenter() ...................................................... 159
.mouseleave() ...................................................... 159
.mousemove() ..................................................... 159
.mouseout() ......................................................... 159
.mouseover() ....................................................... 159
.mouseup() ........................................................... 159
.off() ......................................................................... 151
.on() ........................................................................ 149
.one() ...................................................................... 157
.resize() .................................................................. 165
.scroll() ................................................................... 165
.select() ......................................................... 162, 203
.submit() ...................................................... 162, 203
.toggle() [Removed] .......................................... 158
.unbind() ................................................................ 151
.undelegate() ...................................................... 168
.unload() .............................................................. 164
Event-Handler ......................................................... 137
Event-Handling ...................................................... 137
Event-Listener ......................................................... 137
Event-Objekt ................................. 137, 138, 205, 368
.isDefaultPrevented() ...................................... 146
.isImmediatePropagationStopped() .......... 145
.isPropagationStopped() ................................ 145
.preventDefault() ............................ 146, 367, 548
.stopPropagation() ........................................... 145
currentTarget ..................................................... 141
Eigenschaften .................................................... 140
keyCode ................................................................. 143
Koordinaten ........................................................ 142
Index
926
Event-Objekt (Forts.)
originalEvent ..................................................... 140
pageX .................................................................... 142
pageY ..................................................................... 142
relatedTarget ...................................................... 141
timeStamp .......................................................... 142
type ........................................................................ 142
vereinheitlichtes E. ........................................... 139
Events
Bubbling-Phase ................................................. 144
Capture-Phase ................................................... 143
Erzeugen von Events ........................................ 173
Fensterevents ..................................................... 164
Formulare ........................................................... 202
Ladeevents .......................................................... 163
Target-Phase ...................................................... 144
Triggern ................................................................. 173
Triggern, .blur() ................................................. 178
Triggern, .change() ........................................... 178
Triggern, .click() ................................................. 178
Triggern, .dblclick() .......................................... 178
Triggern, .focus() ............................................... 178
Triggern, .focusin() ........................................... 178
Triggern, .keydown() ....................................... 178
Triggern, .keypress() ........................................ 178
Triggern, .keyup() ............................................. 178
Triggern, .mousedown() ................................. 178
Triggern, .mouseenter() ................................. 178
Triggern, .mouseleave() ................................. 178
Triggern, .mousemove() ................................. 178
Triggern, .mouseout() ..................................... 178
Triggern, .mouseover() ................................... 178
Triggern, .mouseup() ....................................... 178
Triggern, .resize() .............................................. 179
Triggern, .scroll() ............................................... 179
Triggern, .select() .............................................. 178
Triggern, .submit() ........................................... 178
Weitertragen des Events ................................ 143
Extreme programming ...................................... 825
F
fadeIn() ..................................................................... 270
fadeOut() .................................................................. 270
fadeTo() .................................................................... 268
fadeToggle() ............................................................ 268
filter() ......................................................................... 129
find() ........................................................................... 120
first() ............................................................................ 131
focus() ............................................................... 161, 203
focusin() ........................................................... 161, 203
focusout() ......................................................... 161, 203
Formulare
Autocomplete ................................................... 509
Daten mit Ajax versenden ........................... 504
Datepicker ........................................................... 507
Validierung ........................................................ 498
Formularverarbeitung ........................................ 194
.serialize() ........................................................... 204
.serializeArray() ................................................ 206
.val() ....................................................................... 207
Events ................................................................... 202
Extraktion von Werten .................................. 207
Selektoren ............................................................ 195
Serialisierung .................................................... 204
Zustandsfilter .................................................... 198
Funktionsaufrufe
$globalEval() ...................................................... 398
$noop .................................................................... 398
$proxy() ................................................................ 399
G
Geodaten .................................................................. 510
Geonames ................................................................ 510
Webservice, Konfiguration .......................... 510
get() ............................................................................. 109
Git ............................................................................... 808
Github, jQuery ...................................................... 807
Grids ........................................................................... 529
Grunt ........................................................................ 808
H
has() ............................................................................. 132
hasClass() ................................................................... 231
height() ....................................................................... 241
hide() .......................................................................... 261
hover() ........................................................................ 157
html() .......................................................................... 187
I
index() ........................................................................ 110
innerHeight() ........................................................... 241
innerWidth() ............................................................ 241
insertAfter() .............................................................. 215
insertBefore() ........................................................... 217
iPhone-Emulator
iBBDemo 2 ............................................................ 712
MobiOne ............................................................... 714
is() ......................................................................... 112, 231
Index
927
J
JavaScript
Callback ............................................................... 910
Closure ................................................................. 898
Cookie Objekt ..................................................... 535
Funktionen ......................................................... 895
globale Variable ............................................... 896
Konstruktor ....................................................... 904
Konstruktorfunktionen ............................... 906
Kontrollstrukturen .......................................... 892
lokale Variable ................................................. 897
Namensräume ................................................... 913
Objekte ................................................................. 903
Objektliteral ....................................................... 905
Prototypkette .................................................... 907
Scope .................................................................... 896
ternärer Operator ............................................ 893
JavaScript-Methoden
.apply() ................................................................... 911
.call() ....................................................................... 911
.sort() ..................................................................... 522
jQuery
Erweiterbarkeit ................................................. 649
Plugin-Repository ........................................... 650
Plugins ................................................................. 649
jQuery Mobile ......................................................... 710
Basis-URL ............................................................. 773
Button .......................................................... 754, 759
Checkbox, Radiobutton ................................. 758
Checkboxen ........................................................ 753
data-*-Attribute, Definition ......................... 779
data-*-Attribute, Übersicht .......................... 780
data-count-theme ........................................... 764
data-direction .................................................... 791
data-divider-theme ........................................ 764
data-filter-theme ............................................. 764
data-icon .................................................... 726, 782
data-iconpos ...................................................... 726
data-icon-position ........................................... 784
data-inline ........................................................... 787
data-inset ............................................................ 724
data-position ..................................................... 785
data-rel ................................................................. 785
data-role ............................................................. 786
data-role, button .............................................. 787
data-role, collapsible ...................................... 788
data-role, collapsible-set ............................... 788
data-role, controlgroup ................................. 787
data-role, fieldcontain .................................. 789
data-role, footer ................................................. 721
jQuery Mobile (Forts.)
data-role, header ............................................... 721
data-role, list-divider ...................................... 788
data-role, listview ................................... 723, 788
data-role, nav-bar ............................................ 789
data-role, navbar .............................................. 725
data-role, none ................................................. 790
data-role, page ................................................... 721
data-role, slider ................................................ 790
data-split-theme ............................................... 764
data-theme ......................................................... 764
data-transition .................................................. 791
data-transition, Definition ........................... 727
data-transition, reverse .................................. 727
data-type ............................................................. 787
Enhancement ..................................................... 772
Events ................................................................... 792
Events, hashchange ........................................ 794
Events, Initialisierung .................................... 797
Events, Mouse-Events, virtuelle .................. 793
Events, navigate ............................................... 794
Events, Navigation .......................................... 794
Events, orientationchange ........................... 793
Events, Orientierung ....................................... 793
Events, pagebeforechange ........................... 796
Events, pagebeforecreate .............................. 797
Events, pagebeforehide ................................. 796
Events, pagebeforeload ................................. 796
Events, pagebeforeshow ............................... 796
Events, pagechange ........................................ 796
Events, pagechangefailed ............................. 796
Events, pagecreate ........................................... 797
Events, pagehide .............................................. 796
Events, pageinit ................................................ 797
Events, pageload .............................................. 796
Events, pageloadfailed ................................... 796
Events, pageremove ........................................ 796
Events, pageshow ............................................. 796
Events, Scrolling ............................................... 794
Events, scrollstart ............................................. 794
Events, scrollstop ............................................. 794
Events, Seitenübergänge ............................... 795
Events, swipe ...................................................... 792
Events, swipeleft ............................................... 792
Events, swiperight ............................................ 792
Events, tap .......................................................... 792
Events, taphold ................................................. 792
Events, throttledresize ................................... 794
Events, Touch-Events ...................................... 792
Events, vclick ...................................................... 793
Events, vmousecancel .................................... 793
Index
928
jQuery Mobile (Forts.)
Events, vmousedown ...................................... 793
Events, vmousemove ...................................... 793
Events, vmouseout ........................................... 793
Events, vmouseover ......................................... 793
Events, vmouseup ............................................ 793
Formular mit Ajax ........................................... 756
Formular Transition ........................................ 756
Formulare ........................................................... 749
Icon-Sprites ......................................................... 782
Konfiguration .................................................... 775
Konfiguration, activeBtnClass .................... 777
Konfiguration, activePageClass ................. 777
Konfiguration, ajaxEnabled ........................ 777
Konfiguration, allowCrossDomain-
Pages ................................................................ 777
Konfiguration, defaultDialog-
Transition ....................................................... 778
Konfiguration, defaultPageTransition .... 778
Konfiguration, gradeA ................................... 779
Konfiguration, hashListeningEnabled .... 777
Konfiguration, ignoreContentEnabled ... 778
Konfiguration, linkBindingEnabled .......... 778
Konfiguration, minScrollBack .................... 778
Konfiguration, ns ............................................. 776
Konfiguration, pageLoadError-
Message ........................................................... 778
Konfiguration, subPageUrlKey ................... 776
Methoden ........................................................... 798
Methoden, changePage() ............................. 798
Methoden, loadPage() .................................. 800
Methoden, navigate() .................................... 801
Methoden, path.get() ..................................... 803
Methoden, path.isAbsoluteUrl() ................ 805
Methoden, path.isRelativeUrl() ................. 804
Methoden, path.makePathAbsolute() .... 803
Methoden, path.makeUrlAbsolute() ........ 804
Methoden, path.parseUrl() .......................... 802
Methoden, silentScroll() ................................ 805
Mobile Page ......................................................... 721
mobileinit ............................................................. 771
Properties, activePage ................................... 805
Radiobutton ....................................................... 753
role-Attribut ....................................................... 775
Seitenübergänge, Animationen ................. 727
Select Menü ......................................................... 753
Select-Menü ........................................................ 757
Slider ...................................................................... 758
Textfelder ..................................................... 753, 757
Themes .................................................................. 759
Themes, Übersicht ........................................... 764
jQuery Mobile (Forts.)
Viewport-Meta ................................................... 773
WAI-ARIA ............................................................ 774
jQuery UI ............................................................ 30, 551
.autocomplete(), Optionen ............................ 512
.datepicker() ...................................................... 509
Autocomplete-Widget ................................... 509
Datepicker-Widget .......................................... 507
Datepicker-Widget, Lokalisierung ........... 508
Download ............................................................. 552
Download, Builder ............................................ 553
Draggable ........................................................... 610
Draggable, Events ............................................ 618
Draggable, Optionen ....................................... 611
Droppable ........................................................... 618
Droppable, Events ............................................ 622
Droppable, Optionen ..................................... 620
Effects core ........................................................... 513
Effekte .......................................................... 594, 596
Effekte, blind ...................................................... 597
Effekte, bounce .................................................. 598
Effekte, clip ......................................................... 598
Effekte, drop ....................................................... 599
Effekte, fade ...................................................... 600
Effekte, fold ....................................................... 600
Effekte, highlight .............................................. 601
Effekte, scale ....................................................... 601
Effekte, shake .................................................... 602
Effekte, size ........................................................ 602
Effekte, slide ...................................................... 602
Effekte, transfer ............................................... 603
Einbinden ............................................................ 559
Interactions ....................................................... 603
Interactions, destroy ..................................... 606
Interactions, disable ...................................... 606
Interactions, Einsatz ...................................... 604
Interactions, enable ....................................... 606
Interactions, Events ....................................... 605
Interactions, Konfiguration ....................... 604
Interactions, Methoden ................................ 606
Interactions, option ....................................... 606
Interactions, Typen ........................................ 603
Interactions, widget ....................................... 606
Methoden, .addClass() .................................... 594
Methoden, .effect() ........................................... 596
Methoden, .hide() ............................................. 596
Methoden, .removeClass() ............................ 594
Methoden, .show() ........................................... 596
Methoden, .switchClass() .............................. 594
Methoden, .toggle() ......................................... 596
Methoden, .toggleClass() .............................. 594
Index
929
jQuery UI (Forts.)
Resizable .............................................................. 635
Resizable, Events ............................................... 641
Resizable, Optionen ........................................ 639
Selectable ............................................................ 643
Selectable, Events ............................................ 646
Selectable, Optionen ...................................... 646
Sortable ................................................................ 623
Sortable, Events ................................................ 630
Sortable, Methoden ......................................... 633
Sortable, Optionen .......................................... 626
Struktur ................................................................ 558
Themes .................................................................. 554
Themes, scoped ................................................. 556
Themes, ThemeRoller ...................................... 554
Widgets, Accordeon ......................................... 574
Widgets, Autocomplete .................................. 593
Widgets, Basisklassen .................................... 560
Widgets, Button ............................................... 589
Widgets, Buttonset .......................................... 592
Widgets, Corner-Klassen .............................. 560
Widgets, CSS-Klassen ..................................... 560
Widgets, Datepicker ....................................... 580
Widgets, Dialog ................................................. 563
Widgets, Formulare ......................................... 579
Widgets, Layout-Widgets .............................. 563
Widgets, Progressbar ..................................... 570
Widgets, Slider .................................................. 586
Widgets, Tab-Widget ....................................... 577
Widgets, Toggle-Button ................................. 591
jQuery.when() ......................................................... 322
jQuery-Build ........................................................... 807
Bower ................................................................... 809
Git .......................................................................... 808
Git-Repository klonen .................................... 813
Grunt .................................................................... 808
Individueller Build ............................................ 816
Installation von Bower .................................. 813
Installation von Git ........................................ 809
Installation von Grunt ................................... 812
Installation von NodeJS .................................. 811
Kompletter Build .............................................. 814
NodeJS .................................................................. 808
Voraussetzungen ............................................ 808
jQuery-Eigenschaften
.context, Definition [deprecated] ................. 111
.length, Definition ............................................ 110
.selector, Definition ........................................... 111
jQuery-Helferfunktionen
$.ajax() ................................................................... 512
$.ajax(), success .................................................. 512
jQuery-Methoden ................................................... 67
.add(), Definition ............................................... 125
.addBack(), Definition ..................................... 127
.addClass() .................................. 78, 439, 443, 524
.addClass(), Definition .................................... 232
.after() ........................................................... 216, 217
.after(), Definition ............................................. 214
.ajaxError() .......................................................... 494
.ajaxSuccess() ..................................................... 494
.andSelf(), Definition ........................................ 127
.animate() ............................................................ 548
.animate(), Beispiel .......................................... 279
.animate(), Callback ........................................ 279
.animate(), Dauer ............................................. 276
.animate(), Definition ..................................... 274
.animate(), Easing ............................................. 277
.append() .................................. 439, 440, 493, 524
.append(), Definition ........................................ 217
.appendTo() ......................................................... 135
.appendTo(), Definition .................................. 218
.attr() ................................................... 109, 199, 439
.attr(), Definition ............................................... 183
.before(), Definition .......................................... 217
.bind() ..................................................................... 158
.bind(), Definition ............................................. 148
.blur(), Definition ...................................... 161, 203
.change(), Definition .............................. 162, 203
.children(), Definition ...................................... 116
.click() ............................... 136, 439, 440, 443, 548
.click(), Definition .............................................. 159
.clone(), Definition ................................... 135, 216
.clone(true) ........................................................... 136
.closest(), Definition ......................................... 122
.contents(), Definition ..................................... 117
.css() ..................................................... 261, 424, 425
.css(), Definition ................................................ 238
.css(), Eigenschaft über Funktion ............... 239
.css(), Eigenschaftsnamen ............................. 239
.css(), Lesen einer Eigenschaft ..................... 238
.css(), Setzen einer Eigenschaft ................... 238
.css(), Setzen mehrerer Eigenschaften ...... 239
.data() ............................................................ 191, 219
.data(), Definition ............................................. 192
.dblclick(), Definition ........................................ 159
.delay(), Definition ............................................ 271
.delegate() ............................................................. 158
.delegate(), Definition ...................................... 167
.dequeue(), Definition ..................................... 286
.detach(), Definition ........................................ 220
.die() [abgeschafft], Definition ..................... 172
.each() ...................... 110, 112, 202, 439, 440, 493
Index
930
jQuery-Methoden (Forts.)
.each(), Definition ............................................. 107
.empty(), Definition ........................................ 190
.end(), Definition ............................................... 134
.eq() .............................................................. 439, 440
.eq(), Definition .................................................. 129
.error(), Definition ............................................ 166
.fadeIn() ...................................................... 439, 493
.fadeIn(), Definition ........................................ 270
.fadeOut(), Definition ..................................... 270
.fadeTo(), Definition ....................................... 268
.fadeToggle(), Definition ............................... 268
.filter(), Definition ............................................. 129
.find() .................................................. 424, 425, 439
.find(), Definition .............................................. 120
.first() ................................................. 426, 439, 440
.first(), Definition ............................................... 131
.focus(), Definition ................................... 162, 203
.focusin(), Definition ............................... 161, 203
.focusout(), Definition ............................ 161, 203
.get() ........................................................................ 112
.get(), Definition ............................................... 109
.has(), Definition ............................................... 132
.hasClass() ............................................................ 524
.hasClass(), Definition ..................................... 231
.height(), Definition ......................................... 241
.hide() .................................................. 439, 443, 528
.hide(), Definition .............................................. 261
.hide(fast) ............................................................. 261
.hide(slow) ........................................................... 261
.hover() ................................................ 424, 425, 516
.hover(), Definition ............................................ 157
.html() .......................................................... 366, 368
.html(), Definition ............................................. 187
.index() ....................................................... 439, 440
.index(), Definition ........................................... 110
.innerHeight(), Definition .............................. 241
.innerWidth(), Definition ............................... 241
.insertAfter(), Definition .................................. 215
.insertBefore() .......................................... 439, 440
.insertBefore(), Definition ............................... 217
.is() ................................................................. 199, 516
.is(), Definition) ................................................... 112
.keydown(), Definition ................................... 160
.keypress(), Definition .................................... 160
.keyup(), Definition ......................................... 160
.last(), Definition ................................................ 131
.live() [abgeschafft], Definition .................... 172
.load() (Ajax) ....................................................... 485
.load(), Callback ................................................. 376
.load(), Daten-Argument ............................... 375
jQuery-Methoden (Forts.)
.load(), Definition (Ajax) ................................ 373
.load(), Definition (Event) ............................... 163
.load(), Drilldown-Selektor ........................... 374
.mouseenter(), Definition ............................... 159
.mouseleave(), Definition ............................... 159
.mousemove(), Definition .............................. 159
.mouseout(), Definition .................................. 159
.mouseover(), Definition ................................ 159
.mouseup(), Definition .................................... 159
.next() ........................................................... 443, 444
.next(), Definition .............................................. 118
.nextAll(), Definition ........................................ 123
.nextUntil(), Definition .................................... 124
.not() ...................................................................... 443
.not(), Definition ............................................... 130
.off(), Definition ................................................... 151
.offset(), Definition ........................................... 243
.offsetParent(), Definition ............................. 245
.on() ......................................................................... 158
.on(), Definition ................................................. 149
.one(), Definition ................................................ 157
.outerHeight(), Definition .............................. 241
.outerWidth(), Definition ................................ 241
.parent(), Definition ......................................... 117
.parents(), Definition ........................................ 121
.parentsUntil(), Definition ............................. 121
.position() ............................................................ 548
.position(), Definition ..................................... 245
.prepend(), Definition ...................................... 218
.prependTo(), Definition ................................. 218
.prev() .................................................................... 445
.prev(), Definition .............................................. 119
.promise(), Definition ...................................... 316
.prop(), Definition .............................................. 185
.queue(), Beispiel ............................................... 287
.queue(), Definition .......................................... 285
.ready() ................................................................. 424
.remove() ............................................................... 191
.remove(), Definition ....................................... 219
.removeAttr() ............................................. 135, 199
.removeAttr(), Definition ............................... 184
.removeClass() .......................................... 439, 443
.removeClass(), Definition ............................ 234
.removeData(), Definition ............................. 193
.removeProp(), Definition ............................. 186
.replace(), Definition ....................................... 222
.replaceWith(), Definition ............................. 222
.resize(), Definition ............................................ 165
.scroll() .................................................................. 248
.scroll(), Definition ............................................ 165
Index
931
jQuery-Methoden (Forts.)
.scrollLeft(), Definition .................................... 247
.scrollTop(), Definition ................................... 248
.select(), Definition .................................. 162, 203
.serialize() ................................................... 367, 368
.serialize(), Definition ..................................... 204
.serializeArray() ................................................ 207
.serializeArray(), Definition ......................... 206
.show() ................................................ 439, 440, 528
.show(), Definition ............................................ 261
.siblings(), Definition ....................................... 124
.size() [deprecated] ............................................. 111
.size(), Definition ............................................... 110
.slice() ..................................................................... 528
.slice(), Definition .............................................. 132
.slideDown() ...................................... 424, 425, 443
.slideDown(), Definition ................................ 264
.slideToggle(), Definition .............................. 266
.slideUp() .................................. 424, 425, 443, 444
.slideUp(), Definition ...................................... 264
.stop() ..................................................................... 425
.stop(), Definition .............................................. 272
.submit(), Definition ............................... 162, 203
.text() ................................................... 112, 439, 494
.text(), Definition .............................................. 188
.text(), Rückgabewert ...................................... 189
.text(), Stringmethoden .................................. 189
.toArray(), Definition ........................................ 112
.toggleClass(), Definition ............................... 235
.trigger(), Definition .......................................... 173
.triggerHandler(), Definition ......................... 175
.unbind(), Definition ......................................... 151
.undelegate(), Definition ................................ 168
.unload(), Definition ........................................ 164
.unwrap(), Definition ....................................... 227
.val() ...................................................................... 202
.val(), Definition ............................................... 208
.width(), Definition ........................................... 241
.wrap(), Definition ............................................ 224
.wrapAll(), Definition ...................................... 226
.wrapInner(), Definition ................................. 225
Accessoren .......................................................... 106
Animationen ..................................................... 249
Animationen, Fades ....................................... 268
Animationen, Slides ........................................ 263
Animationen, Utilities ................................... 270
Animationen, Zeigen und Verstecken ...... 259
Collection, Eigenschaften ............................. 106
Event-Bindung ................................................... 147
Traversierung ...................................................... 113
Verkettbarkeit ...................................................... 67
jQuery-Methoden, destruktive ......................... 68
jQuery-Methoden, terminierende ................... 68
jQuery-Methoden, transparente ...................... 68
jQuery-Objekt ........................................................... 67
Datenspeicherung in ....................................... 191
Erweiterung mit $.extend() ......................... 403
jQuery-Properties ................................................... 68
jQuery-Utilities
$.ajax(), Definition ........................................... 349
$.ajaxSetup(), Definition ............................... 349
$.boxModel, Definition .................................. 387
$.browser, Definition ...................................... 387
$.contains(), Definition .................................. 395
$.data(), Definition ........................................... 193
$.dequeue(), Definition .................................. 290
$.each() ................................................................. 207
$.each(), Definition ......................................... 390
$.extend(), Definition ..................................... 400
$.extend(), jQuery-Objekt ............................. 403
$.extend(), Objektmerging ........................... 400
$.fn.extend(), Definition ................................ 403
$.fx.off, Definition ........................................... 290
$.get(), Definition ............................................. 366
$.getJSON(), Definition ................................... 369
$.getScript(), Definition .................................. 370
$.globalEval(), Definition .............................. 398
$.grep(), Definition ........................................... 392
$.inArray(), Definition .................................... 393
$.isArray(), Definition .................................... 406
$.isEmptyObject(), Definition ..................... 406
$.isFunction(), Definition ............................. 407
$.isPlainObject(), Definition ........................ 407
$.map(), Definition ........................................... 393
$.merge() .............................................................. 397
$.merge(), Definition ...................................... 390
$.noConflict(), Definition ................................ 381
$.noConflict(), Einsatz .................................... 384
$.noConflict(), extreme .................................. 386
$.noConflict(), mit Alias ................................. 386
$.param(), Definition ....................................... 371
$.post(), Definition ........................................... 368
$.proxy(), Definition ........................................ 399
$.pushStack(), Definition ............................... 396
$.queue(), Definition ...................................... 290
$.removeData(), Definition ........................... 193
$.support, Definition ....................................... 388
$.trim() .................................................................. 203
$.trim(), Definition ........................................... 394
$.unique(), Definition ....................................... 391
$.when(), Definition ......................................... 322
Array-Verarbeitung ........................................ 389
Index
932
jQuery-Utilities (Forts.)
DOM-Knotenverarbeitung ........................... 395
Erweiterung von jQuery ............................... 400
Funktionsaufrufe ............................................. 398
Objektverarbeitung ....................................... 400
Stringbearbeitung ........................................... 394
Test auf Datentyp ............................................ 405
JSON ........................................................................... 494
JSON-Daten
laden ..................................................................... 492
JSONP ............................................................... 495, 496
K
keydown() ................................................................ 160
keypress() ................................................................ 160
keyup() ...................................................................... 160
L
last() ............................................................................. 131
length ......................................................................... 110
live() [abgeschafft] ................................................. 172
load() (Ajax) ............................................................. 373
load() (Event) ........................................................... 163
M
MAMP .......................................................................... 35
Media-Query .......................................................... 687
@media-Block .................................................. 689
conforming ......................................................... 691
Einsatz ................................................................. 697
Features ............................................................... 693
Features, aspect-ratio .................................... 695
Features, color .................................................. 695
Features, color-index ..................................... 696
Features, device-aspect-ratio ..................... 695
Features, device-height ................................. 694
Features, device-width .................................. 694
Features, Existenzprüfung ........................... 693
Features, height ............................................... 694
Features, monochrome ................................. 696
Features, orientation ..................................... 695
Features, resolution ........................................ 697
Features, Schwellenwert ............................... 693
Features, Vergleich ......................................... 693
Features, width ................................................. 694
intern .................................................................... 688
Keywords ............................................................. 691
Keywords, and .................................................. 692
Media-Query (Forts.)
Keywords, not .................................................... 692
Keywords, only .................................................. 692
non-conforming ............................................... 691
Query-Aspekt ........................................... 690, 691
Query-Aspekt, Syntax ..................................... 691
Stylesheet-Import ........................................... 688
Syntax .................................................................. 689
Useragenttyp .................................................... 689
verlinkte Stylesheets ...................................... 688
Mobile first ............................................................. 686
mousedown() .......................................................... 159
mouseenter() ........................................................... 159
mouseleave() ........................................................... 159
mousemove() .......................................................... 159
mouseout() ............................................................... 159
mouseover() ............................................................. 159
mouseup() ................................................................ 159
Mozilla Foundation ............................................ 920
N
next() .......................................................................... 118
nextAll() ..................................................................... 123
nextUntil() ................................................................ 124
NodeJS ...................................................................... 808
not() ............................................................................ 130
O
Objektverarbeitung
$.extend() ............................................................ 400
$.extend(), deep ................................................. 401
Merging von Objekten .................................. 400
Test auf leeres Objekt .................................... 406
Test auf plain Object ...................................... 407
off() ............................................................................... 151
offset() ....................................................................... 243
offsetParent() .......................................................... 245
on() .............................................................................. 149
one() ............................................................................ 157
outerHeight() ........................................................... 241
outerWidth() ............................................................ 241
P
Paginierung ............................................................. 524
parent() ...................................................................... 117
parents() .................................................................... 121
parentsUntil() .......................................................... 121
Index
933
Personen
Alsup, Mike ......................................................... 504
Dhakar, Lokesh ................................................. 468
Edwards, Dean ..................................................... 28
Resig, John .................................................... 28, 828
Sullivan, Shaun ................................................... 712
Zaefferer, Jörn .......................................... 498, 828
phpMyAdmin ........................................................... 35
Plugin-Erstellung ................................................. 403
Plugins
Dateiname .......................................................... 655
Function-Plugin ............................................... 659
Function-Plugin, Aufbau ............................. 660
Function-Plugin, CSS-Tool-Beispiel .......... 662
Function-Plugin, Logger-Beispiel ............. 660
Gattungen .......................................................... 659
GitHub .................................................................. 652
History,js .............................................................. 541
jqGrid .................................................................... 530
jqGrid, Konfigurator ........................................ 531
jQuery.cookies ................................................... 536
jQuery.sheet ........................................................ 534
Konfiguration .................................................... 657
Method-Plugin ........................................ 659, 663
Method-Plugin, Aufbau ................................ 664
Method-Plugin, Beispiel CSS-Styles .......... 665
Method-Plugin, Beispiel multiToggle ....... 673
Method-Plugin, Beispiel toggleClick ......... 671
Method-Plugin, Closure ................................ 669
Method-Plugin, Defaultwerte .................... 668
Method-Plugin, Grundregeln ..................... 683
Method-Plugin, mehrere Argumente ...... 666
Method-Plugin, mit Argument .................. 665
Method-Plugin, mit Konfigurations-
objekt ............................................................... 667
Method-Plugin, mit Subroutinen ............... 677
Namespace-Pollution ..................................... 677
Photobox, anwenden ..................................... 654
Photobox, download ...................................... 652
Repository .......................................................... 650
Repository, Download .................................... 652
Repository, Kurzbeschreibungen ............... 652
Repository, Plugin anwenden .................... 654
Repository, Suche im ....................................... 651
Schreiben ............................................................ 658
Tabs ....................................................................... 540
Veröffentlichen ................................................. 658
position() .................................................................. 245
prepend() .................................................................. 218
prependTo() ............................................................. 218
prev() ........................................................................... 119
Promise-Objekt ...................................................... 293
prop() .......................................................................... 185
Q
Querystring ......... 205, 347, 352, 357, 368, 371, 372
queue() ...................................................................... 285
QUnit ......................................................................... 826
Assertions ............................................................ 832
Download ............................................................ 827
Einbindung ......................................................... 827
Methoden, asyncTest() ................................... 844
Methoden, deepEqual() .................................. 837
Methoden, equal() ............................................ 835
Methoden, module() ...................................... 840
Methoden, notDeepEqual() .......................... 837
Methoden, notEqual() .................................... 835
Methoden, notStrictEqual() ......................... 838
Methoden, ok() .................................................. 832
Methoden, start() ............................................. 843
Methoden, stop() .............................................. 843
Methoden, strictEqual() ................................. 838
Methoden, test() ................................................ 831
Modulstatement ............................................. 840
Startstatement .................................................. 843
Stopstatement ................................................... 843
Test, fail ............................................................... 830
Test, pass ............................................................. 829
Testausgabe ....................................................... 829
Testausgabe, Bannerstreifen ...................... 830
Testausgabe, Ergebnisliste ............................ 831
Testausgabe, Summary .................................. 831
Testausgabe, Titelbalken ............................. 830
Testausgabe, Toolbar ...................................... 831
Testausgabe, Useragent ................................. 831
Test-Template .................................................... 828
QUnit, Git-Build ..................................................... 828
R
remove() ................................................................... 219
removeAttr() ........................................................... 184
removeClass() ......................................................... 234
removeData() .......................................................... 193
removeProp() ......................................................... 186
replaceAll() ............................................................... 222
replaceWith() .......................................................... 222
resize() ........................................................................ 165
Responsive Webdesign ...................................... 685
Ausgangslayout ............................................... 697
Breakpoint ......................................................... 698
Index
934
Responsive Webdesign (Forts.)
Desktop-First ..................................................... 698
Mobile-First ........................................................ 699
S
scroll() ........................................................................ 165
scrollLeft() ................................................................ 247
scrollTop() ............................................................... 248
select() ............................................................... 162, 203
selector ........................................................................ 111
Selektorstring
Basisselektoren .................................................... 81
Child E > F, Definition ....................................... 84
Descendant ........................................................... 83
Filter :animated, Definition ........................... 94
Filter :button ...................................................... 195
Filter :checkbox ................................................. 195
Filter :contains, Definition .............................. 95
Filter :empty, Definition .................................. 95
Filter :eq(), Definition ........................................ 93
Filter :even, Definition ...................................... 93
Filter :file .............................................................. 195
Filter :first, Definition ....................................... 92
Filter :first-child ................................................. 101
Filter :first-of-type, Definition .................... 104
Filter :gt(), Definition ........................................ 93
Filter :has(), Definition .................................... 96
Filter :header, Definition ................................. 94
Filter :hidden ............................................ 443, 444
Filter :hidden, Definition ................................ 99
Filter :image ....................................................... 195
Filter :input ......................................................... 195
Filter :last, Definition ........................................ 92
Filter :last-child ................................................. 101
Filter :last-of-type, Definition ..................... 104
Filter :lt(), Definition .......................................... 93
Filter :not() ........................................................... 96
Filter :not(), Definition ..................................... 92
Filter :nth-child(), Definition ........................ 102
Filter :nth-child(even) , Definition ............. 102
Filter :nth-child(even) zu :even ................... 103
Filter :nth-child(odd) , Definition ............... 102
Filter :nth-last-child(), Definition ............... 102
Filter :nth-last-of-type (), Definition ......... 105
Filter :nth-of-type (), Definition .................. 105
Filter :odd, Definition ........................................ 93
Filter :only-child, Definition ......................... 101
Filter :only-of-type, Definition ................... 104
Filter :parent, Definition ................................. 96
Filter :password ................................................. 195
Selektorstring (Forts.)
Filter :radio .......................................................... 195
Filter :reset ........................................................... 195
Filter :submit ....................................................... 195
Filter :text ............................................................. 195
Filter :visible .............................................. 443, 444
Filter :visible, Definition ............................... 100
Filter Attribut, Definition ................................ 86
Filter Attributwert (Anfang), Definition ... 89
Filter Attributwert (Ende), Definition ......... 88
Filter Attributwert (Teilstring),
Definition ......................................................... 88
Filter Attributwert (Teilwert),
Definition ......................................................... 88
Filter Attributwert (Ungleichheit),
Definition ......................................................... 89
Filter Attributwert, Definition ....................... 87
Filter für Formularelemente ........................ 194
Filter lang-Attribut, Definition ..................... 87
Filter Multi-Attribut .......................................... 87
Filter nach Attribut ........................................... 85
Filter nach Inhalt ................................................ 94
Filter nach Position als
Kindknoten .......................................... 100, 104
Filter nach Sichtbarkeit ................................... 98
Filterausdrücke ................................................... 89
Following E ~ F, Definition ............................. 85
Following Sibling E + F, Definition .............. 84
Gruppenselektoren ............................................ 83
ID-Selektor ............................................................. 81
Klassenselektor .................................................... 81
Kontextselektor E F, Definition .................... 83
Mehrfachklassen ................................................ 82
Sonderzeichen, escapen von .......................... 80
Typselektor ............................................................ 81
Universalselektor ................................................ 81
Zustandsfilter :checked ................................. 199
Zustandsfilter :disabled ................................. 198
Zustandsfilter :enabled .................................. 198
Zustandsfilter :selected .................................. 201
Zustandsfilter für Formularelemente ...... 198
serialize() ................................................................. 204
serializeArray() ...................................................... 206
show() ........................................................................ 261
siblings() .................................................................... 124
size() .................................................................... 110, 111
slice() ........................................................................... 132
slideDown() ............................................................. 264
slideToggle() ............................................................ 266
slideUp() ................................................................... 264
stop() .......................................................................... 272
Index
935
Stringbearbeitung
$.trim() ................................................................. 394
Stylesheet, Definition ......................................... 866
submit() ............................................................ 162, 203
T
Tabellen
Paginierung ........................................................ 524
Sortierfunktion .................................................. 524
Sortierung ................................................... 517, 520
Zebra-Tabellen .................................................... 513
Tab-Navigation ..................................................... 436
Test driven development ................................. 826
Tests, alert ................................................................ 821
Tests, console.log .................................................. 822
Tests, Function-Wrap .......................................... 822
text() ................................................................... 112, 188
Textinhalt
lesen ....................................................................... 188
löschen ................................................................. 190
schreiben ............................................................. 190
toArray() ..................................................................... 112
toggle() ....................................................................... 261
toggle() [Removed] ............................................... 158
toggleClass() ............................................................ 235
trigger() ....................................................................... 173
triggerHandler() ...................................................... 175
U
unbind() ...................................................................... 151
undelegate() ............................................................ 168
Unit-Tests .................................................................. 821
JUnit ....................................................................... 825
QUnit ..................................................................... 826
unload() .................................................................... 164
Unobtrusive JavaScript ........................................ 28
Unobtrusive JavaScript, Definition ............... 912
unwrap() ................................................................... 227
V
val() ............................................................................ 208
Viewport ................................................. 246, 862, 918
W
width() ........................................................................ 241
wrap() ......................................................................... 224
wrapAll() ................................................................... 226
wrapInner() ............................................................. 225
X
XAMPP ......................................................................... 35
Z
Zebra-Tabellen ........................................................ 513
Zustandsfilter ......................................................... 198
Wir hoffen sehr, dass Ihnen diese Leseprobe gefallen hat. Gerne dürfen Sie diese Leseprobe empfehlen und weitergeben, allerdings nur vollständig mit allen Seiten. Die vorliegende Leseprobe ist in all ihren Teilen urheberrecht-lich geschützt. Alle Nutzungs- und Verwertungsrechte liegen beim Autor und beim Verlag.
Teilen Sie Ihre Leseerfahrung mit uns!
Frank Bongers lebt und arbeitet in Berlin als freier Webdesigner, Autor und Dozent für Webprogram-mierung. Seit 1999 verfolgt er die Entwicklung der Schlüsseltechnologien XML und XSLT mit großer Auf-merksamkeit.
Maximillian Vollendorf ist selbstständiger Webdesi-gner und kümmert sich in seiner Agentur form + fak-ten um Beratung, Konzeption und Umsetzung von komplexen Webprojekten. Er setzt jQuery seit Jahren produktiv ein.
Frank Bongers, Maximilian Vollendorf
jQuery – Das Praxisbuch935 Seiten, 3. Auflage 2013, mit DVD, 39,90 € ISBN 978-3-8362-2638-7
www.galileocomputing.de/3473
Wissen, wie’s geht.