Leseprobe - Amazon Web Services

Wissen, wie’s geht.
Leseprobe
In diesem Auszug erhalten Sie einen leichten Einstieg in jQuery sowie einen tieferen Einblick in das jQuery UI. Außerdem erhalten Sie
das vollständige Inhalts- und Stichwortverzeichnis aus dem Buch.
»jQuery – Der Einstieg«
»jQuery UI«
Inhaltsverzeichnis
Index
Die Autoren
Frank Bongers, Maximilian Vollendorf
jQuery – Das Praxisbuch
935 Seiten, 3. Auflage 2013, mit DVD, 39,90 €
ISBN 978-3-8362-2638-7
www.galileocomputing.de/3473
Kapitel 3
jQuery – der Einstieg
3
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önnen. Zum Verständnis benötigen Sie zumindest Grundkenntnisse in HTML und JavaScript 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 HTMLElements 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">
41
3
jQuery – der Einstieg
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 HTMLSeite 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 Zeilenumbruch machen, da der Punkt am Beginn der Folgezeile der Script-Engine deutlich macht, dass die Anweisung weitergeht. Überlange Programmzeilen wie diese
können so vermieden werden:
3.2
jQuery einbinden
filtern, bis am Ende das gewünschte Ergebnis im Browser erscheint. Ein Framework
kann Ihnen dieses Kopfzerbrechen ersparen. Werden Sie also aktiv!
3.2
3
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 BegleitDVD 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.
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 dahingehend 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üssen, wie Sie in Ihrem Script mit Bedingungen und Schleifen Ihre Suchergebnisse
42
Abbildung 3.1 Download von »jquery.com«
43
3
jQuery – der Einstieg
3.2.1
3.2
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 deprecated 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 Altlasten 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:
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 herumzuschleppen.
Tabelle 3.1 entfernte Methoden in jQuery 1.9
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 verschiedensten 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 Unterstü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
44
jQuery einbinden
wurde die Performance beträchtlich erhöht. Die Version 1.x wurde aber weiterentwickelt, 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 weiterentwickelt, 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 HTTPAnfragen 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 unmittelbar 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 jquery1.10.2.min.js und der unkomprimierten Version jquery-1.10.2.js bzw. jquery2.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 htdocsVerzeichnisses des lokalen Servers auf Ihrem Rechner ab. (Wir nennen dieses Verzeichnis buchbeispiele – selbstverständlich können Sie auch jeden beliebigen Namen
wählen.)
Wir empfehlen für die Arbeit mit den Beispielen dieses Buchs folgende Ordnerstruktur:
buchbeispiele/
lib/
jquery-x.x.js
45
3
3
jQuery – der Einstieg
jquery-x.x.min.js
_beispiel_/
...
Dies erleichtert die kapitelübergreifend konstante Einbindung des Frameworks, dessen 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 einsetzen (erinnern Sie sich aber daran, für Produktionszwecke auf die minimierte Version der jQuery-Datei zurückzugreifen). Reproduzieren Sie für den Online-Zugriff die
gleiche Verzeichnisstruktur auf Ihrem Produktionsserver. Sie können dann die relativen 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>
46
3.2
jQuery einbinden
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
3
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 Website. 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 JavaScript-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 Argument 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-
47
3
jQuery – der Einstieg
lich die jeweils aktuelle) zur Verfügung stellen. Bei einer stehenden Online-Verbindung 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 Bereitstellung 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 Fallback 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/jquery1.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 konstruieren, 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
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 eigenen JavaScript-Funktionen bzw. -Dateien wiederum stets nach dem Framework eingebunden werden.
Legen Sie nun ein weiteres <script>-Element an, und fügen Sie die jQuery-Funktionen ein. Das gesamte Beispiel sieht jetzt folgendermaßen aus (der jQuery-Code ist
fett hervorgehoben):
<html>
<head>
<title>Listing 2</title>

<style type="text/css">
.green {
color:#009933;
}
</style>

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

<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
48
49
3
3
jQuery – der Einstieg
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 Funktion $(). 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 getElementById() 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 dieses 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 zurü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
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");
});
3
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 beschrieben), 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 Verfü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) gemeinsam 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 jQueryOptionen 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
50
51
3
jQuery – der Einstieg
: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 Knotenliste 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 EventModuls 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 Funktion, 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 diesem Moment gäbe es schlicht noch kein Dokument, aus dem das Script den <p>-Container 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
3.4
Wir haben fertig
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 Elemente 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 vernachlä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 Hintergedanke 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() {
1 Wir könnten hier sogar noch einfacher $('p').addClass('green') schreiben. Schön, nicht?
52
53
3
3
jQuery – der Einstieg
// 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 readyBlock beschränkt, um es einmal deutlich zu sagen.)
Um Übersicht zu schaffen, beschränken Sie sich besser auf nur eine einzige readyAnweisung. 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 Stileigenschaften allein mittels Stylesheet festlegen könnten,2 ohne JavaScript zu Hilfe
zu rufen. Geschenkt – wenn Sie eine solche Manipulation aber mit einem Mausereignis 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?
54
3.5
Das Mausereignis – Bindung eines Click-Events
Was an dieser Stelle kurz erläutert werden soll, ist das Schlüsselwort this. Der Ausdruck 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 handelt 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 HTMLElemente mit einem Click-Event versehen können. Allerdings sollten Sie, um die Benutzerfü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 Weiteren fügen Sie der Klasse green eine Hintergrundfarbe hinzu und setzen die CursorDarstellung 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 wegzulassen und die Klickfunktionalität per JavaScript nachträglich hinzuzufügen. Das HTML
bleibt auf diesem Weg »sauber«.
55
3
3
jQuery – der Einstieg
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");
3.5
Das Mausereignis – Bindung eines Click-Events
$(document).ready( function() {
$('#box p').click( function() {
$(this).addClass("green");
});
});
3
Dass $('#box p') in seiner Kürze dasselbe bewirkt wie der längere Ausdruck docuÜber das Array mit den Textabsatzknoten läuft eine Schleife, die den Click-Event bindet. 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 verschiedene, 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-Eigenschaft. Diese Vorgehensweise ist zwar nicht zeitgemäß, hat aber den Vorteil, dass sie
dann doch browserübergreifend funktioniert:
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.
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";
}
}
}
Unter die Lupe damit:
Dies ist in seiner Kompaktheit durchaus vertretbar. Sollte es noch schöner gehen?
Oder zumindest kürzer?
<html>
<head>
<title>Listing 3</title>
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 ClickEvent-Handler hinzugefügt werden. Schreiben Sie also das Script einfach einmal entsprechend um. Ob Ihnen wieder drei Zeilen reichen werden? Na sicher!
56
// 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:

<style type="text/css">
p {
cursor:pointer;
}
.green {
color:#009933;
background-color:#E2FFEC;
cursor:default;
}
57
3
jQuery – der Einstieg
</style>

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

<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-Ereignisses erfassen, stoßen Sie auf eine weitere Diskrepanz zwischen den JavaScriptImplementierungen 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 Information auswerten kann. Die Informationsstruktur wird als ein JavaScript-Objekt
übergeben, das allgemein als Event-Objekt bezeichnet wird. Es wird von der Zielfunktion durch einen Parameter (meist wird für diesen der Bezeichner e wie event verwendet) 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. Allerdings 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.
58
3.5
Das Mausereignis – Bindung eines Click-Events
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);
};
3
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, feststellen, ob der Funktion etwas übergeben wird oder nicht. Hierfür gibt es einen alten Programmierertrick, der den Übergabeparameter prüft, ohne umständlich auf eine
if-else-Bedingung zurückzugreifen. Sie setzen einfach (sehr viel kürzer) den ternä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 ausgefü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:
59
3
jQuery – der Einstieg
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);
};
}
}
3.6
Give me more! – Verkettung von jQuery-Methoden
// die jQuery-Methoden werden einfach verkettet:
$(selektorausdruck)
.methode1()
.methode2()
.methode3();
3
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.
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, sondern 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 hintereinander 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 angewendet 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!):
60
3.6.1
Den Elternknoten eines Elements manipulieren
Sagen wir, wir wollen das Elternelement von this (den die <p>-Container umgebenden <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 werden. Ebenso soll nur der eben angeklickte <p>-Container die Klasse green besitzen,
von allen anderen muss sie wieder verschwinden. Eine ganze Menge an Randbedingungen! 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 anklickbar:
$("#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, wechseln Sie einfach vom <p>-Container dorthin.
61
3
jQuery – der Einstieg
3.6
Give me more! – Verkettung von jQuery-Methoden
jQuery bietet Ihnen hierfür die Methode parent(). Weil Sie im Baum von einem Element zum anderen klettern (Bergsteiger bezeichnen dies als traversieren), zählt
jQuery die parent()-Methode zu den Tree-traversing-Methoden.
Auf unseren Fall angewendet, schreiben Sie beispielsweise:
Gehen Sie also zum Div:
Speichern Sie aber den Rückgabewert nicht, sondern setzen Sie ihn direkt ein:
$("#box p").click( function() {
$(this).addClass("green").parent();
});
$("#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));
});
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 wiederum mit addClass(). Weichen Sie auf die mehrzeilige Schreibweise aus, und kommentieren 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() übergeben 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 grundlegenden 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 = $("#box p").index(this);
3
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 unordentlich. Außerdem haben Sie nun dreimal ein jQuery-Objekt mit demselben Ausdruck $("#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
var pos = $(knotenliste).index(vergleichsobjekt);
62
63
3
jQuery – der Einstieg
.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 entfernen
obj.removeClass("green").parent().removeClass();
// jetzt Klassen hinzufügen:
$(this).addClass("green").parent()
.addClass("boxColor-" + obj.index(this));
});
3.6
Give me more! – Verkettung von jQuery-Methoden
}
.boxColor-0 {
background-color:#CCCCCC;
}
.boxColor-1 {
background-color:#EEEEEE;
}
.boxColor-2 {
background-color:#999999;
}
</style>
3

<script type="text/javascript"
src="../jquery/jquery-1.10.2.min.js"></script>
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 entfernen
obj.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>

<style type="text/css">
p {
cursor:pointer;
}
.green {
color:#009933;
background-color:#E2FFEC;
cursor:default;
64

<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
65
3
jQuery – der Einstieg
3.7
Zusammenfassung
jQuery stellt Ihnen ein wichtiges Event zur Verfügung, mit dem Sie überprüfen können, 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 miteinander 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öglichen Ballast befreien und diesen zu Ihrer besseren Übersicht in externe Dateien auslagern 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 ausfü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 werden 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.
66
Kapitel 6
jQuery UI
Das Paket jQuery UI ist ein Aufsatz auf das jQuery-Basisframework. Im
Prinzip besteht UI aus Interaktionsroutinen und einer Reihe aufeinander abgestimmter, über CSS-Themes optisch konfigurierbarer Plugins,
die Oberflächenelemente (so genannte »Widgets«) erzeugen.
6
Das jQuery UI steht für jQuery User Interface. Es ist eine Erweiterung des jQueryFrameworks, 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
551
6
jQuery UI
6.1
jQuery UI umfasst eine Sammlung von leicht individualisierbarer, einfach zu konfigurierender Plugins. Im Einzelnen unterscheidet man folgende Bereiche.
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().
6.1.1
Download und Konfiguration von jQuery UI
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.
6
Tabelle 6.1 jQuery UI – Übersicht
6.1
Download und Konfiguration von jQuery UI
jQuery UI kann als Komplettpaket downgeloadet und in vollem Umfang in ein Projekt 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 bevorzugen (die ältere unterstützt noch IE6).
Abbildung 6.3 Der Download Builder von jQuery UI
Der Build ist unterteilt in die Bereiche
Abbildung 6.2 Download auf Startseite http://jqueryui.com/
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.
552
왘
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
553
6
jQuery UI
6.2
Theming von jQuery UI
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 DefaultTheme trägt den Namen »Smoothness«. Es handelt sich um ein extrem zurückhaltendes Farbschema. Alternativ sind auch ausgesprochen bunte Themes erhältlich.
6
Abbildung 6.5 Die ThemeRoller Gallery – links »Smoothness«, rechts »Darkness«
Das gewählte Theme kann als Ausgangspunkt für eine Eigenkreation dienen. Sie können (u. a.) Schriften, Eckenradius, Farben von Kopf- und Fußleisten und anderer
Bereiche frei wählen.
Abbildung 6.4 Auswahl eines Themes im ThemeRoller
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 eigenes Theme zu definieren (planen Sie hierfür etwas Zeit ein) oder anhand einer Gallery
die Wirkung der vordefinierten Themes zu begutachten.
554
Abbildung 6.6 Farbwahl für den Header-Bereich eines eigenen Themes
555
6
jQuery UI
6.2
Das fertige Theme steht nach Abschluss der Bearbeitung als Download zur Verfügung. (Sie wählen dann noch die UI-Komponenten dazu aus.)
Theming von jQuery UI
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 Bereiche zu beschränken oder an- und abzuschalten:
Abbildung 6.7 Downloadbutton des ThemeRollers
<body class="redmond">
... überall im Dokument Theme "Redmond" ...
</body>
Bookmarken Sie Ihren Download
Bookmarken Sie die ThemeRoller-Seite vor dem Download. Sie haben so die Möglichkeit, 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 Bearbeitung wieder upzuloaden (anders als bei jQuery Mobile).
6.2.1
Scoped Themes
Möchten Sie mehrere Themes gleichzeitig in Ihrem Dokument verwenden, oder einfach 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. Vergessen Sie nicht den Punkt vor dem Bezeichner!
<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 Ordnerstruktur 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.
Abbildung 6.8 Angabe einer Basisklasse für einen Theme-Download
556
557
6
6
jQuery UI
6.3
6.4
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 herunterladen.
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 enthä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 zusammengefasst 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 verleihen oder das vorgegebene Aussehen zu verändern. Pro Theme finden Sie hier
einen Unterordner (per Default smoothness/), der die CSS-Dateien und Icon-Grafiken 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).
558
6.4
Einbinden von jQuery UI
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 (zumindest 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 JavaScriptDateien.
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"
559
6
6
jQuery UI
6.5
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
왘
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.
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, umgeben
von 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.
560
Abbildung 6.9 HTML-Struktur mit Widget-Klassen, rechts mit ui-corner-radius
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, umgeben
von 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 ausgewählt«, »inaktiv«).
561
6
6
jQuery UI
왘
ui-state-active
Definiert den aktiven Zustand des UI-Elements.
왘
ui-state-hover
Diese Klasse definiert den Hover-Zustand des UI-Elements.
6.6
Layout-Widgets aus jQuery UI
Alle drei Klassen sind im ThemeRoller konfigurierbar (siehe Abbildung 6.10):
6
Abbildung 6.11 Aktivierbarer Content, links Default, rechts aktiviert
Beachten Sie, dass das Icon seine Darstellung ebenfalls anpasst.
6.6
Abbildung 6.10 Der ThemeRoller als Interface für die Interaktionsklassen
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-default
ui-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 Contentbereich die Klasse ui-state-active toggelt:
$(document).ready(function(){
$('.ui-widget-content').click(function(){
$(this).toggleClass('ui-state-active');
});
})
562
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 dieser 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 signalisieren 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 einfachen
Struktur generiert und kann durch ein von jQuery UI
erzeugtes Icon geschlossen werden.</p>
</div>
563
6
jQuery UI
6.6
Layout-Widgets aus jQuery UI
Der Code zur eigentlichen Erzeugung eines Default-Dialogs ist simpel:
$(document).ready(function() {
$("#meindialog").dialog();
});
Dies bringt folgendes Ergebnis (hier mit Theme »redmond«):
6
Abbildung 6.13 Konfigurierte Dialoge (rechts mit OK-/Cancelbuttons)
Ein Dialog mit Buttons
Auch das Hinzufügen von Buttons ist möglich:
Abbildung 6.12 Der Dialog ist skalier- und verschiebbar.
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ändert werden kann.
564
$(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:
565
6
jQuery UI
6.6
buttons: {
"Ja": function() {
$(this).dialog("close");
},
"Nein": function() {
$(this).dialog("close");
},
"Vielleicht": function() {
$(this).dialog("close");
}
}
Layout-Widgets aus jQuery UI
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:
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, maxWidth
minHeight, 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
// Getter
var draggable =
meinDialog.dialog("option", "draggable"); //-> true
// Setter
meinDialog.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 vornehmen:
<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");
});
});
Tabelle 6.2 Konfigurationsparameter des Dialogs
566
567
6
6
jQuery UI
6.6
Layout-Widgets aus jQuery UI
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 autoOpen:false verhindert, dass der Dialog sofort geöffnet wird.
6
Das (unsichtbare) Widget kann jetzt weiter konfiguriert werden. Dies geschieht durch
wiederholte Anwendung der Dialog-Methode mit erneuter Übergabe eines Konfigurationsobjekts:
meinDialog.dialog({ modal:true,
title:'Generierter Dialog' });
In der Tat wird die bisherige Konfiguration hierdurch ergänzt und nicht überschrieben. 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 Dialoginhalt zu verändern.
Abbildung 6.14 Generierter Dialog – sieht aus wie ein »normaler« Dialog
Methoden des Dialog-Widgets
Ein Dialog verfügt über eine Reihe von Methoden:
Methode
Erläuterung
open
Öffnet den Dialog
close
Schließt den Dialog
destroy
Schließt den Dialog, wenn er offen ist und entfernt das WidgetHTML 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 obersten Z-Index
Tabelle 6.3 Methoden des Dialog-Widgets
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 Dialog
meinDialog.dialog("close"); // schließt ihn
Falsch ist hingegen:
meinDialog.open() oder meinDialog.dialog().open();
568
569
6
jQuery UI
6.6.2
6.6
Progressbar
Das Progressbar-Widget erzeugt einen Fortschrittsbalken, wie er als Feedback während eines Ladevorgangs o. Ä. eingesetzt wird. Es kann ganz einfach auf ein bestehendes HTML-Element aufgesetzt werden, auf das dann die Progressbar-Methode
angewendet wird:
Layout-Widgets aus jQuery UI
<style>
.ui-progressbar .ui-progressbar-value {
background-image: url(../css/images/pbar-ani.gif);
}
</style>
<div id="pbar"></div>
$(document).ready(function() {
$("#pbar").progressbar();
});
6
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.
Parameter
Wert (Default)
Erläuterung
disabled
boolean (false)
Deaktivierung
value
Number (0)
Stand des Fortschrittszeigers
Abbildung 6.15 Einfache Progressbar mit value 50 %
Tabelle 6.4 Konfigurationsparameter der Progressbar
Events für die Progressbar
In der Regel wird man aber einen Wert value übergeben, der den Stand des Fortschrittsbalkens in Prozent angibt – ein Wert von »0« bis »100« wird akzeptiert:
$(document).ready(function() {
$("#pbar").progressbar({ value:50 });
});
Die Progressbar besitzt drei spezifische Arten von Event-Handlern, an die man bei
der Konfiguration Callback-Funktionen binden kann.
Ereignis
Erläuterung
create
Das Widget wird initialisiert.
Dies erweitert die HTML-Struktur wie folgt (ARIA-Klassen weggelassen):
change
Der Wert des value-Parameter ändert sich.
<div id="pbar"
class="ui-progressbar ui-widget
ui-widget-content ui-corner-all">
<div style="width:50 %;"
class="ui-progressbar-value
ui-widget-header ui-corner-left">
</div>
</div>
complete
Der Wert des value-Parameters hat 100 erreicht.
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-progressbarvalue eingesetzt (siehe vorausgehendes Codebeispiel):
570
Tabelle 6.5 Events der Progressbar
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.')
571
6
jQuery UI
6.6
};
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.
Layout-Widgets aus jQuery UI
// Meldung darstellen
$("#msg").html(data.message);
// Solange 100 % nicht erreicht sind ...
if(data.status!=100) {
simulateprogress();
}
}
}); // Ende $.ajax
})() // Start der Funktion simulateprogress als AIF
});
6
Hier der Scriptcode:
$(function(){
var pconf = {
value:0,
complete: function(){
console.log('Vorgang abgeschlossen.')
}
};
// Progessbar initialisieren
var pbar = $("#pbar").progressbar(pconf);
// AIF-Function (startet automatisch):
(function simulateprogress() {
$.ajax({
// Server liefert JSON
dataType: "json",
// URL erhält stets aktuellen Status
url: './progress03_ajax.php?status=' +
pbar.progressbar("option", "value" ),
// Nach erfolgreichem Abschluss des Requests
success: 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 Progressbar
pbar.progressbar("option",
"value",
data.status);
572
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 generieren
sleep($zufall);
// Prozessfortschritt als Prozentwert
$php_array['status'] = $_GET['status']+($zufall * 3);
// Bei 100 % ist Schluss
if($php_array['status'] > 100) {
$php_array['status'] = 100;
}
// Ausgabe der Nachricht
if($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-Objekt
echo json_encode($php_array);
Die Konfiguration kann noch durch Callbacks bei Initialisierung und Wertänderung
ergänzt werden:
var pconf = {
value:0,
create: function(){
573
6
jQuery UI
6.6
console.log('Progressbar initialisiert.');
},
change: function(){
console.log('Der value hat sich geändert:',
pbar.progressbar("option", "value"))
},
complete: function(){
console.log('Vorgang abgeschlossen.');
}
};
Layout-Widgets aus jQuery UI
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>
6
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.16 Ajax-Progressbar mit animiertem Hintergrund und Events
6.6.3
Akkordeon-Widget
Das Akkordeon-Widget gehört zu den Content-Widgets. Es handelt sich um ein LayoutElement, 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.
574
Abbildung 6.17 Einfaches Akkordeon ohne weitere Konfiguration
575
6
jQuery UI
6.6
Layout-Widgets aus jQuery UI
Es kommt allein auf die Struktur an
Parameter
Wert (Default)
Erläuterung
Allein die paarige Struktur ist entscheidend. Es ist nicht erforderlich, dass der Header-Bar-Container wirklich eine Überschrift ist. Jedes beliebige Blockelement funktioniert, also auch DIV- oder P-Container ebenso wie jede Überschrift von H1 bis H6.
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
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>
Object
icons
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();
});
6
Nennt das Icon im Header-Bar:
icons: {
"header": "ui-icon-plus",
"headerSelected": "ui-icon-minus"
}
Tabelle 6.6 Konfigurationseigenschaften des Akkordeons (Forts.)
6.6.4
Konfiguration des Akkordeons
Auch das Akkordeon kann über ein Konfigurationsobjekt konfiguriert werden. Folgende Eigenschaften existieren:
Parameter
Wert (Default)
Erläuterung
active
Number (0)
Nennt das aktuell offene Panel (ArrayIndex; oberstes Panel hat Index 0).
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«).
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"
Abbildung 6.18 Tab-Widget mit vier Tabs
Tabelle 6.6 Konfigurationseigenschaften des Akkordeons
576
577
6
jQuery UI
Zum Erstellen genügt die Anwendung der Methode .tabs() auf dem Widget-Container (ü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>
6.7
Formular-Widgets aus jQuery UI
<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!
Pro Content-Pane muss ein List-Item mit Link vorhanden sein, das einen FragmentIdentifier 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>
Abbildung 6.19 Tab-Inhalte werden per Ajax geladen
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>
578
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 konfigurierbar oder nicht ausreichend stylebar). Auch in Zeiten, wo beispielsweise der
579
6
6
jQuery UI
6.7
Formular-Widgets aus jQuery UI
Datepicker-Input nativ verfügbar ist, haben diese Widgets nach wie vor einige
Berechtigung.
Eigentlich hat man hier mehrere Vorteile:
왘
Unabhängigkeit von JavaScript
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.
왘
Native Validierung im Rahmen der HTML5-Formularvalidierung
6.7.1
왘
왘
Mangelhafte Unterstützung:
Implementierung bislang nur in aktuellen Opera- und (teilweise) Chrome-Browsern (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.
Datepicker
Ein spezielles Formularelement zur Eingabe von Datumswerten verfügbar zu haben,
birgt enorme Vorteile. Zwei davon stehen im Vordergrund:
왘
Den Vorteilen stehen aber auch gravierende Nachteile gegenüber:
Reglementierung des Eingabeformats:
Der Datums-String liegt in einem Format vor, wie es für die Verarbeitung erforderlich 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">
Das jQuery-Widget Datepicker
Der jQuery-Weg ist bereits altbekannt – ein HTML-Element (sinnvollerweise ein Formular-Input) wird per ID ausgewählt und die UI-Methode datepicker() darauf angewendet:
<input type="text" id="datepicker">
Hier der Code:
$(document).ready( function() {
$("#datepicker").datepicker();
});
Abbildung 6.20 Nativer HTML5-Date-Input in Opera (links) und Chrome (rechts)
Abbildung 6.21 jQuery UI-Datepicker in Opera (links) und Chrome (rechts)
580
581
6
6
jQuery UI
Lokalisierung des Datepickers
Die Oberfläche des Widgets ist per Default in Englisch gehalten. Eine andere Lokalisierung 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!
6.7
Formular-Widgets aus jQuery UI
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 Lokalisierung 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>
...
6
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 Scripteinbindung zu verändern, können Sie die Lokalisierung als Argument bei der Generierung 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
Abbildung 6.22 Datepicker, deutsch lokalisiert
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ß.
Legen Sie noch eine weitere Datei, jquery.ui.datepicker-fr.js, in das lokale i18n-Verzeichnis. Nun können Sie die Lokalisierung zwischen deutscher und französischer
Ausgabe umstellen.
...
<script type="text/javascript"
src="../js/jquery-ui.js"></script>
582
583
6
jQuery UI
6.7
Formular-Widgets aus jQuery UI
<script type="text/javascript"
src="../js/i18n/jquery-ui-i18n.js"></script>
...
Konfiguration des Datepickers
Nun können Sie die Lokalisierung (wie auch immer) anpassen – hier geschieht dies
über folgende Select-Option:
Setzen Sie sie stattdessen nachträglich über den Option-Setter:
<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()]
);
});
Optionen für einen Datepicker können (derzeit) nicht sinnvoll im Rahmen eines
Konfigurationsobjekts während der Widget-Erstellung gesetzt werden.
// Widget erstellen:
var dp = $("#datepicker").datepicker();
// Widget konfigurieren:
dp.datepicker("option", "showAnim", "slideDown");
6
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!
Abbildung 6.24 Datepicker mit changeYear- und changeMonth-Option
Das Ausgabeformat des Datums steuern Sie über die dateFormat-Option:
Abbildung 6.23 Datepicker nach Umschaltung auf finnische Lokalisierung
584
var dp = $("#datepicker").datepicker();
dp.datepicker( "option", "dateFormat", "yy-mm-dd" );
585
6
jQuery UI
6.7
API des Datepickers
Formular-Widgets aus jQuery UI
Der Callback erhält als erstes Argument evt ein Event-Objekt, als zweites Argument
ui den Slider, dessen value direkt auslesbar ist.
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.
6
Das Basis-Element eines Sliders ist gewöhnlich ein Div-Container, auf den die UIMethode 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 HandlerFunktionen 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);
}
});
586
Abbildung 6.25 Slider mit Wertausgabe
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,
587
6
jQuery UI
6.7
Formular-Widgets aus jQuery UI
max : 20,
step : 2,
slide:function(evt, ui){
out.html(ui.value);
}
});
6
Abbildung 6.27 Ein Slider als Range-Regler mit zwei Eckwerten
API des UI-Sliders
Die komplette API des UI-Sliders finden Sie hier:
http://jqueryui.com/slider
Abbildung 6.26 Slider mit min, max (zwischen 10 und 20), sowie step
6.7.3
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] +'€.');
}
});
588
Button
Das Buttonwidget von jQuery UI erzeugt klickbare Button-Elemente auf der Grundlage 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.
589
6
jQuery UI
Einfacher Button
Einen einfachen Button erreichen Sie, indem Sie die UI-Methode auf ein passendes
HTML-Element anwenden – hier ist es ein Buttoncontainer:
6.7
Formular-Widgets aus jQuery UI
Eine Übersicht über die verfügbaren Icons und ihre Namen erhalten Sie im ThemeRoller (Ansicht gekürzt, siehe Abbildung 6.29).
<button id="meinButton">Ein einfacher Button</button>
Hier der Code dazu:
$(document).ready( function() {
$("#meinButton")
.button()
.click(function( event ) {
console.log("Button geklickt.");
});
});
6
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.29 Icons für jQuery UI
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 korrespondierenden 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.28 Ein Buttonwidget mit Icon
590
591
6
jQuery UI
6.7
Formular-Widgets aus jQuery UI
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.
Abbildung 6.30 Togglebutton (im Toggle-Zustand)
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 anzuwenden:
<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>
Als zu Grunde liegendes HTML-Element dient ein Text-Input, das von einem DivContainer 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});
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.32 Autocomplete – alle Items mit »B« werden gezeigt
API des Autocomplete-Widgets
Die komplette API des Autocomplete-Widgets finden Sie hier:
Abbildung 6.31 Buttonarray aus Checkboxen (zweiter Button selektiert)
592
http://api.jqueryui.com/autocomplete
593
6
Inhalt
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
1.3.2
1.3.3
1.3.4
1.3.5
Gründe für das Entstehen von Frameworks ...............................................
Nochmals – was ist ein Framework? .............................................................
Aufgaben eines Frameworks ............................................................................
Aktuelle Frameworks für JavaScript ..............................................................
Frameworks – ein Rückblick .............................................................................
25
25
26
27
28
1.4
jQuery – viel mit wenig erreichen ...............................................................................
29
2
Den Arbeitsplatz einrichten
31
Rechner und Betriebssystem .........................................................................................
31
2.1.1
2.1.2
2.1.3
Windows .................................................................................................................
Mac OS X .................................................................................................................
Linux .........................................................................................................................
32
32
32
Browser ....................................................................................................................................
33
2.2.1
2.2.2
2.2.3
2.2.4
2.2.5
Internet Explorer ..................................................................................................
Google Chrome .....................................................................................................
Firefox ......................................................................................................................
Safari ........................................................................................................................
Opera ........................................................................................................................
33
33
33
34
35
2.3
Webserver ..............................................................................................................................
35
2.4
IDEs und Editoren ................................................................................................................
36
2.1
2.2
5
Inhalt
Inhalt
3
jQuery – der Einstieg
41
3.1
Vergleich: JavaScript mit und ohne jQuery .............................................................
41
3.2
jQuery einbinden .................................................................................................................
43
3.2.1
3.2.2
3.2.3
3.2.4
3.2.5
jQuery 1.x oder 2.x – was denn nun? .............................................................
jQuery online und offline nutzen ...................................................................
jQuery lokal einbinden .......................................................................................
jQuery aus dem Google Online Repository einbinden ............................
Das Beste aus beiden Welten ..........................................................................
44
45
45
47
48
3.3
Das erste richtige Beispiel mit jQuery ........................................................................
48
3.4
Wir haben fertig ..................................................................................................................
52
3.5
3.6
3.7
Accessoren – Eigenschaften der Collection .............................................................
106
4.4.1
Methode .each(callback) ....................................................................................
107
4.4.2
4.4.3
4.4.4
4.4.5
4.4.6
4.4.7
4.4.8
Methode .get() und .get(index) .......................................................................
Methode .index(subject) ...................................................................................
Methode .size() .....................................................................................................
Eigenschaft .length ..............................................................................................
Eigenschaften .selector und .context ............................................................
Methode .toArray() ..............................................................................................
Methode .is() ..........................................................................................................
109
110
110
110
111
112
112
54
Traversieren – ausgehend von Collections ..............................................................
113
Zunächst – die »aufdringliche« Variante .....................................................
Etwas weniger aufdringlich, bitte! .................................................................
54
55
4.5.1
4.5.2
Was ist und wann benötigt man eine »Traverse«? ..................................
jQuery-Methoden zur Achsen-Traverse .......................................................
113
114
3.5.3
Ein unaufdringlicher Dreizeiler, dank jQuery .............................................
56
Give me more! – Verkettung von jQuery-Methoden ..........................................
60
3.6.1
Den Elternknoten eines Elements manipulieren ......................................
61
Zusammenfassung .............................................................................................................
66
4.5.3
4.5.4
4.5.5
4.5.6
jQuery-Methoden zur erweiterten Achsen-Traverse ...............................
Filtern von Collections ........................................................................................
Aufheben einer Filterung ..................................................................................
Kopieren einer Collection ..................................................................................
119
127
133
134
Events und Event-Handling ............................................................................................
137
4.6.1
4.6.2
4.6.3
4.6.4
4.6.5
4.6.6
4.6.7
4.6.8
Das Event-Objekt in JavaScript ........................................................................
Das jQuery-Event-Objekt ...................................................................................
Die jQuery-Methoden zu Event-Bindung .....................................................
Direktes Binden und Lösen von Event-Listenern .......................................
Convenience-Methoden für direkte Event-Bindung ................................
Shortcut-Methoden für direkte Event-Bindungen ...................................
Delegierendes Binden und Lösen von Event-Listenern ...........................
Triggern und Erzeugen von Events ................................................................
137
139
147
148
156
158
167
173
Inhalte, Attribute, Datenspeicher ................................................................................
179
67
4.1
Im Zentrum – das jQuery-Objekt .................................................................................
67
4.1.1
Drei Arten von jQuery-Methoden ...................................................................
68
Die Funktion $() und ihre Signatur ..............................................................................
69
4.2.1
4.2.2
4.2.3
4.2.4
4.2.5
Leerer Aufruf ohne Argument .........................................................................
DOM-Elemente, jQuery-Objekt oder Plain Object als Argument .........
HTML-String als Argument ...............................................................................
Callback-Funktion als Argument ....................................................................
CSS-Selektor als Argument ...............................................................................
69
69
73
76
77
CSS-Selektoren für die primäre Collection ..............................................................
80
4.3.1
4.3.2
4.3.3
4.3.4
4.3.5
4.3.6
4.3.7
81
82
82
85
89
94
97
6
4.5
98
100
104
Das Mausereignis – Bindung eines Click-Events ...................................................
jQuery – die Übersicht
4.3
4.4
Sichtbarkeitsfilter ................................................................................................
Child-Filter – nach Position ...............................................................................
Child-Filter – nach Typ und Position ..............................................................
3.5.1
3.5.2
4
4.2
4.3.8
4.3.9
4.3.10
Die Basisselektoren .............................................................................................
Mehrfachklassenselektor ..................................................................................
Gruppen- und Kontextselektoren ..................................................................
Attributselektoren ...............................................................................................
Basis-Filterausdrücke für Selektoren .............................................................
Inhaltsfilter .............................................................................................................
Filter für Formularelemente .............................................................................
4.6
4.7
4.7.1
Lesen, Ändern und Entfernen von Attributen und
DOM-Eigenschaften ............................................................................................
Manipulation von Text- und Elementinhalt ...............................................
Beliebige Daten an DOM-Elementen speichern ........................................
181
186
191
Formulare verarbeiten mit jQuery ..............................................................................
194
4.8.1
4.8.2
4.8.3
4.8.4
4.8.5
194
198
202
204
207
4.7.2
4.7.3
4.8
Filterausdrücke für Formularelemente ........................................................
Filter für Zustände von Formularinputs .......................................................
Binden von Events an Formularelemente ...................................................
Serialisierung von Formulardaten ..................................................................
Extraktion von Formularfeldwerten ..............................................................
7
Inhalt
Inhalt
4.9
DOM-Manipulation ............................................................................................................
211
4.9.1
4.9.2
4.9.3
4.9.4
Methoden zum Einfügen von Knoten ..........................................................
Entfernen von Knoten ........................................................................................
Ersetzen von Knoten ..........................................................................................
Wrapping-Methoden .........................................................................................
213
218
221
223
4.10 CSS und Style-Eigenschaften .........................................................................................
229
4.10.1
4.10.2
4.10.3
4.10.4
4.10.5
Methoden für das class-Attribut ....................................................................
CSS-Eigenschaften manipulieren ..................................................................
Abmessungen von Containern .......................................................................
Position von Containern ...................................................................................
Scrollen und Scrollposition ..............................................................................
230
238
240
242
246
4.11 Animationen .........................................................................................................................
249
4.11.1
Animationen ohne jQuery – CSS3-Transitions und
CSS3-Animations .................................................................................................
249
jQuery und CSS-Animationen .........................................................................
jQuery-Animationen – Zeigen und Verstecken .........................................
Slides – Zeigen und Verstecken mit Animation ........................................
Fades – Zeigen und Verstecken über Opacity ............................................
Utility-Methoden für Animationen ...............................................................
Animation mehrerer CSS-Parameter ............................................................
Die Queue – Warteschlange für Effekte ......................................................
Vollständiges Beispiel zu .queue() .................................................................
Utilities für Queue und Animationen ...........................................................
255
259
263
268
270
274
283
287
290
4.12 Deferreds und Promises ...................................................................................................
291
4.11.2
4.11.3
4.11.4
4.11.5
4.11.6
4.11.7
4.11.8
4.11.9
4.11.10
8
4.12.1
4.12.2
Erzeugen eines Deferred-Objekts ..................................................................
Erzeugen eines Promise-Objekts ....................................................................
292
293
4.12.3
4.12.4
4.12.5
4.12.6
4.12.7
4.12.8
4.12.9
4.12.10
4.12.11
4.12.12
4.12.13
4.12.14
Test des Zustands des Deferred-Objekts .....................................................
Das Deferred auflösen oder zurückweisen: Resolve, Reject, Notify ...
Bindung von Callbacks an Deferreds und Promises ................................
Methode deferred.always() ..............................................................................
Methode deferred.done() .................................................................................
Methode deferred.fail() .....................................................................................
Methode deferred.progress() ..........................................................................
Callback-Bindung mit neuem Promise als Rückgabewert ....................
Methode deferred.then() ..................................................................................
Methode deferred.pipe() ...................................................................................
Deferreds im Einsatz mit Animationen .......................................................
$.when() – Zusammenfassen mehrerer Promises ...................................
299
300
306
307
308
308
309
310
311
316
316
322
4.13 Managen von Callback-Ketten mit $.Callbacks() ..................................................
4.13.1
4.13.2
4.13.3
4.13.4
4.13.5
4.13.6
4.13.7
4.13.8
4.13.9
4.13.10
328
Callback-Liste erstellen mit $.Callbacks() ....................................................
Callback-Liste erweitern – callbacks.add() ..................................................
Callback-Liste reduzieren – callbacks.remove() ........................................
Callback-Liste überprüfen – callbacks.has() ...............................................
Callbacks feuern – callbacks.fire() und callbacks.fireWith() .................
Callback-Liste leeren – callbacks.empty() ...................................................
Callback-Liste stilllegen – callbacks.disable() ............................................
Die Flags der Callback-Liste ..............................................................................
Callback-Liste verriegeln – callbacks.lock() .................................................
Ein Click-Counter mit Callback-Liste .............................................................
328
329
330
330
331
333
333
333
336
338
4.14 Ajax & JSON ...........................................................................................................................
341
4.14.1
4.14.2
4.14.3
4.14.4
Grundlagen zu Ajax ............................................................................................
Daten und Datentypen für Ajax .....................................................................
jQuery und Ajax ...................................................................................................
Low-level Ajax-Ultilities ....................................................................................
342
346
348
348
4.14.5
4.14.6
4.14.7
Das jqXHR-Objekt als Promise ........................................................................
Ajax-Utilities und Convenience-Requests ..................................................
Globale Handler-Methoden .............................................................................
361
365
377
4.15 Utilities des $-Objekts – praktisches Dies und Das ..............................................
380
4.15.1
4.15.2
4.15.3
4.15.4
4.15.5
4.15.6
4.15.7
4.15.8
Konfliktvermeidung mit anderen Frameworks .........................................
Browser- und Feature-Detection ...................................................................
Utilities zur Array-Verarbeitung .....................................................................
Utility zur Stringbearbeitung ..........................................................................
Utilities für DOM-Knotenverarbeitung ........................................................
Utilities für Funktionsaufrufe .........................................................................
Objektverarbeitung und Erweiterung von jQuery ...................................
Test-Utilities ..........................................................................................................
381
387
389
394
395
398
400
405
4.16 Zusammenfassung und Ausblick .................................................................................
408
5
jQuery – der Praxiseinsatz
409
5.1
Wie organisiere ich meine Scripte ...............................................................................
410
5.1.1
5.1.2
5.1.3
5.1.4
5.1.5
411
412
414
416
418
Die klassische Notation .....................................................................................
Verwendung von Objekt-Literalen ................................................................
Das Modul-Muster ..............................................................................................
Sinn und Unsinn dieses Beispiels ...................................................................
Zusammenfassung .............................................................................................
9
Inhalt
Inhalt
5.2
5.3
5.4
5.5
5.6
5.7
5.8
10
Schönere Navigationen ....................................................................................................
418
5.2.1
5.2.2
5.2.3
5.2.4
5.2.5
5.2.6
5.2.7
Die FlyOut-Navigation ........................................................................................
Flyout mit CSS-Transitions ................................................................................
Flyout-Menü mit dem Plugin-Transit ............................................................
Die Tabs: Karteireiter ..........................................................................................
Das Akkordeon ......................................................................................................
Das Tree-Menu ......................................................................................................
Zusammenfassung ..............................................................................................
419
430
434
436
441
445
451
Von Tooltips und Links ......................................................................................................
451
5.3.1
5.3.2
451
454
Tooltips ....................................................................................................................
Links sammeln, im Footer ausgeben .............................................................
6
6.1
6.2
jQuery UI
551
Download und Konfiguration von jQuery UI ..........................................................
552
6.1.1
553
Der Download Builder von jQuery UI ............................................................
Theming von jQuery UI .....................................................................................................
554
6.2.1
Scoped Themes .....................................................................................................
556
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
6.3
Spiel mit Bildern ..................................................................................................................
456
Layout-Widgets aus jQuery UI ......................................................................................
563
5.4.1
5.4.2
Galerie I: Einfache Slideshow ...........................................................................
Galerie II: Imagebox ............................................................................................
459
468
6.6.1
6.6.2
Dialog-Widget .......................................................................................................
Progressbar ............................................................................................................
563
570
5.4.3
Die Original Lightbox ..........................................................................................
478
Ajax mit jQuery einsetzen ...............................................................................................
480
6.6.3
6.6.4
Akkordeon-Widget ..............................................................................................
Tab-Widget ............................................................................................................
574
577
5.5.1
5.5.2
Laden von HTML-Elementen ............................................................................
Laden von JSON ....................................................................................................
481
489
5.5.3
5.5.4
Laden von JSONP ..................................................................................................
Zusammenfassung ..............................................................................................
495
497
Formulare beherrschen mit jQuery .............................................................................
497
5.6.1
5.6.2
Formulare validieren ...........................................................................................
Formulare senden mit Ajax ..............................................................................
498
504
5.6.3
5.6.4
Datepicker ..............................................................................................................
Nächste Ausbaustufe: Autocomplete ...........................................................
507
509
Flexible Tabellen mit jQuery ..........................................................................................
513
5.7.1
5.7.2
5.7.3
5.7.4
5.7.5
Die Zebra-Tabelle .................................................................................................
Die Tabelle sortieren ...........................................................................................
Paginierung von Tabellen ..................................................................................
Grid-Plugins ...........................................................................................................
Zusammenfassung ..............................................................................................
513
517
524
529
534
Von Browsern und Fenstern ...........................................................................................
535
5.8.1
5.8.2
5.8.3
5.8.4
Cookies ....................................................................................................................
Die History des Browsers ...................................................................................
Scrolling ...................................................................................................................
Für faule Browser: Lazy-Load ...........................................................................
535
541
545
548
5.8.5
Zusammenfassung ..............................................................................................
550
6.7
Formular-Widgets aus jQuery UI ..................................................................................
579
6.7.1
6.7.2
Datepicker ..............................................................................................................
Slider .........................................................................................................................
580
586
6.7.3
6.7.4
Button ......................................................................................................................
Autocomplete ........................................................................................................
589
593
Effekte und Interaktionen aus jQuery UI .................................................................
594
6.8.1
6.8.2
6.8.3
6.8.4
6.8.5
6.8.6
Die Effekte aus jQuery UI ...................................................................................
Interaktionen aus jQuery UI .............................................................................
Drag & Drop mit Draggables und Droppables ...........................................
Sortierbare Elemente – Sortables ...................................................................
Größenveränderbare Elemente – Resizables ..............................................
Auswählbare Elemente – Selectables ...........................................................
596
603
610
623
635
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
7.1.2
7.1.3
651
652
654
6.8
Suche im Repository ............................................................................................
Ein Plugin downloaden ......................................................................................
Ein Plugin anwenden ..........................................................................................
11
Inhalt
Inhalt
7.2
7.3
7.4
Selbst ist der Mann – eigene Plugins schreiben ....................................................
658
7.2.1
Plugin-Gattungen: Functions und Methods ...............................................
659
jQuery-Function-Plugin ....................................................................................................
659
7.3.1
7.3.2
7.3.3
660
660
662
Function-Plugin – der Aufbau ..........................................................................
Beispiel für ein Function-Plugin – ein einfacher Logger .........................
Beispiel für ein Function-Plugin – Ein CSS-Tool .........................................
8.5.6
8.5.7
8.5.8
Media-Feature: color-index ..............................................................................
Media-Feature: monochrome ..........................................................................
Media-Feature: resolution ................................................................................
696
696
697
Einsatz der Media-Query im Responsive Layout ...................................................
697
8.6.1
Anpassung des Layouts anhand der Viewport-Breite .............................
698
Responsive Design und jQuery .....................................................................................
700
8.7.1
8.7.2
8.7.3
8.7.4
Reihenfolge von Containern ändern .............................................................
Bilder in verschiedenen Auflösungen ...........................................................
Slider mit Touch ....................................................................................................
Maurerhandwerk mit JavaScript und jQuery .............................................
700
702
703
706
8.8
Zusammenfassung und Ausblick .................................................................................
708
9
Going mobile mit jQuery
709
8.6
8.7
jQuery-Method-Plugin ......................................................................................................
663
7.4.1
Method-Plugin – der Aufbau ...........................................................................
664
Method-Plugin – Setzen von CSS-Styles ...................................................................
665
7.5.1
7.5.2
7.5.3
7.5.4
7.5.5
7.5.6
Method-Plugin mit Argument .........................................................................
Method-Plugin mit mehreren Argumenten ...............................................
Method-Plugin mit Konfigurationsobjekt ...................................................
toggleClick – Ein Ersatz für die Event-Methode .toggle() .......................
multiToggle – Noch ein Ersatz für die Event-Methode .toggle() ..........
Method-Plugin mit Subroutinen ....................................................................
665
666
667
671
673
677
7.6
Das jQuery-Method-Plugin rekapituliert .................................................................
683
9.1
Ein Seitenblick auf die mobile Welt ............................................................................
709
7.7
Zusammenfassung und Ausblick .................................................................................
684
9.2
Emulatoren und IDEs für Mobilgeräte .......................................................................
711
9.2.1
9.2.2
Emulatoren und IDEs für iPhone .....................................................................
Dreamweaver CC für jQuery Mobile ..............................................................
711
714
Ins mobile Web mit jQuery Mobile .............................................................................
716
9.3.1
9.3.2
Download oder Einbinden von der Website ...............................................
Der jQuery Mobile Download Builder ...........................................................
718
719
Ein erstes Dokument mit jQuery Mobile ..................................................................
720
9.4.1
9.4.2
jQuery Mobile-Dateien im Header einbinden ............................................
Grundstrukturen im Body .................................................................................
720
721
9.4.3
9.4.4
9.4.5
Mehrere Seiten in einem Dokument .............................................................
Eine einfache Navigation ..................................................................................
Navigationen in der Toolbar .............................................................................
722
723
725
9.5
Seitenübergänge .................................................................................................................
727
9.6
Listenbuttons ........................................................................................................................
729
9.6.1
9.6.2
9.6.3
9.6.4
Listviews mit Count-Bubbles ...........................................................................
Listenbuttons in Splitviews ..............................................................................
Listview mit Splitansicht – verbesserte Version ........................................
Seiten per Ajax ansprechen ..............................................................................
730
731
733
735
Navbar-Button-Leisten .....................................................................................................
736
9.7.1
9.7.2
736
737
7.5
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
8.3.2
Media-Angabe für verlinkte Stylesheets ......................................................
Media-Angabe für Stylesheet-Import ...........................................................
688
688
8.3.3
Media-Angabe innerhalb eines Stylesheets ...............................................
688
8.4
8.5
12
Syntax der CSS-Media-Angabe .....................................................................................
689
8.4.1
8.4.2
8.4.3
Typangabe des User Agents .............................................................................
Query-Aspekt der Media-Query ......................................................................
Keywords für Media-Queries ...........................................................................
689
691
691
Media-Features des User Agents .................................................................................
693
8.5.1
8.5.2
8.5.3
8.5.4
8.5.5
694
694
695
695
695
Media-Features: width, height ........................................................................
Media-Features: device-width, device-height ............................................
Media-Feature: orientation ..............................................................................
Media-Features: aspect-ratio, device-aspect-ratio ...................................
Media-Feature: color ...........................................................................................
9.3
9.4
9.7
Navbar im Header ................................................................................................
Navbar im Content-Bereich ..............................................................................
13
Inhalt
Inhalt
9.7.3
9.7.4
9.7.5
Navbar im Footer-Bereich .................................................................................
Button-Leisten und Data-Grid .........................................................................
Button-Leisten mit Icons ...................................................................................
738
738
741
9.8
Layoutraster – Inhalte anordnen .................................................................................
744
9.9
Collapsibles – Platzsparende Inhalte .........................................................................
746
9.9.1
9.9.2
Collapsibles ............................................................................................................
Collapsible-Sets ....................................................................................................
746
747
9.10 Formulare mit jQuery Mobile ........................................................................................
749
9.10.1
9.10.2
9.10.3
9.10.4
9.10.5
9.10.6
Progressiv erweiterte Formularelemente ....................................................
Native Formularelemente .................................................................................
Formularelemente im Einzelnen ....................................................................
Formulare versenden ..........................................................................................
Plugin-Methoden .................................................................................................
Zurücksetzen (Degradieren) von Formularelementen ............................
750
751
751
756
756
759
9.11 Themes und Swatches – Farben und Hintergründe ............................................
759
9.11.1
Eigene Themes – »Roll your own« mit dem ThemeRoller ......................
9.12 Das mobileinit-Event .........................................................................................................
11 QUnit – Testen mit jQuery
11.1 Ideen zum Testen von JavaScript .................................................................................
11.1.1
11.1.2
11.1.3
821
821
Das alert-Statement ............................................................................................
Die Konsole als Ausgabemedium ...................................................................
Eine Funktion durchleuchten ...........................................................................
821
822
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 ...............................................................................................................................
765
832
11.5.1
11.5.2
ok() ............................................................................................................................
equal() und notEqual() .......................................................................................
832
835
11.5.3
11.5.4
deepEqual() und notDeepEqual() ...................................................................
strictEqual() und notStrictEqual() ...................................................................
837
838
771
11.6 Module – mehrere Tests unter einer Haube ...........................................................
840
9.12.1
9.12.2
Enhancement des jQuery Mobile-Dokuments ...........................................
Die Optionen des $.mobile-Konfigurationsobjekts ..................................
772
775
11.7 Testen asynchroner Anwendungen ............................................................................
842
9.12.3
HTML5-data-Attribute in jQuery Mobile ......................................................
779
9.13 Events in jQuery Mobile ...................................................................................................
11.7.1
11.7.2
Das Kontextproblem bei asynchronen Tests ..............................................
Explizites Stoppen und Starten des Tests ....................................................
842
843
792
11.7.3
Testlauf in Wartestellung – asyncTest() .......................................................
844
9.14 Methoden von jQuery Mobile .......................................................................................
798
11.8 Zusammenfassung und Ausblick .................................................................................
846
9.15 Zusammenfassung .............................................................................................................
806
Anhang
847
10 Der eigene jQuery-Build
807
A
10.1 Voraussetzungen zum Erstellen eines Builds .........................................................
HTML und CSS .......................................................................................................................
847
Trennungen – Struktur, Präsentation, Verhalten .....................................
HTML – Beschreibung der Struktur ................................................................
847
849
Aufbau von HTML-Dokumenten .....................................................................
CSS – Beschreibung der Präsentation ...........................................................
852
864
JavaScript und DOM ...........................................................................................................
887
B.1
B.2
JavaScript – Beschreibung des Verhaltens ..................................................
Die Synthese – das Document Object Model .............................................
887
915
Index ........................................................................................................................................................
921
10.1.1
Installation von Git ..............................................................................................
809
A.1
A.2
10.1.2
10.1.3
Installation von NodeJS .....................................................................................
Installation von Grunt und Bower ..................................................................
811
812
A.3
A.4
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
14
808
B
15
Index
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, ownerDocument ......................................................... 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
921
Index
Index
$.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
922
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, contentTypeEigenschaft ..................................................... 351
Konfiguration, context-Eigenschaft ......... 351
Konfiguration, converters-Eigenschaft ... 353
Konfiguration, crossDomainEigenschaft ..................................................... 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, jsonpCallbackEigenschaft ..................................................... 357
Konfiguration, jsonp-Eigenschaft .............. 357
Konfiguration, mimeType-Eigenschaft ... 359
Konfiguration, password-Eigenschaft .... 359
Konfiguration, processData-Eigenschaft 352
Ajax-Request (Forts.)
Konfiguration, scriptCharsetEigenschaft ................................................... 360
Konfiguration, statusCodeEigenschaft ................................................... 360
Konfiguration, success-Callback ................ 355
Konfiguration, timeout-Eigenschaft ....... 360
Konfiguration, traditionalEigenschaft ................................................... 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
923
Index
Index
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
924
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
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
925
Index
Index
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
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
F
I
fadeIn() ..................................................................... 270
fadeOut() .................................................................. 270
fadeTo() .................................................................... 268
fadeToggle() ............................................................ 268
filter() ......................................................................... 129
find() ........................................................................... 120
first() ............................................................................ 131
focus() ............................................................... 161, 203
focusin() ........................................................... 161, 203
index() ........................................................................ 110
innerHeight() ........................................................... 241
innerWidth() ............................................................ 241
insertAfter() .............................................................. 215
insertBefore() ........................................................... 217
iPhone-Emulator
iBBDemo 2 ............................................................ 712
MobiOne ............................................................... 714
is() ......................................................................... 112, 231
926
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
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
927
Index
Index
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, allowCrossDomainPages ................................................................ 777
Konfiguration, defaultDialogTransition ....................................................... 778
Konfiguration, defaultPageTransition .... 778
Konfiguration, gradeA ................................... 779
Konfiguration, hashListeningEnabled .... 777
Konfiguration, ignoreContentEnabled ... 778
Konfiguration, linkBindingEnabled .......... 778
Konfiguration, minScrollBack .................... 778
Konfiguration, ns ............................................. 776
Konfiguration, pageLoadErrorMessage ........................................................... 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
928
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
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
929
Index
Index
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
930
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
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
931
Index
Index
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
932
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
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 Konfigurationsobjekt ............................................................... 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
933
Index
Index
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
934
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
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
935
Wissen, wie’s geht.
Frank Bongers lebt und arbeitet in Berlin als freier
Webdesigner, Autor und Dozent für Webprogrammierung. Seit 1999 verfolgt er die Entwicklung der
Schlüsseltechnologien XML und XSLT mit großer Aufmerksamkeit.
Maximillian Vollendorf ist selbstständiger Webdesigner und kümmert sich in seiner Agentur form + fakten um Beratung, Konzeption und Umsetzung von
komplexen Webprojekten. Er setzt jQuery seit Jahren
produktiv ein.
Frank Bongers, Maximilian Vollendorf
jQuery – Das Praxisbuch
935 Seiten, 3. Auflage 2013, mit DVD, 39,90 €
ISBN 978-3-8362-2638-7
www.galileocomputing.de/3473
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 urheberrechtlich geschützt. Alle Nutzungs- und Verwertungsrechte liegen beim Autor
und beim Verlag.
Teilen Sie Ihre Leseerfahrung mit uns!

Zugehörige Unterlagen

Web-Entwickler - PHP / JavaScript (m/w)

Leseprobe - Amazon Web Services

Zugehörige Unterlagen

Dieses Dokument Sammlung (en)

Dieses Dokument gespeichert

Schlagen Sie uns vor, wie wir StudyLib verbessern können