Leseprobe - Amazon S3...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

LeseprobeIn diesem Auszug erhalten Sie einen leichten Einstieg in jQuery so-wie einen tieferen Einblick in das jQuery UI. Außerdem erhalten Sie das vollständige Inhalts- und Stichwortverzeichnis aus dem Buch.

Frank Bongers, Maximilian Vollendorf

jQuery – Das Praxisbuch935 Seiten, 3. Auflage 2013, mit DVD, 39,90 € ISBN 978-3-8362-2638-7

www.galileocomputing.de/3473

»jQuery – Der Einstieg« »jQuery UI«

Inhaltsverzeichnis

Index

Die Autoren

Wissen, wie’s geht.

http://www.galileocomputing.de/3473?GPP=lpn

41

3

Kapitel 3

jQuery – der Einstieg

Sie werden sehen, wie Ihnen jQuery Arbeit abnimmt. Sie schreiben

weniger Code, um zum Ergebnis zu kommen. Und Sie werden sehen,

welche Wege es gibt, jQuery in Ihr Projekt zu inkludieren.

In diesem Kapitel erfahren Sie einiges über die Grundlagen von jQuery und über die

Hintergründe des jQuery-Objekts und seines Einsatzes. Sie lernen, wie Sie mit jQuery

Elemente Ihrer HTML-Seite selektieren und anschließend Aktionen ausführen kön-

nen. Zum Verständnis benötigen Sie zumindest Grundkenntnisse in HTML und Java-

Script sowie – was in Zusammenhang mit jQuery beinahe noch wichtiger ist – ein

Grundverständnis von CSS und der Formulierung von CSS-Selektoren. Sollten Sie

hier einen Nachschlag benötigen, raten wir Ihnen, zuerst die letzten beiden Kapitel

zu lesen: Anhang A, »HTML und CSS«, und Anhang B, »JavaScript und DOM«. Lassen

Sie uns nun also einfach beginnen!

3.1 Vergleich: JavaScript mit und ohne jQuery

Um zu verdeutlichen, wie jQuery dem User tagtäglich viel Arbeit abnimmt und ihm

so das Leben im Web erleichtert, möchten wir hier zunächst mit einem Beispiel

anfangen, das – noch ohne die Hilfe von jQuery – die Manipulation eines HTML-

Elements vornimmt.

Angenommen, Sie wollen, abhängig von seinem Textinhalt, einem von mehreren

<p>-Absätzen die Klasse green zuweisen und ihm damit eine neue Schriftfarbe geben.

Dann betrachten Sie dazu zunächst einmal den Inhalt des <script>-Elements:

<html><head><title>Listing 1</title>

<style type="text/css">.green {

color:#009933;}

</style><script type="text/javascript">

3 jQuery – der Einstieg

42

window.onload = function() {var elements = document.getElementById("box")

.getElementsByTagName("p");for (var i = 0; i < elements.length; i++) {

if (elements[i].firstChild.data == "Zweiter Absatz") {

elements[i].className = "green";}

}}

</script></head><body>

<div id="box"><p>Erster Absatz</p><p>Zweiter Absatz</p><p>Dritter Absatz</p>

</div></body></html>

Listing 3.1 Schriftfarbe ändern ohne jQuery

Was in diesem Scriptabschnitt passiert, ist Folgendes: Sobald die komplette HTML-

Seite geladen ist (window.onload), wird eine Kollektion mit allen Absätzen ("p")

erstellt, die sich innerhalb des Containers mit der ID ("box") befinden.

Zum Zeilenumbruch vor dem Punktoperator

Wichtig: Sie dürfen vor dem Punktoperator in Objekten praktischerweise einen Zei-

lenumbruch machen, da der Punkt am Beginn der Folgezeile der Script-Engine deut-

lich macht, dass die Anweisung weitergeht. Überlange Programmzeilen wie diese

können so vermieden werden:

var elements = document.getElementById("box").getElementsByTagName("p");

Diese Kollektion wird in einer Variablen elements gespeichert. Anschließend werden

über eine for-Schleife und eine if-Anweisung alle gefundenen <p>-Container dahin-

gehend geprüft, ob sie einen Textknoten mit dem Inhalt »Zweiter Absatz« enthalten.

Wenn dem so ist, wird dem betreffenden Absatz die Klasse green hinzugefügt und

damit dessen Schriftfarbe auf »Grün« gesetzt. Sie brauchen an dieser Stelle nicht zu

sehr in die Tiefe zu gehen, um sich klarzumachen, dass Sie hier genau überlegen müs-

sen, wie Sie in Ihrem Script mit Bedingungen und Schleifen Ihre Suchergebnisse

3.2 jQuery einbinden

43

3

filtern, bis am Ende das gewünschte Ergebnis im Browser erscheint. Ein Framework

kann Ihnen dieses Kopfzerbrechen ersparen. Werden Sie also aktiv!


Es versteht sich, dass das jQuery-Framework, um es nutzbar zu machen, zunächst in

eine HTML-Seite eingebunden werden muss: Dem ausführenden Browser müssen

die Funktionalitäten zur Verfügung stehen, um die besonderen Eigenschaften und

Methoden von jQuery zu interpretieren. Zunächst sollten Sie sich, falls dies nicht

bereits geschehen ist, eine aktuelle Version von jQuery besorgen – dies können Sie

direkt bei der offiziellen jQuery-Website http://jquery.com/download tun. Laden Sie

von dort sowohl die minimierte Produktionsversion als auch die Developer-Version

von jQuery herunter. Dort finden Sie auch das Plugin migrate.js.

Downloaden oder doch nicht downloaden?

Sie finden die erforderlichen jQuery-Dateien auch im Ordner jquery auf der Begleit-

DVD zu diesem Buch. Alle Beispiele basieren auf Version 1.10.x oder 2.0.x. Sollte es in

Zukunft eine wesentlich neuere jQuery-Version geben, sind Probleme jedoch nicht

auszuschließen. Verwenden Sie dann die Version aus dem Begleitmaterial.

Es gibt nun also, wie bereits gesagt, zwei verschiedene Versionen von jQuery. Einmal

die Version uncompressed, d. h. die unkomprimierte Datei, und einmal die Version

compressed, also eine verkleinerte Datei. Sind Sie daran interessiert, einmal einen

Blick in das »Getriebe« von jQuery zu werfen? Dann nehmen Sie die unkomprimierte

Datei zur Hand. Im Normalfall werden Sie das, selbst als Entwickler, kaum tun wollen,

sondern nur die angebotenen Funktionen im Produktiveinsatz nutzen. In diesem

Fall verwenden Sie die kompaktere compressed-Datei, deren Größe weniger als die

Hälfte der unkomprimierten Datei beträgt.

Abbildung 3.1 Download von »jquery.com«


44

3.2.1 jQuery 1.x oder 2.x – was denn nun?

Mit dem Erscheinen von jQuery 1.9 wurden die ersten von ein paar harten Schnitten

vorgenommen. Es wurden Methoden und Eigenschaften, die schon lange als depre-

cated markiert waren, aus dem Framework entfernt. Daneben wurden noch diverse

Rückgabewerte von Methoden verändert, das Pseudo-Event Hover wurde entfernt

(nicht zu verwechseln mit .hover(), das bleibt erhalten), und einige andere kleine Alt-

lasten wurden über Bord geworfen. Einen vollständigen Artikel zum Thema des

jQuery-Teams finden Sie hier: http://jquery.com/upgrade-guide/1.9

Im Folgenden sehen Sie eine Auflistung der wichtigsten Änderungen, den entfernten

Methoden:

Aber was tun Sie, wenn Sie eine der entfernten oder geänderten Methoden weiterhin

in einem Projekt benötigen? Wenn Sie beispielsweise ein älteres Plugin aus verschie-

densten Gründen weiter nutzen müssen? Sich ärgern? Nein. Dafür haben die Macher

von jQuery das migrate.js Plugin entwickelt. Binden Sie dieses Plugin unterhalb des

eigentlichen Frameworks ein, und Ihnen stehen alle Methoden und Eigenschaften

der »alten« API zur Verfügung. Ein Beispiel einer Einbindung erfolgt weiter unten.

Zum anderen wurde in der Version 2.0 ein harter Schnitt vorgenommen, die Unter-

stützung für ältere Browser wurde gekappt. Die Version 2.0 unterstützt lediglich den

IE ab der Version 9.x und höher sowie bei Google Chrome, Firefox und Opera die

aktuelle und eine Vorgängerversion. Safari wird ab der Version 5.x unterstützt. Es

wurden sämtliche Browserquirks und Hacks konsequent herausgenommen, so

Methode Grund

.toggle(fn,fn,...) Verwechslungsgefahr mit gleichlautender Methode

.toggle([duration] [,complete ]), die ein Element sichtbar

und unsichtbar schaltet.

jQuery.browser() Seit der Version 1.3 deprecated, da es dem Prinzip der feature

detection widerspricht.

.live() .live() wurde zu Gunsten des moderneren Konzeptes von

.on() entfernt.

.die() .die() wurde auf Grund des moderneren Konzeptes von

.off() entfernt (siehe .live()).

jQuery.sub() Die Zahl der Anwendungsfälle, für die diese Methode genutzt

werden könnte, ist zu gering, um sie weiter mit herumzu-

schleppen.

Tabelle 3.1 entfernte Methoden in jQuery 1.9


45

3

wurde die Performance beträchtlich erhöht. Die Version 1.x wurde aber weiterentwi-

ckelt, derzeit, Stand Oktober 2013, sind wir hier bei der Version 1.10 angelangt. Diese

beiden Versionen 1.x und 2.x werden in der Zukunft weiterhin parallel weiterentwi-

ckelt, so dass Sie auch nach wie vor ältere Systeme unterstützen können. Und das

migrate.js Plugin erhält Ihnen auch noch ältere Features; was will man mehr. Das

jQuery-Team hat eben auch an die gedacht, die ältere Browser oder ältere Scripte

bedienen müssen und einen intelligenten Upgradepfad bereitgestellt.

3.2.2 jQuery online und offline nutzen

Vielleicht zunächst eine kleine Klärung im Vorfeld – benötigen wir zum Test von

jQuery eigentlich einen Webserver oder nicht? Man könnte antworten, im Prinzip

nein. Jedoch kann in diesem Fall dann auch nur ein Teil der jQuery-Funktionalität

genutzt werden: Einige der Tricks, die das Framework zur Verfügung stellt, basieren

auf der Nutzung von Ajax, was in der Regel einen Server voraussetzt, der die HTTP-

Anfragen interpretiert, die das Framework dann absetzen wird.

Benötigen wir kein Ajax, kann auch direkt aus dem Dateisystem heraus (sozusagen

»offline«) gearbeitet werden: Sie können beispielsweise ein HTML-Dokument unmit-

telbar aus dem Verzeichnis ins Browserfenster ziehen, um ein Script zu testen.

Ansonsten müssten Sie einen lokalen Webserver zur Verfügung haben und die

Übungsdateien in dessen Dokumentenverzeichnis ablegen (siehe Abschnitt 2.3,

»Webserver«).

3.2.3 jQuery lokal einbinden

Sie benötigen von jeder HTML-Seite, in der Sie jQuery nutzen möchten, einen Link

zur jQuery-Datei. Sie haben die Wahl zwischen der minimierten Version jquery-

1.10.2.min.js und der unkomprimierten Version jquery-1.10.2.js bzw. jquery-

2.0.3.js und jquery-2.0.3.min.js. Für die lokalen Übungen in diesem Buch macht

es keinen Unterschied, ob Sie eine unkomprimierte oder eine komprimierte Version

verwenden. Legen Sie einfach beide Dateien in einem Unterverzeichnis des htdocs-

Verzeichnisses des lokalen Servers auf Ihrem Rechner ab. (Wir nennen dieses Ver-

zeichnis buchbeispiele – selbstverständlich können Sie auch jeden beliebigen Namen

wählen.)

Wir empfehlen für die Arbeit mit den Beispielen dieses Buchs folgende Ordner-

struktur:

buchbeispiele/lib/

jquery-x.x.js


46

jquery-x.x.min.js_beispiel_/...

Dies erleichtert die kapitelübergreifend konstante Einbindung des Frameworks, des-

sen Dateien im Ordner jquery abgelegt werden (dies ist der Bezeichner, den wir für

dieses Buch gewählt haben). Parallel zu diesem Ordner legen Sie einen oder mehrere

Ordner mit Ihren Test- und Übungsdateien an. Ressourcen, die von den HTML-Seiten

benötigt werden (CSS- und Grafikdateien), platzieren Sie sinnvollerweise ebenfalls in

die Übungsordner.

Dies ermöglicht eine stets gleichförmige Formulierung des Links zur jQuery-Datei im

Dokumentkopf der Übungsdateien:

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

Eine ähnliche Anordnung empfiehlt sich auch für Projekte, in denen Sie jQuery ein-

setzen (erinnern Sie sich aber daran, für Produktionszwecke auf die minimierte Ver-

sion der jQuery-Datei zurückzugreifen). Reproduzieren Sie für den Online-Zugriff die

gleiche Verzeichnisstruktur auf Ihrem Produktionsserver. Sie können dann die rela-

tiven Links zum Framework unverändert beibehalten.

Das migrate.js Plugin binden Sie folgendermaßen ein:

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

<script type="text/javascript"src="../lib/jquery-migrate-1.2.1.js"></script>

Moderne HTML5 Seiten und auch HTML5 Templates wie HTML5 Boilerplate sind dazu

übergegangen, die Scripte vor dem Ende des Dokuments einzubinden:

<html><head>...</head><body><navigation>...<navigation><article>...</article><script type="text/javascript"

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

src="../lib/jquery-migrate-1.2.1.js"></script><script type="text/javascript"

src="../js/eigenes-script.js"></script></body></html>


47

3

Die Begründung ist, dass das Laden und das Ausführen der Seite auf diese Weise

beschleunigt wird. Entscheiden Sie selbst, beide Methoden sind gültig.

3.2.4 jQuery aus dem Google Online Repository einbinden

Eine Alternative zur lokalen Einbindung von jQuery ist die Nutzung des Google

Online Repository, das ein frei zur allgemeinen Nutzung zur Verfügung stehendes

Framework anbietet. (Gedacht ist dieses Repository für den Live-Betrieb einer Web-

site. Sie können das Prinzip jedoch auch für die Buchbeispiele einsetzen, sofern Ihr

Rechner jederzeit über eine Online-Verbindung verfügt.)

Das Content Delivery Network (CDN) von Google hält neben jQuery auch andere Java-

Script-Frameworks bereit, wie Prototype, MooTools, Dojo und Ext JS. Im Falle von

jQuery 1.10.2 geschieht die Einbindung wie folgt:

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

Man kann auch einen Schritt weiter gehen und jQuery über den load-Befehl der

Google JavaScript API einbinden. Hierfür muss allerdings zunächst eben diese API

verlinkt werden. Anschließend steht die Methode google.load() zur Verfügung, mit

der jQuery ebenfalls bereitgestellt werden kann.

Deren erstes Argument bestimmt das Framework. Achtung: Der zweite Parameter,

der die gewünschte Version nennt, ist obligatorisch und kann daher nicht einfach

weggelassen werden! Mit der folgenden Anordnung wird die minimierte Version

von jQuery 1.10.2 aus dem Google CDN geladen:

<script type="text/javascript"src="http://www.google.com/jsapi"></script>

<script type="text/javascript">google.load("jquery", "1.10.2");

</script>

Wollen Sie die unkomprimierte Variante einbinden, fügen Sie noch ein drittes Argu-

ment hinzu (achten Sie auf die geschweiften Klammern):

<script type="text/javascript">google.load("jquery", "1.10.2",{uncompressed:true});

</script>

Pro und Kontra

Diese Lösung hat wie so vieles ihre Licht- und Schattenseiten. Als Vorteil könnte man

werten, dass man nicht gezwungen ist, jQuery auf dem eigenen Server abzulegen. Die

Anbieter werden zudem meist mehrere Versionen des Frameworks (darunter sicher-


48

lich die jeweils aktuelle) zur Verfügung stellen. Bei einer stehenden Online-Verbin-

dung steht auch einer Nutzung von Repositories im Rahmen von ansonsten lokalen

Tests nichts im Wege.

Ein Nachteil ist, dass die Funktion der eigenen Website von der konstanten Bereit-

stellung des Frameworks durch eine andere Partei abhängig ist. Bei Yahoo oder

Google kann man immerhin davon ausgehen, dass der Service dauerhaft zur Verfü-

gung stehen wird. Nicht vergessen sollte man jedoch, dass die Einbindung einer

extern gehosteten Datei auch ein Protokollieren der Nutzung der eigenen Website

durch den Provider des Frameworks ermöglicht (ohne dies unterstellen zu wollen).

Ob man sich darauf einlassen möchte, sei dem Einzelnen überlassen. (Wir werden in

diesem Buch die konventionelle Einbindung verwenden und jQuery aus dem lokalen

Verzeichnis einbinden.)

3.2.5 Das Beste aus beiden Welten

Es gibt auch die Möglichkeit, jQuery über das Google CDN zu laden, und einen Fall-

back für den Fall bereitzustellen, wenn kein Internetzugang zur Verfügung steht:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script>window.jQuery || document.write('<script src="../lib/jquery-1.10.1.min.js"><\/script>')</script>

Sie laden jQuery über das Google CDN, anschließend fragen Sie mit window.jQuery ab,

ob das jQuery-Objekt vorhanden ist. Ist es das nicht, schreiben Sie per JavaScript mit

document.write() den lokalen Pfad zum Framework. So ist sichergestellt, dass auch

beim lokalen Testen oder bei Netzwerkfehlern seitens Google immer eine Version

geladen werden kann.

3.3 Das erste richtige Beispiel mit jQuery

Legen Sie die heruntergeladene Framework-Datei wie beschrieben in ein Verzeichnis

parallel zu dem, in dem die HTML-Seite gespeichert ist. Bevor Sie nun das Script kon-

struieren, müssen Sie erst das Framework in die Seite einbinden. Ähnlich einem

externen Stylesheet wird die Datei in das Hauptdokument inkludiert.

Im ersten <script>-Element geben Sie den Pfad zur Bibliothek an:

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


49

3

Wo genau soll die Einbindung im Quelltext erfolgen?

Unser Tipp: Wenn Sie das jQuery-Framework im <head>-Verzeichnis inkludieren,

dann stets nach der Einbindung der CSS-Dateien. Achten Sie darauf, dass Ihre eige-

nen JavaScript-Funktionen bzw. -Dateien wiederum stets nach dem Framework ein-

gebunden werden.

Legen Sie nun ein weiteres <script>-Element an, und fügen Sie die jQuery-Funktio-

nen ein. Das gesamte Beispiel sieht jetzt folgendermaßen aus (der jQuery-Code ist

fett hervorgehoben):

<html><head>

<title>Listing 2</title>

<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>



Listing 3.2 Schriftfarbe ändern mit jQuery


50

Das jQuery-Objekt als Factory-Funktion

Es springt sofort ins Auge, dass gerade einmal drei Zeilen Code benötigt werden, um

das gesteckte Ziel zu erreichen. Das fundamentale Konstrukt in jQuery ist die Funk-

tion $(). Es handelt sich dabei um eine so genannte Factory-Funktion – sie wird so

bezeichnet, weil sie das erzeugt, was anschließend als Arbeitsgrundlage dient.

Zum Vergleich: Die im vorigen Listing eingesetzten DOM-Funktionen getElement-

ById() und getElementsByTagName() holen nur existierende Bestandteile des Doku-

ments, verändern diese aber nicht. Sie müssen mit den »natürlichen« Eigenschaften

der gefundenen Dokumentknoten zurechtkommen.

Anders bei der $()-Funktion. Diese Funktion erhält zwar auch ein Argument, das

bestimmt, womit die Funktion arbeitet. Hier ist es jedoch das gesamte Dokument –

Sie werden aber auch noch andere Fälle kennenlernen. Allerdings begnügt sich die

$()-Funktion nicht damit, sich das bezeichnete Objekt zu beschaffen, sie stattet die-

ses mit weiteren Fähigkeiten aus. Diese neuen Fähigkeiten umgeben das alte Objekt

wie ein Mantel – man spricht daher von Wrapping. Das so erzeugte neue Objekt wird

(unabhängig davon, welche Art von Objekt als Grundlage fungiert) als jQuery-Objekt

bezeichnet.

Mit dem Aufruf von $() wird also immer ein neues jQuery-Objekt erzeugt und zu-

rückgegeben. Danach steht es mit seinen ganzen Methoden und Eigenschaften für

das weitere Scripting zur Verfügung. Eine dieser Methoden nennt sich .ready().

Sie wird allerdings speziell dann verwendet, wenn das jQuery-Objekt aus einem

document-Objekt gebildet wurde (zugegeben, ein Sonderfall).

Jetzt wissen Sie für den Anfang genug – analysieren wir nun den hervorgehobenen

Code aus dem vorigen Listing Zeile für Zeile:

1. Sobald das Dokument fertig geladen wurde, ...

$(document).ready( ... );

2. ... führen Sie die in ready() befindliche anonyme Funktion aus, ...

$(document).ready( function() {...

});

3. ... die besagt: Bilden Sie aus allen <p>-Elementen mit dem Inhalt 'Zweiter Absatz'

innerhalb des <div>-Containers mit der ID box ein jQuery-Objekt:

$(document).ready( function() {$("#box p:contains('Zweiter Absatz')")...

});


51

3

4. Wenden Sie nun auf dieses die Funktion addClass() an, um den <p>-Containern

die Klasse green hinzuzufügen (wir machen wieder einen Zeilenumbruch vor dem

Punktoperator – das ist nicht nur für das Listing im Buch praktisch):

$(document).ready( function() {$("#box p:contains('Zweiter Absatz')").addClass("green");

});

Das war’s. Sie brauchen sich nicht mit Schleifen und Bedingungen herumschlagen.

Stattdessen navigieren Sie mittels des Selektors "#box p:contains('Zweiter

Absatz')" direkt zum gewünschten Element, verkapseln es als jQuery-Objekt und

verändern es. (Übrigens, der Filterpseudoselektor :contains() ist eine Dreingabe von

jQuery, die Ihnen in reinem CSS nicht zur Verfügung steht.)

Die gewünschte Veränderung geschieht durch den Aufruf von addClass(). Mit dieser

Methode können Sie beliebige CSS-Klassen an beliebige HTML-Elemente binden.

(Dass die Klasse mit ihren Eigenschaften vorher im Stylesheet definiert werden

muss, versteht sich von selbst.)

Warum muss es ein jQuery-Objekt sein?

Die Verkapselung in ein jQuery-Objekt ist in diesem Fall der springende Punkt. Den

<p>-Container bekämen Sie zwar auch anders zu fassen (wie zuvor bereits beschrie-

ben), aber er wäre eben nur ein <p>-Container. Versuchten Sie, auf ihn direkt die

Methode addClass("green") anzuwenden, hätten Sie Pech. Anders sieht es aus,

wenn der <p>-Container »jQuerifiziert« wurde (in ein jQuery-Objekt verpackt ist). In

diesem Fall stehen ihm unmittelbar alle Methoden von jQuery zur Verfügung.

Das jQuery-Objekt als Knotenliste

Wir haben das jQuery-Objekt als Wrapper für ein Einzelobjekt kennengelernt. Mit

Hilfe dieser Verkapselung stehen Ihnen für dieses Objekt alle jQuery-Tricks zur Ver-

fügung. Ein Einzelobjekt war es aber schlicht deshalb, weil der an $() übergebene

Ausdruck lediglich ein Objekt als Ergebnis hatte.

Wenn dies aber nicht so eindeutig ist, was dann? Ganz einfach – jQuery macht aus

allen übergebenen Objekten (nehmen wir mal an, es seien Elementknoten) gemein-

sam ein jQuery-Objekt. Dieses nimmt dann, wie man sagt, die Eigenschaften einer

»Liste« an. Im herkömmlichen JavaScript spricht man von einer Knotenliste (node

list). In jQuery läuft dies darauf hinaus, dass für jedes Element der Liste alle jQuery-

Optionen zur Verfügung stehen.

Legen wir einmal mehrere Elemente im jQuery-Objekt ab, indem wir jetzt alle

Absätze innerhalb des Containers #box selektieren. Hierfür genügt es, den Filter


52

:contains('Zweiter Absatz') wegzulassen.1 Damit ist die Einschränkung auf den

zweiten Absatz aufgehoben:

$(document).ready(function() {$("#box p").addClass("green");

});

Das Ergebnis ist wenig spektakulär, vielleicht sogar als »intuitiv vorhersehbar« zu

bezeichnen: Alle Textabsätze erhalten die grüne Schrift und Hintergrundfarbe.

Obwohl ... das bedeutet doch, dass jQuery alle Elemente seiner Liste nimmt und auf

jedes einzelne die angehängte Methode anwendet? Genau: jQuery arbeitet eine Kno-

tenliste Item für Item ab, und zwar vollautomatisch. Behalten Sie das im Hinterkopf

– Stichwort: implizite Schleife.

Welches Argument erwartet die Funktion $()?

An dieser Stelle möchten wir kurz auf die Frage eingehen, was für ein Argument die

$()-Funktion eigentlich erwartet. Wir haben gesagt, dass es sich um CSS-Selektoren

handelt, teilweise noch mit jQuery-spezifischen Erweiterungen. Es geht aber auch

noch mehr, wie Sie später noch sehen werden. Bleiben wir jedoch zunächst bei CSS.

jQuery unterstützt im Rahmen der $()-Funktion nahezu alle CSS-Selektoren, von CSS

1.0 bis CSS 3.0. Dies macht es für Webworker mit CSS-Erfahrung leichter, sich in

jQuery einzuarbeiten. Wenn nicht, in Anhang A, »HTML und CSS«, stellen wir Ihnen

die wichtigsten Grundbegriffe vor.

3.4 Wir haben fertig

Gehen wir kurz auf die .ready()-Methode im folgenden Ausdruck ein:

$(document).ready(fn)

Bei .ready() handelt es sich um eine grundlegende Methode innerhalb des Event-

Moduls von jQuery: Eine Funktion fn, die an .ready() übergeben wird, führt jQuery

aus, sobald das Dokument geladen wurde. In unserem Fall ist es eine anonyme Funk-

tion, die die Dokumentabfrage enthält.

Der Grund für dieses Manöver ist folgender: Wenn Sie die Anweisung $("#box

p").addClass("green") unmittelbar auswerteten, erzielten Sie keine Treffer – in die-

sem Moment gäbe es schlicht noch kein Dokument, aus dem das Script den <p>-Con-

tainer holen könnte. Das ist nämlich noch gar nicht geschrieben. Also muss

abgewartet werden. JavaScript bietet uns mit window.onload zu diesem Zweck bereits

1 Wir könnten hier sogar noch einfacher $('p').addClass('green') schreiben. Schön, nicht?

3.4 Wir haben fertig

53

3

von Haus aus einen passenden Event-Handler an. Ist fn die aufzurufende Funktion,

schreiben Sie mit seiner Hilfe:

window.onload = fn;

Den gleichen Dienst leistet der onload-Event-Handler im <body>-Element. Wo ist der

Unterschied zum (zudem komplizierter zu schreibenden) Ansatz von jQuery? Der

Unterschied ist das Timing: Mit window.onload wird die Funktion fn erst aufgerufen,

wenn alle Abhängigkeiten des Dokuments aufgelöst sind, beispielsweise die Grafiken

geladen wurden. Die Grafiken brauchen Sie aber gar nicht, wenn Sie nur an die Ele-

mente wollen!

Der Vorteil von $(document).ready(fn) besteht darin, dass das Script bereits dann die

Callback-Funktion fn ausführt, wenn die für Sie relevante HTML-Struktur bereitsteht.

Das DOM ist dann zwar nur »weitestgehend geladen«, aber Sie können auch schon

früher darauf zugreifen. Ein Problem ist das nicht – das Laden der Bilder können wir

bei der Analyse und Manipulation des HTML-Dokuments in vielen Fällen vernach-

lässigen.

Sie könnten beliebig oft $(document).ready(fn) in einer Seite ausführen lassen. Im

Endeffekt mag das aber ein wenig unübersichtlich werden. Hier besteht der Hinterge-

danke primär darin, Funktionscode aus dem ready-Block auszulagern, um diesen

möglichst einfach zu halten (sonst könnten die Funktionsblöcke von tuDies() und

tuJenes() auch ebenso im ready-Block selbst stehen – der würde dann allerdings

möglicherweise ziemlich lang werden):

// definieren, was tuDies() machen soll:function tuDies() {

$("div p").click(function(){ ... });}

// erster ready()-Block:$(document).ready( function() {

// und tuDies() aufrufen, wenn’s so weit ist:tuDies();

});

// definieren, was tuJenes() machen soll:function tuJenes() {

$("ul li").click(function(){ ... });}

// zweiter ready()-Block:$(document).ready(function() {


54

// und tuJenes() aufrufen, wenn’s so weit ist:tuJenes();

});

Wie gesagt, das geht, bietet aber keine Vorteile. Eine Funktion aus dem ready-Block

auszulagern, ist jedoch immer eine gute Sache. Sie sehen auch, dass Sie dort ebenfalls

die jQuery-Schreibweise verwenden dürfen. (Dies ist also nicht etwa auf den ready-

Block beschränkt, um es einmal deutlich zu sagen.)

Um Übersicht zu schaffen, beschränken Sie sich besser auf nur eine einzige ready-

Anweisung. Innerhalb der anonymen Callback-Funktion dieser Anweisung (von der

es nur eine geben darf!) können Sie »huckepack« beliebig viele Funktionen aufrufen:

$(document).ready(function() {tuDies();tuJenes();// etc.

});

3.5 Das Mausereignis – Bindung eines Click-Events

Nun macht unser allererstes Beispiel scheinbar nicht allzu viel Sinn, da Sie doch Stil-

eigenschaften allein mittels Stylesheet festlegen könnten,2 ohne JavaScript zu Hilfe

zu rufen. Geschenkt – wenn Sie eine solche Manipulation aber mit einem Mausereig-

nis verbinden, wird es interessanter: Sie wollen als Nächstes erreichen, dass ein

Absatz seine Schriftfarbe ändert, sobald Sie ihn anklicken. Gehen wir kurz durch, wie

dies ohne die Hilfe von jQuery erfolgen könnte.

3.5.1 Zunächst – die »aufdringliche« Variante

Warum wir dies mit »aufdringlich« betiteln, wird gleich klarer. Jedenfalls werden

Aktionen wie der Klick auf ein Element gewöhnlich mit Hilfe von Event-Handlern

erfasst. Diese werden wie Attribute in den Start-Tag des Elements geschrieben.

Um die <p>-Container klickbar zu machen, genügt dann folgender Code:

<div id="box"><p onclick="farbwechsel(this)">Erster Absatz</p><p onclick="farbwechsel(this)">Zweiter Absatz</p><p onclick="farbwechsel(this)">Dritter Absatz</p>

</div>

2 Bedenkt man aber, dass Sie den Style anhand des Elementinhalts binden können, ist es vielleicht

doch ganz spannend, oder?


55

3

Was an dieser Stelle kurz erläutert werden soll, ist das Schlüsselwort this. Der Aus-

druck stellt ein Objekt dar, das an die aufgerufene Funktion farbwechsel() übergeben

wird. Es bezieht sich jeweils auf das <p>-Element, das gerade angeklickt wurde. Es han-

delt sich hier um das so genannte Kontextobjekt (also das Objekt, an dem aktuell

etwas passiert). So weit, so gut – auch die Funktion farbwechsel() ist nicht sonderlich

kompliziert:

// das übergebene this landet in der Variable meinP:function farbwechsel(meinP) {

// der geklickte Absatz bekommt die Klasse zugewiesen:meinP.className = "green";

}

Erst einmal funktioniert alles. Sie sehen, dass Sie auf diese Weise beliebige HTML-

Elemente mit einem Click-Event versehen können. Allerdings sollten Sie, um die Be-

nutzerführung eindeutig zu halten, bei entsprechend »aktivierten« Elementen die

Cursor-Eigenschaft per CSS auf pointer setzen, damit der Benutzer erkennt, dass hier

eine Interaktion möglich ist.

Dies geschieht in unserem Beispiel in einer Styleregel für <p>-Container. Des Weite-

ren fügen Sie der Klasse green eine Hintergrundfarbe hinzu und setzen die Cursor-

Darstellung dort wieder auf »normal« – immerhin braucht der Absatz, sobald er die

Klasse hat, ja kein zweites Mal geklickt werden:

p {cursor:pointer;

}.green {

color:#009933;background-color:#E2FFEC;cursor:default;

}

3.5.2 Etwas weniger aufdringlich, bitte!

Was ist nun schlecht daran? Unschön ist, dass hier der Click-Event-Handler samt

Funktionsaufruf in das HTML-Dokument geschrieben wurde, obwohl er nicht Teil

der Informationsstruktur ist. Er ist außerdem überflüssig, wenn kein JavaScript aktiv

ist (weil es abgeschaltet oder vom Client nicht unterstützt ist).

Im Sinne des Ansatzes Unobtrusive JavaScript (wir haben dazu im vorangegangenen

Kapitel ein paar Worte verloren) bevorzugt man daher, den Event-Handler wegzulas-

sen und die Klickfunktionalität per JavaScript nachträglich hinzuzufügen. Das HTML

bleibt auf diesem Weg »sauber«.


56

Um einem Absatz »von außen« dem Click-Event zuzuweisen, müssen zunächst alle

<p>-Container innerhalb des Bereichs #box gesammelt werden.

Dies geschieht wie zuvor:

var meineP = document.getElementById("box").document.getElementsByTagName("p");

Über das Array mit den Textabsatzknoten läuft eine Schleife, die den Click-Event bin-

det. Die Zahl der Knoten wird in einer Variablen len abgelegt, damit das Array nicht

bei jedem Schleifendurchlauf erneut ausgelesen werden muss:

for(var i =0, len= meineP.length; i<len; i++) {// Fein. Jetzt den Click-Event binden. Aber wie?}

Für die Art und Weise, wie Sie den Click-Event »ordentlich« binden, gibt es verschie-

dene, untereinander unverträgliche Varianten: die offizielle und die für den Internet

Explorer. Eine Fallunterscheidung ist möglich, aber umständlich. Der Rettungsanker

findet sich beim guten alten DOM Level 0 und der dort definierten onclick-Eigen-

schaft. Diese Vorgehensweise ist zwar nicht zeitgemäß, hat aber den Vorteil, dass sie

dann doch browserübergreifend funktioniert:

window.onload = function() {var meineP = document.getElementsByTagName("p");for(var i=0, len=meineP.length; i<len; i++) {

meineP[i].onclick= function() {this.className = "green";}

}}

Dies ist in seiner Kompaktheit durchaus vertretbar. Sollte es noch schöner gehen?

Oder zumindest kürzer?

3.5.3 Ein unaufdringlicher Dreizeiler, dank jQuery

Innerhalb von jQuery verwenden Sie nicht eine DOM-Eigenschaft namens onclick,

sondern eine jQuery-Methode, die den (durchaus treffenden) Namen click() trägt.

Mit ihrer Hilfe kann jedem Absatz innerhalb des Elements mit der ID box ein Click-

Event-Handler hinzugefügt werden. Schreiben Sie also das Script einfach einmal ent-

sprechend um. Ob Ihnen wieder drei Zeilen reichen werden? Na sicher!


57

3

$(document).ready( function() {$('#box p').click( function() {

$(this).addClass("green");});

});

Dass $('#box p') in seiner Kürze dasselbe bewirkt wie der längere Ausdruck docu-

ment.getElementById("box").getElementsByTagName("p") haben Sie vielleicht bereits

akzeptiert. Erinnern Sie sich, dass Sie hier auf die for-Schleife verzichten können:

jQuery wendet ja im Fall einer Knotenliste (Sie wissen, dass es sich nicht um eine

»gewöhnliche« Knotenliste handelt) eine Methode auf alle Items der Liste an (als

»implizite Schleife«). Praktisch!

Sobald ein <p>-Element tatsächlich geklickt wird, tritt die anonyme Funktion im

Inneren von click() in dessen Namen in Aktion. (Wie Sie bereits zuvor erfahren

haben, bezeichnet man diese Funktion als Callback-Funktion. Als solche wird sie erst

dann ausgeführt, wenn das Klick-Event eintritt.)

Das this in ihrem Inneren bezieht sich auf den geklickten <p>-Container. Da dieses

this (als herkömmlicher <p>-Container) mit addClass() nichts anfangen könnte,

wrappen Sie es über die $()-Funktion wieder in ein jQuery-Objekt.

Unter die Lupe damit:

// die anonyme Funktion in click():$('#box p').click( function() {

// das Kontextobjekt this wird jQueryfiziert:$(this).addClass("green");

});

Hier folgt zusammenfassend der Quellcode der gesamten Datei:

<html><head>



p {cursor:pointer;

}.green {


}


58

</style>




$(document).ready(function() {$("#box p").click(function() {

$(this).addClass("green");});

});</script>

</head><body>



Listing 3.3 Schriftfarbe ändern mit Click-Event (mit jQuery)

Wollen Sie innerhalb eines klickbaren Textabsatzes die Koordinaten des Klick-Ereig-

nisses erfassen, stoßen Sie auf eine weitere Diskrepanz zwischen den JavaScript-

Implementierungen der Browser.

Der Standard verlangt die Übergabe der Informationen über ein Ereignis (u. a. Art

und Ort des Ereignisses) an die durch das Ereignis getriggerte Funktion, die die Infor-

mation auswerten kann. Die Informationsstruktur wird als ein JavaScript-Objekt

übergeben, das allgemein als Event-Objekt bezeichnet wird. Es wird von der Zielfunk-

tion durch einen Parameter (meist wird für diesen der Bezeichner e wie event ver-

wendet) in den Argumentklammern aufgefangen:

meineP[i].onclick = function(e) { ... }, false);

Leider implementiert der Internet Explorer dies nicht auf die gleiche Weise. Nicht

dass es hier keine Informationen über das Ereignis gäbe, das stattgefunden hat. Aller-

dings lagern diese in einem Objekt event, das dem window-Objekt unterstellt ist:

window.event. Die Funktion bekommt keinen Wert übergeben, sondern muss sich

diesen vielmehr holen.


59

3

In standardkonformen Browsern können Sie, um die Klickkoordinaten zu erfassen,

Folgendes schreiben:

meineP[i].onclick = function(e) {// Zugriff auf das übergebene Event-Objekt e:alert('Klick an ' + e.clientX + ' und ' + e.clientY);

};

Im Internet Explorer müsste dies wie folgt geschehen (Sie schreiben kurz event statt

window.event und lassen dafür den Übergabeparameter in den Funktionsklammern

weg – zum Glück sind wenigstens die Eigenschaften des Event-Objekts gleich

benannt):

meineP[i].onclick = function() {// direkter Zugriff auf window.event:alert('Klick an ' + event.clientX +

' und ' + event.clientY);};

Nun müssten wir, um zu entscheiden, nach welchem Modell gearbeitet wird, feststel-

len, ob der Funktion etwas übergeben wird oder nicht. Hierfür gibt es einen alten Pro-

grammierertrick, der den Übergabeparameter prüft, ohne umständlich auf eine

if-else-Bedingung zurückzugreifen. Sie setzen einfach (sehr viel kürzer) den ter-

nären Operator ? : ein – hier ein erläuterndes Beispiel:

meineP[i].onclick = function(e) {// wurde ein e übergeben?e ? alert("e definiert!") : alert("e undefiniert!");// und nun weiter ...

};

Geprüft wird das übergebene e. Ist es undefiniert (wurde das Script also im IE ausge-

führt) und damit false, wird der Ausdruck rechts vom Doppelpunkt verwendet,

ansonsten (e wird zu true ausgewertet) links davon. Die Inkompatibilität überwinden

Sie demnach, indem Sie, bei false, e gleich window.event setzen (ansonsten e einfach

belassen) und anschließend nach »Schema F« fortfahren:

meineP[i].onclick = function(e) {e? e : e = window.event;// Prima, auch in IE heißt window.event jetzt e:alert('Klick an ' + e.clientX + ' und ' + e.clientY);

};

Abgesehen von dieser kleinen »Verrenkung« ist die Lösung nun recht einfach

browserübergreifend zu schreiben. Der gesamte Code sieht jetzt so aus:


60

window.onload = function() {var meineP = document.getElementsByTagName("p");for(var i =0, len=meineP.length; i<len; i++) {meineP[i].onclick = function(e) {e? e : e = window.event;alert('Klick an ' + e.clientX + " und " + e.clientY);};

}}

Schauen Sie aber nun einmal, wie jQuery dies löst:

$(document).ready( function() {$('p').click( function(e) {alert('Klick an ' + e.clientX + " und " + e.clientY);

});});

Offensichtlich spart jQuery nicht nur (wie Sie bereits wissen) die for-Schleife ein, son-

dern sorgt obendrein dafür, dass die durch ein Ereignis getriggerte Funktion stets ein

Event-Objekt übergeben bekommt. Die $()-Funktion bietet aber noch mehr, lassen

Sie sich überraschen!

3.6 Give me more! – Verkettung von jQuery-Methoden

Eine angenehme Eigenheit von jQuery ist, dass Sie mehrere jQuery-Methoden hin-

tereinander an ein jQuery-Objekt hängen können. Das Geheimnis besteht darin, dass

jede jQuery-Methode wieder ein jQuery-Objekt zurückgibt.

Dieses jQuery-Objekt (es handelt sich um das gleiche wie am Anfang, nur mit den

»eingearbeiteten« Veränderungen der eben angewendeten Methode) steht somit

quasi »am Ausgang« zur Verfügung, so dass eine weitere Methode darauf angewen-

det werden kann. Und dies funktioniert immer so weiter. Sie können sich das wie ein

Werkstück vorstellen, das eine Montagestraße entlangläuft:

// die jQuery-Methoden werden einfach verkettet:$(selektorausdruck).methode1().methode2().methode3();

Das könnten Sie (nur zur Erinnerung) auch wie folgt schreiben (Vorsicht: Bloß kein

Semikolon an die Zeilenenden setzen – außer ganz am Schluss!):


61

3

// die jQuery-Methoden werden einfach verkettet:$(selektorausdruck).methode1().methode2().methode3();

Aber schauen Sie es sich einfach einmal genau an: Sie haben bereits mit $(this).

addClass("green") gesehen, dass Sie einem Element eine CSS-Klasse hinzufügen

können. Lassen Sie uns dieses Beispiel erweitern.

3.6.1 Den Elternknoten eines Elements manipulieren

Sagen wir, wir wollen das Elternelement von this (den die <p>-Container umgeben-

den <div>-Container) mit den Klassen boxColor-0 bis boxColor-2 versehen.

Anklickbar sein sollen hierbei nach wie vor die Textabsätze selbst. Sie müssen es nun

so einrichten, dass jQuery dem Div die CSS-Klasse abhängig davon zuweist, welcher

<p>-Container angeklickt wurde. Das heißt, für den ersten <p>-Container erhält der

Div die Klasse boxColor-0, für den zweiten vergeben Sie boxColor-1 etc.

Bei jedem Klick muss die vorher an den Div vergebene Klasse allerdings entfernt wer-

den. Ebenso soll nur der eben angeklickte <p>-Container die Klasse green besitzen,

von allen anderen muss sie wieder verschwinden. Eine ganze Menge an Randbedin-

gungen! Allerdings ist das halb so schlimm, wenn Sie sich Stück für Stück an die

Lösung heranarbeiten.

Selektieren Sie zunächst alle <p>-Container in Div#box, und machen Sie sie an-

klickbar:

$("#box p").click( function() {...

});

So weit, so gut. Der angeklickte <p>-Container soll die Klasse green erhalten. Diesen

Container holen Sie mit $(this). Auch das kennen Sie bereits:

$("#box p").click( function() {$(this).addClass("green");

});

Jetzt wird es interessanter – Sie haben den angeklickten <p>-Container bereits in der

Hand, wollen jetzt aber etwas mit dessen Elternknoten, dem Div, machen. Gut, wech-

seln Sie einfach vom <p>-Container dorthin.


62

jQuery bietet Ihnen hierfür die Methode parent(). Weil Sie im Baum von einem Ele-

ment zum anderen klettern (Bergsteiger bezeichnen dies als traversieren), zählt

jQuery die parent()-Methode zu den Tree-traversing-Methoden.

Gehen Sie also zum Div:

$("#box p").click( function() {$(this).addClass("green").parent();

});

Nochmals zum Verständnis – der Ausdruck $(this).addClass("green"). Der

parent() ist jetzt der <div>-Container. Kürzer hätten Sie $(this).parent() schreiben

können, aber Sie hatten ja »unterwegs noch etwas zu erledigen« ...

Nun sorgen Sie dafür, dass am <div>-Container CSS-mäßig »Tabula rasa« gemacht

wird: Mit removeClass() entfernen Sie eventuell dort befindliche CSS-Klassen:

$("#box p").click( function() {$(this).addClass("green").parent().removeClass();

});

Jetzt soll dem Div die gewünschte Klasse hinzugefügt werden. Dies machen Sie wie-

derum mit addClass(). Weichen Sie auf die mehrzeilige Schreibweise aus, und kom-

mentieren Sie das Geschehen ein wenig mit:

$("#box p").click( function() {$(this) // der angeklickte P-Container.addClass("green") // erhält die Klasse green.parent() // wir traversieren zum Elternknoten.removeClass() // entfernen dort alle CSS-Klassen.addClass( ... ); // und fügen eine neue hinzu

});

Stopp – wo bekommen Sie nun den Klassennamen her, den Sie .addClass() überge-

ben müssen? Der Bezeichner beginnt immer mit boxColor- und geht dann mit einer

der Ziffern 0, 1 oder 2 weiter, die den <p>-Container bezeichnen. Das erinnert an die

Indexziffern eines Arrays.

Handelt es sich hier denn um ein Array? Sozusagen. Und zwar, wenn Sie den grundle-

genden Ausdruck $("#box p") nehmen. Von diesen drei <p>-Containern ist einer

angeklickt worden, der im Rahmen unserer Funktion durch this bezeichnet wird.

jQuery bietet Ihnen nun eine Methode .index(), die Ihnen die Position pos eines

Objekts in einer Knotenliste nennen kann.

Das Prinzip ist dieses:

var pos = $(knotenliste).index(vergleichsobjekt);


63

3

Auf unseren Fall angewendet, schreiben Sie beispielsweise:

var pos = $("#box p").index(this);

Speichern Sie aber den Rückgabewert nicht, sondern setzen Sie ihn direkt ein:

$("#box p").click( function() {$(this) // der angeklickte P-Container.addClass("green") // erhält die Klasse green.parent() // wir traversieren zum Elternknoten.removeClass() // entfernen dort alle CSS-Klassen.addClass("boxColor-" + $("#box p").index(this));

});

Sie haben nun ganz vergessen, dafür zu sorgen, dass noch die Klasse green von vorher

geklickten <p>-Containern entfernt werden muss. Dies erledigen Sie einfach pauschal

zu Beginn der Funktion. Es macht nichts, dass einer der Absätze sofort wieder die

gleiche Klasse erhält ...

$("#box p").click( function() {// pauschal überall die Klasse green entfernen:$("#box p").removeClass("green");$(this) // der angeklickte P-Container.addClass("green") // erhält die Klasse green.parent() // wir traversieren zum Elternknoten.removeClass() // entfernen dort alle CSS-Klassen.addClass("boxColor-" + $("#box p").index(this));

});

Das ist jetzt insoweit schön, als dass es funktioniert. Allerdings ist es ein wenig unor-

dentlich. Außerdem haben Sie nun dreimal ein jQuery-Objekt mit demselben Aus-

druck $("#box p") gebildet. Das wirkt unökonomisch. Sie könnten dieses Objekt auch

speichern, also in eine Variable packen, und »recyceln«:

var obj = $("#box p");

Sie erhalten dann:

var obj = $("#box p");obj.click( function() {

// pauschal überall die Klasse green entfernen:obj.removeClass("green");$(this) // der angeklickte P-Container.addClass("green") // erhält die Klasse green.parent() // wir traversieren zum Elternknoten


64

.removeClass() // entfernen dort alle CSS-Klassen

.addClass("boxColor-" + obj.index(this));});

Damit lässt sich schon besser arbeiten. Nun könnten Sie auch das ständige Hin und

Her mit Entfernen und Hinzufügen von Klassen sortieren:


// erst alle Klassen entfernenobj.removeClass("green").parent().removeClass();// jetzt Klassen hinzufügen:$(this).addClass("green").parent().addClass("boxColor-" + obj.index(this));

});

Lagern Sie nun noch die Indexerzeugung aus dem unteren Ausdruck aus:


// welcher P-Container wurde angeklickt?var pos = obj.index(this);// erst alle Klassen entfernenobj.removeClass("green").parent().removeClass();// jetzt Klassen hinzufügen:$(this).addClass("green").parent().addClass("boxColor-" + pos);

});

So sieht die Funktion nun im Großen und Ganzen aus – das vorher Geschriebene

muss lediglich noch in einen ready-Block eingefügt werden:

<html><head>



p {cursor:pointer;

}.green {



65

3

}.boxColor-0 {

background-color:#CCCCCC;}.boxColor-1 {

background-color:#EEEEEE;}.boxColor-2 {

background-color:#999999;}

</style>




$(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>



Listing 3.4 Verkettung von jQuery-Funktionen


66

3.7 Zusammenfassung

jQuery stellt Ihnen ein wichtiges Event zur Verfügung, mit dem Sie überprüfen kön-

nen, ob ein HTML-Baum fertig geladen wurde, und zwar $(document).ready(fn), um

erst anschließend, nach der Prüfung, eine Funktion auszuführen. Es stellt Ihnen ein

einfaches Modell zur Navigation durch den Dokumentenbaum zur Verfügung, mit

Hilfe von Selektoren, die sich an den Spezifikationen der CSS-Selektoren orientieren.

Sie können aus einem Arsenal an Werkzeugen wählen, mit dem Sie eine HTML-Seite

manipulieren können, wobei Sie bei Ihren ersten Gehversuchen .addClass(name)

kennengelernt haben. Sie können nun zudem mehrere jQuery-Methoden miteinan-

der verketten. Alles in allem entsteht damit ein schlanker Code, und eine strikte

Strukturierung Ihrer Projekte wird möglich, da Sie die HTML-Seite von allem mögli-

chen Ballast befreien und diesen zu Ihrer besseren Übersicht in externe Dateien aus-

lagern können.

Und wie jetzt weiterarbeiten?

Mit Kapitel 4, »jQuery – die Übersicht«, folgt ein längeres (zugegeben sehr langes)

Kapitel, in dem wir Ihnen das gesamte Vokabular von jQuery vorstellen und es aus-

führlich besprechen. Irgendwo muss ja alles stehen. Sie können es natürlich hier und

jetzt durchlesen, um einen Kompletteindruck zu erhalten. Vielleicht möchten Sie

aber stattdessen die Ärmel hochkrempeln, die Siebenmeilenstiefel anziehen und

direkt zum Praxisteil in Kapitel 5, »jQuery – der Praxiseinsatz«, springen. Dort wer-

den die jQuery-Methoden angewendet, aber nicht erklärt. Erklärt werden natürlich

die Beispiele. Sie können die vorgestellten Beispiele nachvollziehen und immer dann

in den Referenzteil zurückblättern, wenn Sie Hintergrundinformationen benötigen.

551

6

Kapitel 6

jQuery UI

Das Paket jQuery UI ist ein Aufsatz auf das jQuery-Basisframework. Im

Prinzip besteht UI aus Interaktionsroutinen und einer Reihe aufeinan-

der abgestimmter, über CSS-Themes optisch konfigurierbarer Plugins,

die Oberflächenelemente (so genannte »Widgets«) erzeugen.

Das jQuery UI steht für jQuery User Interface. Es ist eine Erweiterung des jQuery-

Frameworks, das einerseits erweiterte Interaktion wie Effekte, Drag & Drop, Easing

und Farbanimationen bereitstellt, andererseits komplexe Oberflächen-Controls

(Widgets) wie Datepicker, Navigationen und Dialogboxen zur Auswahl bietet.

Abbildung 6.1 Die Website http://jqueryui.com

6 jQuery UI

552

jQuery UI umfasst eine Sammlung von leicht individualisierbarer, einfach zu konfi-

gurierender Plugins. Im Einzelnen unterscheidet man folgende Bereiche.

6.1 Download und Konfiguration von jQuery UI

jQuery UI kann als Komplettpaket downgeloadet und in vollem Umfang in ein Pro-

jekt eingebunden werden.

� Die aktuelle Version von jQuery UI ist 1.10.3 (1.67 MB)

� Die Legacy-Version von jQuery UI ist 1.9.2 (1.70 MB)

Beide Versionen werden gepflegt; in der Regel wird man die aktuelle Version bevor-

zugen (die ältere unterstützt noch IE6).

Der Nachteil des Komplettpakets besteht darin, dass man Features und Widgets

downloadet und in die Projektdaten einbezieht, die möglicherweise nie verwendet

werden. Die UI-Datei wird unnötig groß.

Aus diesem Grund ist ein frei konfigurierbarer Custom Download möglich, bei dem

beliebig Elemente an- und abwählbar sind.

Interaktion Drag/Drop, Größenänderung, Auswahlen, Sortierungen

Widgets Accordion, Autovervollständigung, Button, Datepicker, Dialog,

Fortschrittsbalken, Schieberegler, Tabs

Utilities Positionierung, Mausinteraktion

Effekte Die Methoden effect(), Farbanimationen mit animate(),

switchClass(), Erweiterungen für Methoden show(), hide(),

toggle(), addClass(), removeClass(), toggleClass().

Tabelle 6.1 jQuery UI – Übersicht

Abbildung 6.2 Download auf Startseite http://jqueryui.com/

6.1 Download und Konfiguration von jQuery UI

553

6

6.1.1 Der Download Builder von jQuery UI

Der Download Builder zum Erstellen eines Custom Downloads gilt sowohl für die

aktuelle Version als auch das Legacy-UI.

Der Build ist unterteilt in die Bereiche

� UI Core (Dienst-Funktionen und Basis-Utilities)

Core, Widget, Mouse, Position

� Interactions (Verhalten für Elemente und Widgets)

Draggable, Droppable, Resizable, Selectable, Sortable

� Widgets (Interface-Elemente, benötigen Core und Interactions)

Accordion, Autocomplete, Button, Datepicker, Dialog, Menu, Progressbar, Slider,

Spinner, Tabs, Tooltip

� Effects (autarke Effekte mit vielfältiger API)

Effects Core, Blind Effect, Bounce Effect, Clip Effect, Drop Effect, Explode Effect,

Fade Effect, Fold Effect, Highlight Effect, Pulsate Effect, Scale Effect, Shake Effect,

Slide Effect, Transfer Effect

Abbildung 6.3 Der Download Builder von jQuery UI

6 jQuery UI

554

Zwischen den Abteilungen bestehen Abhängigkeiten – so sind weder Interactions

noch Widgets ohne (zumindest Teile des) UI Core anwendbar. Der Downloader warnt

aber bei Diskrepanzen und wählt entsprechende Module selbstständig zu oder ab.

6.2 Theming von jQuery UI

Die Widgets von jQuery UI sind themeable, das bedeutet, es existieren vordefinierte

CSS-Klassen innerhalb der HTML-Struktur des Widget-Markups. Auf diese Klassen

sind CSS-Stylesheet-Dateien (Themes) abgestimmt, die im Rahmen des UI-Pakets mit

downgeloadet werden.

Sie können bereits beim Download im Builder ein Theme auswählen. Das Default-

Theme trägt den Namen »Smoothness«. Es handelt sich um ein extrem zurückhal-

tendes Farbschema. Alternativ sind auch ausgesprochen bunte Themes erhältlich.

Wenn Sie das Aussehen der Widgets mit einem bestimmten Theme begutachten

möchten, wechseln Sie in die Abteilung Themes.

Hier haben Sie im Rahmen des ThemeRollers die Option, entweder ein komplett eige-

nes Theme zu definieren (planen Sie hierfür etwas Zeit ein) oder anhand einer Gallery

die Wirkung der vordefinierten Themes zu begutachten.

Abbildung 6.4 Auswahl eines Themes im ThemeRoller


555

6

Das gewählte Theme kann als Ausgangspunkt für eine Eigenkreation dienen. Sie kön-

nen (u. a.) Schriften, Eckenradius, Farben von Kopf- und Fußleisten und anderer

Bereiche frei wählen.

Abbildung 6.5 Die ThemeRoller Gallery – links »Smoothness«, rechts »Darkness«

Abbildung 6.6 Farbwahl für den Header-Bereich eines eigenen Themes

6 jQuery UI

556

Das fertige Theme steht nach Abschluss der Bearbeitung als Download zur Verfü-

gung. (Sie wählen dann noch die UI-Komponenten dazu aus.)

Bookmarken Sie Ihren Download

Bookmarken Sie die ThemeRoller-Seite vor dem Download. Sie haben so die Mög-

lichkeit, den Bearbeitungszustand Ihres Themes zu speichern, um beispielsweise

später daran weiterzuarbeiten oder es zu modifizieren.

Alle Theme-Parameter werden im URI-String festgehalten:

http://jqueryui.com/themeroller/#zThemeParams=5d00000100490600 ...

Es besteht ansonsten keine Möglichkeit, ein downgeloadetes Theme zur Bearbei-

tung wieder upzuloaden (anders als bei jQuery Mobile).

6.2.1 Scoped Themes

Möchten Sie mehrere Themes gleichzeitig in Ihrem Dokument verwenden, oder ein-

fach zwischen zwei Themes wechseln können, so besteht die Möglichkeit, beim

Download einen Scope (aka eine Basisklasse) für das Theme festzulegen.

Geben Sie den gewünschten Klassennamen einfach in das Feld CSS Scope ein. Verges-

sen Sie nicht den Punkt vor dem Bezeichner!

Abbildung 6.7 Downloadbutton des ThemeRollers

Abbildung 6.8 Angabe einer Basisklasse für einen Theme-Download


557

6

Der Effekt ist der, dass die Basisklasse allen Selektoren des Themes vorangestellt

wird:

.redmond .ui-widget {font-family: Lucida Grande, sans-serif;font-size: 1.1em;

}

Dies gibt Ihnen die Möglichkeit, ein Theme durch Einsatz seiner Basisklasse auf Be-

reiche zu beschränken oder an- und abzuschalten:

<body class="redmond">... überall im Dokument Theme "Redmond" ...</body>

<body class="cupertino">... überall im Dokument Theme "Cupertino" ...</body>

...<div class="redmond">... hier Theme "Redmond".</div><div class="cupertino">... hier Theme "Cupertino".</div>...

Hinweis: Die von den UI-CSS-Dateien eingesetzten Grafiken sind farblich und dem

Dateinamen nach auf das jeweilige Theme angepasst und liegen relativ zur CSS-Datei

stets in einem Unterordner images/.

Setzen Sie mehrere Themes gleichzeitig oder alternativ ein, so ist eine Ordnerstruk-

tur wie diese hier sinnvoll (CSS entsprechend umbenennen):

css/

smoothness/

smoothness.css

images/

redmond/

redmond.css

images/

cupertino/

cupertino.css

images/

...

Hierbei könnte Smoothness (ohne Basisklasse) als Default fungieren.

6 jQuery UI

558

6.3 Einsatz von jQuery UI

jQuery UI wird grundsätzlich als gezipptes Paket ausgeliefert – das ist unabhängig

davon, ob Sie das Komplettpaket oder einen konfigurierten Download herunter-

laden.

Auch wenn Sie lediglich ein Theme laden, also alle UI-Optionen im Konfigurator

abgewählt haben, ergibt sich dieselbe Struktur. Die JavaScript-Dateien sind dann

aber weitgehend leer.

6.3.1 Dateistruktur von jQuery UI

Betrachten Sie nun bitte die Struktur des entpackten Pakets. Das Downloadpaket ent-

hält eine Startseite index.html und drei Unterordner:

� development-bundle/

Dieser Ordner beinhaltet Anwendungsbeispiele (in demos/), zusätzliche Plugins

(in external/), die Dokumentation (in docs/), Lizenzbestimmungen und in

themes/ zwei Beispielthemes. Im Unterordner ui/ finden Sie alle UI-Plugins als

Einzeldateien.

� [jquery-ui-ordner]/js/

Hier befindet sich eine Datei mit dem jQuery-Framework in Version jquery-1.9.2.js

sowie eine weitere Datei jquery-ui-1.10.3.custom.js, in der die jQuery UI-Plugins zu-

sammengefasst sind – ebenso als Minified-Version jquery-ui-1.10.3.custom.min.js.

Dateien umbenennen – machen Sie es sich einfacher!

Sie können die Dateien der Einfachheit halber kopieren und umbenennen in

jquery-ui.js und jquery-ui.min.js.

� [jquery-ui-ordner]/css/

Hier finden Sie alle Dateien, die Sie benötigen, um den Widgets ein Layout zu ver-

leihen oder das vorgegebene Aussehen zu verändern. Pro Theme finden Sie hier

einen Unterordner (per Default smoothness/), der die CSS-Dateien und Icon-Grafi-

ken enthält.

Die CSS-Dateien tragen etwas unhandliche Namen wie jquery-ui-1.10.3.custom.css

etc. Auch diese Dateien können Sie beliebig umbenennen oder verschieben, indem

Sie etwa dem Vorschlag bei den »scoped« Themes folgen. Behalten Sie aber in jedem

Fall die Relation zum dazugehörenden images-Ordner bei! Die Grafiken sind je

Theme verschieden (Farben, Dateinamen).

6.4 Einbinden von jQuery UI

559

6

6.4 Einbinden von jQuery UI

Um jQuery UI in Ihrem Projekt einzusetzen, kopieren Sie einen Teil des entpackten

UI-Zips in Ihr Projektverzeichnis.

Legen Sie die JavaScript-Dateien jquery-ui-1.10.3.custom.js und jquery-ui-1.10.3.

custom.min.js aus js/ in den gleichen Ordner, in dem bereits Ihr jquery.js liegt.

Benennen Sie die Dateien um, wenn Sie möchten.

Kopieren Sie den Ordner smoothness/ aus dem css-Verzeichnis des UI-Zips (inklusive

des Unterorders images/).

Benennen Sie die CSS-Dateien darin um, wenn Sie dies möchten (wir wählen den

Namen smoothness.css bzw. smoothness.min.css).

Ihr Projektordner könnte nun aussehen wie folgt:

projekte/

js/

jquery.js

jquery-ui.js

jquery-ui.min.js

css/

smoothness/

smoothness.css

smoothness.min.css

images/

uebungen-ui/

...

Das Einbinden von jQuery UI ist einfach – zu beachten ist lediglich, dass Sie (zumin-

dest sofern Sie Widgets einsetzen möchten, was aber meist der Fall ist) mindestens

ein UI-Theme einbinden müssen. Dies geschieht vor dem Einbinden der JavaScript-

Dateien.

Bei diesem ist, ebenso wie beim Einsatz von Plugins (auch UI besteht aus Plugins),

eine Reihenfolge zu beachten – zuerst jQuery, dann jQuery UI.

<!DOCTYPE HTML><html lang="de-DE"><head>

<meta charset="UTF-8"><title>jQuery UI einbinden</title><link rel="stylesheet"href="../css/smoothness/smoothness.css"><script type="text/javascript"

6 jQuery UI

560

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

// Ihr Code hier ...</script>

</head><body>

...</body></html>

6.5 CSS-Klassen eines UI-Widgets

Betrachten wir zunächst die Widgets, da sie als sichtbare Oberflächenelemente den

spektakulärsten Aspekt des UI-Frameworks darstellen. Alle Widgets besitzen einen

annähernd gleichen Aufbau, der durch eine HTML-Struktur bestimmt wird, in der

festgelegte CSS-Klassen vergeben sind. Diese Klassen legen die Rolle fest, die die

betreffenden HTML-Elemente innerhalb des Widgets einnehmen. Daraus folgt auch

eine bestimmte Optik.

<div class="ui-widget"><div class="ui-widget-header"><p>Dies ist ein Widget-Header</p>

</div><div class="ui-widget-content"><p>Dies ist der Contentbereich des Widgets, umgebenvon einem Element der Klasse ui-widget-content.</p>

</div></div>

Hierbei sind folgende drei Basisklassen beteiligt:

� ui-widget

Das Widget selbst bzw. der Widget-Container.

� ui-widget-header

Der Container, der den Header-Bar des Widgets generiert.

� ui-widget-content

Der Container, der die Inhalte des Widgets umschließt.

Mit Zusatzklassen können weitere Grundstylings wie Eckradien der Header- und des

Content-Containers gesetzt werden.

6.5 CSS-Klassen eines UI-Widgets

561

6

� ui-corner-all

Alle vier Ecken des Containers erhalten den border-radius des Themes.

� ui-corner-top, ui-corner-bottom

Die beiden oberen respektive unteren Ecken werden gerundet.

� ui-corner-left, ui-corner-right

Die beiden linken respektive rechten Ecken werden gerundet.

Die nicht betroffenen Ecken behalten den Default-Radius 0. Die Klassen können

nicht auf den Widget-Container selbst angewendet werden.

Mit vergebenen Corner-Klassen sieht die Widget-Struktur so aus:

<div class="ui-widget"><div class="ui-widget-header ui-corner-top"><p>Dies ist ein Widget-Header</p>

</div><div class="ui-widget-content ui-corner-bottom"><p>Dies ist der Contentbereich des Widgets, umgebenvon einem Element der Klasse ui-widget-content.</p>

</div></div>

Weitere Klassen dienen dem Zuweisen von Zuständen (»inaktiv« bzw. »aktiv«),

wobei dies optisch durch ein Icon unterstützt werden kann. Diese Klassen werden bei

Interaktion mit dem Widget automatisch vergeben:

� ui-state-default

Definiert den Default-Zustand eines Containers oder UI-Elements (»nicht ausge-

wählt«, »inaktiv«).

Abbildung 6.9 HTML-Struktur mit Widget-Klassen, rechts mit ui-corner-radius

6 jQuery UI

562

� ui-state-active

Definiert den aktiven Zustand des UI-Elements.

� ui-state-hover

Diese Klasse definiert den Hover-Zustand des UI-Elements.

Alle drei Klassen sind im ThemeRoller konfigurierbar (siehe Abbildung 6.10):

Beispiel: Der Contentbereich eines Widgets wird klickbar gemacht und wechselt

seine Interaktionsklasse. Im Container befindet sich ein weiteres Element, das den

Bereich eines Icons definiert.

<div class="ui-widget"><div class="ui-widget-header ui-corner-top"><p>Dies ist ein Widget-Header</p>

</div><div class="ui-widget-content

ui-state-defaultui-corner-bottom">

<p class="ui-icon ui-icon-circle-plus"style="float:left;margin:21px 10px"></p>

<p>Dieser Content ist durch Klick aktivierbar.</p></div>

</div>

Dies geht natürlich nicht ganz von selbst – fügen Sie ein Script ein, das am Content-

bereich die Klasse ui-state-active toggelt:

$(document).ready(function(){$('.ui-widget-content').click(function(){

$(this).toggleClass('ui-state-active');});

})

Abbildung 6.10 Der ThemeRoller als Interface für die Interaktionsklassen

6.6 Layout-Widgets aus jQuery UI

563

6

Beachten Sie, dass das Icon seine Darstellung ebenfalls anpasst.


Zur Erstellung von Layout-Elementen, aber auch zur allgemeinen Gestaltung von

User Interfaces und dem Handling von Interaktionen enthält jQuery UI eine Reihe

vordefinierter, aber in hohem Maße konfigurierbarer Widgets. Die Gestaltung all die-

ser Widgets wird durch das jeweilige Theme bestimmt.

� Das Dialog-Widget ersetzt die modalen Dialogboxen des Betriebssystems durch

konfigurierbare modale Dialoge.

� Die Progressbar ist ein modales Widget, das den Verlauf eines Ladevorgangs signa-

lisieren kann.

� Das Accordion-Widget bietet den bekannten Akkordeon-Effekt beim Umschalten

zwischen verschiedenen Inhaltsbereichen (Content-Panes).

� Das Tab-Widget funktioniert analog zum Accordion-Widget, verwendet aber ein

Tab-Menü zur Steuerung.

6.6.1 Dialog-Widget

Ein Dialog wird auf Basis einer HTML-Struktur generiert, die »jQuery-fiziert« wird –

dies geschieht durch Selektion und anschließende Anwendung einer UI-Methode auf

die Collection.

Beginnen wir mit einer einfachen Struktur. Die ID hilft lediglich bei der Selektion –

wichtiger ist das title-Attribut:

<div id="meindialog" title="Einfacher Dialog"><p>Ein Dialog wird auf Grundlage dieser einfachenStruktur generiert und kann durch ein von jQuery UIerzeugtes Icon geschlossen werden.</p>

</div>

Abbildung 6.11 Aktivierbarer Content, links Default, rechts aktiviert

6 jQuery UI

564

Der Code zur eigentlichen Erzeugung eines Default-Dialogs ist simpel:

$(document).ready(function() {$("#meindialog").dialog();

});

Dies bringt folgendes Ergebnis (hier mit Theme »redmond«):

Um einen Standard-Dialog zu erzeugen, braucht auf das selektierte Element lediglich

die UI-Methode dialog() angewendet werden. Ein solcher Dialog besitzt ein paar

Grundeigenschaften:

� nicht modal (Seite bleibt interaktiv)

� skalierbar und verschiebbar

� öffnet sich beim Laden automatisch und zentriert

Konfigurieren des Dialogs

Um ein vom Standarddialog abweichendes Verhalten festzulegen, muss dem Dialog

ein Konfigurationsobjekt übergeben werden:

$(document).ready(function() {$("#meindialog").dialog( {

resizable: false,modal: true,height:150

} );});

Ein solcher Dialog ist modal und besitzt eine feste Größe, die vom User nicht verän-

dert werden kann.

Abbildung 6.12 Der Dialog ist skalier- und verschiebbar.


565

6

Ein Dialog mit Buttons

Auch das Hinzufügen von Buttons ist möglich:

$(document).ready(function() {$("#meindialog").dialog({

resizable: false,modal: true,height:215,buttons: {

OK: function() {$(this).dialog("close");

},Cancel: function() {

$(this).dialog("close");}

}});

});

In diesem Fall dienen die Buttons nur dem Schließen des Dialogs – hierfür wird das

Dialog-Widget this mit der Option »close« aufgerufen:

$(this).dialog("close");

Auf einen Dialog kann die Methode dialog() angewendet werden.

Statt Ok und Cancel können Buttons beliebige Beschriftungen erhalten. Auch die Zahl

der Buttons ist wählbar:

Abbildung 6.13 Konfigurierte Dialoge (rechts mit OK-/Cancelbuttons)

6 jQuery UI

566

buttons: {"Ja": function() {

$(this).dialog("close");},"Nein": function() {

$(this).dialog("close");},"Vielleicht": function() {

$(this).dialog("close");}

}

Konfigurationseigenschaften das Dialogs

Im Rahmen der Konfiguration können verschiedene Parameter gesetzt werden. Hier

eine Auswahl:

Parameter Wert (Default) Erläuterung

autoOpen boolean (true) Verhindert automatisches Öffnen des

Dialogs

buttons Object ({}) Konfiguriert Buttons des Dialogs als

Button-Array in einem Unterobjekt

draggable boolean (true) Macht Dialog verschiebbar

height, width Number

(»auto«)

Setzt Höhe und Breite des Dialogs als

Ausgangswert

hide String (null) Nennt den Effekt beim Schließen des

Dialogs:

»explode«, »bounce«, »drop« ...

maxHeight, maxWidthminHeight, minWidth

Number (false) Minimal- und Maximalgrößen des Dialogs,

abhängig von den Inhalten

modal boolean (false) Setzt Dialog auf »modal« und verhindert

Interaktion mit dem Rest des Dokuments

resizable boolean (true) Größenveränderbarkeit durch den User

title String ( – ) Setzt den Titeltext des Dialogs

Tabelle 6.2 Konfigurationsparameter des Dialogs


567

6

Die API des Dialogs

Eine Übersicht über die komplette API des Dialogs finden Sie hier:

http://api.jqueryui.com/dialog

Getter und Setter für Optionen

Alle Optionen können nachträglich gesetzt werden, indem einfach ein weiteres Mal

ein Konfigurationsobjekt übergeben wird.

Alternativ kann der Dialog-Methode das Keyword option übergeben werden, das

zusammen mit einem Parameternamen als Getter fungiert und als Setter, wenn

zusätzlich noch ein Wert hineingereicht wird:

// Gettervar draggable =meinDialog.dialog("option", "draggable"); //-> true// SettermeinDialog.dialog("option", "draggable", false);

Öffnen per Button: dialog(»open«)

Interessant ist es, das Öffnen des Dialogs steuerbar zu machen. Hierzu muss zum

einen in der Konfiguration die autoOpen-Option abgewählt werden. Zum anderen

muss ein Interface-Element (z. B. ein Button) das Öffnen programmatisch vor-

nehmen:

<p><button id="meinbutton">Dialog öffnen</button></p><div id="meindialog" title="Einfacher Dialog">

<p>Diese Meldung ist wahnsinnig wichtig.</p></div>

Das Script dazu:

$(document).ready(function() {$("#meindialog").dialog({ autoOpen: false,

modal:true });$( "#meinbutton" ).click(function() {

$( "#meindialog" ).dialog("open");});

});

6 jQuery UI

568

Dialog programmatisch erzeugen und befüllen

Die HTML-Struktur, die den Dialog aufspannt, muss nicht bereits im Dokument sein

– sie kann ebenso programmatisch erzeugt werden.

Hierfür wird einfach die $()-Funktion als Factory eingesetzt:

var meinDialog = $('<div></div>');meinDialog.dialog({autoOpen: false});

Dies geschieht nur aus Platzgründen in zwei Zeilen – Sie können die Dialog-Methode

auch unmittelbar auf das erzeugte jQuery-Objekt anwenden. Die Übergabe von auto-

Open:false verhindert, dass der Dialog sofort geöffnet wird.

Das (unsichtbare) Widget kann jetzt weiter konfiguriert werden. Dies geschieht durch

wiederholte Anwendung der Dialog-Methode mit erneuter Übergabe eines Konfigu-

rationsobjekts:

meinDialog.dialog({ modal:true,title:'Generierter Dialog' });

In der Tat wird die bisherige Konfiguration hierdurch ergänzt und nicht überschrie-

ben. Um einen Parameter zu überschreiben, müssen Sie ihn explizit neu setzen!

Sie können den Dialog jetzt öffnen – die Aktion wird an den Klick eines Buttons

gebunden:

$("#meinbutton").click(function() {meinDialog.dialog("open");

});

Der Dialog besäße jetzt allerdings noch keinen Inhalt und muss daher noch »befüllt«

werden – hier mit einem einfachen HTML-String. Dies kann im Verlauf des Öffnens

geschehen (ob davor oder danach, ist gleichgültig):

meinDialog.html('Das ist <i>generierter</i> Text.').dialog("open");

Die Widgetstruktur ist irrelevant für den Einsatz

Sie brauchen nichts über die HTML-Struktur des Widgets zu wissen, um den Dialog-

inhalt zu verändern.


569

6

Methoden des Dialog-Widgets

Ein Dialog verfügt über eine Reihe von Methoden:

Die Methoden werden nicht direkt am Widget aufgerufen – dies geschieht stets über

die Dialog-Methode, wobei der Methodenname als String übergeben wird:

meinDialog.dialog("open"); // öffnet den DialogmeinDialog.dialog("close"); // schließt ihn

Falsch ist hingegen:

meinDialog.open() oder meinDialog.dialog().open();

Abbildung 6.14 Generierter Dialog – sieht aus wie ein »normaler« Dialog

Methode Erläuterung

open Öffnet den Dialog

close Schließt den Dialog

destroy Schließt den Dialog, wenn er offen ist und entfernt das Widget-

HTML aus dem Dokument

isOpen Returns: boolean; prüft, ob das Widget offen oder geschlossen ist

moveToTop Legt den Dialog bei mehreren geöffneten Dialogen in den obers-

ten Z-Index

Tabelle 6.3 Methoden des Dialog-Widgets

6 jQuery UI

570

6.6.2 Progressbar

Das Progressbar-Widget erzeugt einen Fortschrittsbalken, wie er als Feedback wäh-

rend eines Ladevorgangs o. Ä. eingesetzt wird. Es kann ganz einfach auf ein bestehen-

des HTML-Element aufgesetzt werden, auf das dann die Progressbar-Methode

angewendet wird:

<div id="pbar"></div>$(document).ready(function() {

$("#pbar").progressbar();});

Ohne Konfiguration ist das Widget allerdings nicht nützlich, da der Balken komplett

leer ist. Immerhin füllt er seinen Eltern-Container in der Horizontalen voll aus, ohne

dass hierfür Angaben erforderlich sind.

In der Regel wird man aber einen Wert value übergeben, der den Stand des Fort-

schrittsbalkens in Prozent angibt – ein Wert von »0« bis »100« wird akzeptiert:

$(document).ready(function() {$("#pbar").progressbar({ value:50 });

});

Dies erweitert die HTML-Struktur wie folgt (ARIA-Klassen weggelassen):

<div id="pbar"class="ui-progressbar ui-widget

ui-widget-content ui-corner-all"><div style="width:50 %;"

class="ui-progressbar-valueui-widget-header ui-corner-left">

</div></div>

Die Farbe des Balkens wird im Theme festgelegt. Um mehr Leben ins Spiel zu bringen,

kann per CSS das background-image-Property gesetzt werden, das ein animiertes GIF

einbindet. Als Selektoren werden die Klassen ui-progressbar und ui-progressbar-

value eingesetzt (siehe vorausgehendes Codebeispiel):


disabled boolean (false) Deaktivierung

value Number (0) Stand des Fortschrittszeigers

Tabelle 6.4 Konfigurationsparameter der Progressbar


571

6

<style>.ui-progressbar .ui-progressbar-value {

background-image: url(../css/images/pbar-ani.gif);}</style>

Events für die Progressbar

Die Progressbar besitzt drei spezifische Arten von Event-Handlern, an die man bei

der Konfiguration Callback-Funktionen binden kann.

Der Einsatz geschieht am übersichtlichsten, indem man das Konfigurationsobjekt

getrennt von der Initialisierung der Progressbar definiert:

var pconf = {value:50,create: function(){

console.log('Progressbar initialisiert.')};

var change: function(){console.log('Der value hat sich geändert.')

Abbildung 6.15 Einfache Progressbar mit value 50 %

Ereignis Erläuterung

create Das Widget wird initialisiert.

change Der Wert des value-Parameter ändert sich.

complete Der Wert des value-Parameters hat 100 erreicht.

Tabelle 6.5 Events der Progressbar

6 jQuery UI

572

};var complete: function(){

console.log('Vorgang abgeschlossen.')}

};var pbar = $("#pbar").progressbar(pconf);

Ajax-gesteuerte Progressbar

In diesem Beispiel wird die Progressbar durch ein JSON-Objekt gesteuert, das durch

eine PHP-Datei generiert wird.

Hier der Scriptcode:

$(function(){var pconf = {

value:0,complete: function(){

console.log('Vorgang abgeschlossen.')}

};// Progessbar initialisierenvar pbar = $("#pbar").progressbar(pconf);// AIF-Function (startet automatisch):(function simulateprogress() {$.ajax({// Server liefert JSONdataType: "json",// URL erhält stets aktuellen Statusurl: './progress03_ajax.php?status=' +

pbar.progressbar("option", "value" ),// Nach erfolgreichem Abschluss des Requestssuccess: function(data) {

// PHP liefert in 'data' ein JSON Objekt mit// den Properties 'status' und 'message' zurück

// Überprüfen, ob ein JSON Objekt da ist.if(data.status && data.message) {

// Updaten der Progressbarpbar.progressbar("option",

"value",data.status);


573

6

// Meldung darstellen$("#msg").html(data.message);

// Solange 100 % nicht erreicht sind ...if(data.status!=100) {

simulateprogress();}

}}); // Ende $.ajax

})() // Start der Funktion simulateprogress als AIF});

Die PHP-Datei, die das JSON-Objekt zurückgibt, finden Sie als progress03_ajax.php

auf der Begleit-DVD.

Hier ein Einblick in den Code:

$zufall = rand(1,3); // Zufallszahl generierensleep($zufall);// Prozessfortschritt als Prozentwert$php_array['status'] = $_GET['status']+($zufall * 3);// Bei 100 % ist Schlussif($php_array['status'] > 100) {

$php_array['status'] = 100;}// Ausgabe der Nachrichtif($php_array['status'] != 100) {

$php_array['message'] = 'Aktueller Status:'.$php_array['status'].' von 100, Countdown: '.(100 – $php_array['status']);

} else {$php_array['message'] = 'Aktueller Status: '

.'Ladevorgang abgeschlossen.';}

// Ausgabe des PHP-Arrays als JSON-Objektecho json_encode($php_array);

Die Konfiguration kann noch durch Callbacks bei Initialisierung und Wertänderung

ergänzt werden:

var pconf = {value:0,create: function(){

6 jQuery UI

574

console.log('Progressbar initialisiert.');},change: function(){

console.log('Der value hat sich geändert:',pbar.progressbar("option", "value"))

},complete: function(){

console.log('Vorgang abgeschlossen.');}

};

6.6.3 Akkordeon-Widget

Das Akkordeon-Widget gehört zu den Content-Widgets. Es handelt sich um ein Layout-

Element, das auf begrenzter und definierbarer Fläche mehrere alternative Inhalte (in

Form so genannter Content-Panes) zeigen kann, von denen gewöhnlich jeweils nur

einer aktiv ist.

Eine Content-Pane besteht aus einem Überschriftenelement (Header Bar) und dem

eigentlichen Inhaltsbereich.

Abbildung 6.16 Ajax-Progressbar mit animiertem Hintergrund und Events


575

6

Der Header Bar dient als Klickfläche, um den Inhalt zu zeigen (und gegebenenfalls

wieder zu verstecken. Je nach Konfiguration schließt sich ein geöffneter Inhalt beim

Öffnen eines anderen Panes automatisch. Die Inhaltsfläche kann mit beliebigem

HTML-Inhalt gefüllt werden.

Die HTML-Struktur folgt einem Muster:

<div id="accordioncontainer"><h3>Header Bar 1</h3><div>Contentbereich 1</div><h3>HeaderBar 2</h3><div>Contentbereich 2</div>...

</div>

Im HTML muss also stets ein äußeres DIV-Element die Rolle des Widget-Containers

übernehmen. In diesem Container folgen Paare aus Überschriften-Containern und

wiederum DIV-Containern aufeinander.

Jedes dieser Paare erzeugt gemeinsam ein Content Pane, das aus Header Bar und

Contentbereich besteht.

Abbildung 6.17 Einfaches Akkordeon ohne weitere Konfiguration

6 jQuery UI

576

Es kommt allein auf die Struktur an

Allein die paarige Struktur ist entscheidend. Es ist nicht erforderlich, dass der Hea-

der-Bar-Container wirklich eine Überschrift ist. Jedes beliebige Blockelement funkti-

oniert, also auch DIV- oder P-Container ebenso wie jede Überschrift von H1 bis H6.

Auch muss der Contentbereich nicht notwendigerweise ein DIV-Container sein –

dies ist allerdings dann erforderlich, wenn der Inhalt eine Struktur (z. B. mehrere

Absätze o. Ä.) erhalten soll. Soll der Inhalt lediglich einen Absatz umfassen, so

genügt ein P-Container für den Contentbereich.

<div id="accordion">...

</div>

Geht man von einem Widget-Container mit id="accordion" aus (siehe oben), der eine

geeignete Innenstruktur besitzt, so genügt folgender Aufruf:

$(document).ready( function() {$("#accordion").accordion();

});

Konfiguration des Akkordeons

Auch das Akkordeon kann über ein Konfigurationsobjekt konfiguriert werden. Fol-

gende Eigenschaften existieren:


active Number (0) Nennt das aktuell offene Panel (Array-

Index; oberstes Panel hat Index 0).

Mit active:false sind alle Panels beim

Laden geschlossen. Gleichzeitig muss

collapsible:true stehen.

animate String oder Object

({})

Effekt beim Panel-Wechsel, z. B.

animate: "bounceslide"

Anmerkung: Option derzeit buggy!

event String (»click«) Nennt das Ereignis (oder die Ereignisse),

das (die) den Panelwechsel steuert

(steuern):

event: "mouseover"

Tabelle 6.6 Konfigurationseigenschaften des Akkordeons


577

6

6.6.4 Tab-Widget

Ebenso wie das Accordion-Widget gehört das Tab-Widget zu den Layout-Widgets.

Auch hier werden Content-Panes gezeigt, zwischen denen gewechselt wird, jedoch

erfolgt die Steuerung über eine Karteireiter-Navigation (»Tabs«).

collapsible boolean (false) Erlaubt mit true das Schließen aller

Panels

header Selector Nennt das Element, das im Markup die

Rolle des Header-Containers spielt.

heightstyle String (»auto«) Die Höhe des Widgets:

»auto«: Höhe des höchsten Panels

»fill«: Höhe des Parent-Containers

»content«: pro Panel individuell

icons Object Nennt das Icon im Header-Bar:

icons: { "header": "ui-icon-plus", "headerSelected": "ui-icon-minus"}


Tabelle 6.6 Konfigurationseigenschaften des Akkordeons (Forts.)

Abbildung 6.18 Tab-Widget mit vier Tabs

6 jQuery UI

578

Zum Erstellen genügt die Anwendung der Methode .tabs() auf dem Widget-Contai-

ner (üblicherweise ein DIV-Container):

$(document).ready( function() {$("#tabs").tabs();

});

Die HTML-Struktur ist etwas komplexer als beim Akkordeon – die Tab-Navigation

besteht aus einer UL-Liste, die sich als erstes Child im Widget-Container befindet:

<div id="tabs"><ul>

<li><a href="#tabs-1">Alice (Teil 1)</a></li><li><a href="#tabs-2">Alice (Teil 2)</a></li>...

</ul>...</div>

Pro Content-Pane muss ein List-Item mit Link vorhanden sein, das einen Fragment-

Identifier besitzt, der auf ein Pane mit entsprechender ID zielt.

<div id="tabs"><ul>

<li><a href="#tabs-1">Alice (Teil 1)</a></li><li><a href="#tabs-2">Alice (Teil 2)</a></li>...

</ul><div id="tabs-1">

...</div><div id="tabs-2">

...</div>

...</div>

Tab mit externen Inhalten per Ajax

Die Content-Panes eines Tab-Widgets können auf einfachste Weise per Ajax befüllt

werden. Im Prinzip genügt es, statt das Fragment-Identifier-Links einen Link auf eine

externe Ressource in die Tab-Navigation zu platzieren:

<div id="tabs"><ul><li><a href="#tabs-1">Alice (Teil 1)</a></li>

6.7 Formular-Widgets aus jQuery UI

579

6

<li><a href="alice01.html">Alice (Teil 2)</a></li><li><a href="alice02.html">Alice (Teil 3)</a></li><li><a href="alice03.html">Alice (Teil 4)</a></li>

</ul><div id="tabs-1"><p>Ich komme nicht per Ajax</p>

</div></div>

Für die per Ajax geladenen Tabs braucht kein korrespondierendes Content-Pane im

Markup eingefügt werden!


Speziell für Formulare hält jQuery UI einige Widgets bereit, die immer dort gelegen

kommen, wo korrespondierende HTML5-Formularelemente nicht verfügbar sind

(ältere Browser) oder aus anderen Gründen nicht erwünscht sind (ungenügend kon-

figurierbar oder nicht ausreichend stylebar). Auch in Zeiten, wo beispielsweise der

Abbildung 6.19 Tab-Inhalte werden per Ajax geladen

6 jQuery UI

580

Datepicker-Input nativ verfügbar ist, haben diese Widgets nach wie vor einige

Berechtigung.

Im folgenden Abschnitt wird das Gewicht auf Datepicker, Slider und den erweiterten

Button sowie die Autocomplete-Funktionalität gelegt. Es stehen jedoch noch weitere

Widgets wie z. B. der Spinner für Zahleneingabe zur Verfügung.

6.7.1 Datepicker

Ein spezielles Formularelement zur Eingabe von Datumswerten verfügbar zu haben,

birgt enorme Vorteile. Zwei davon stehen im Vordergrund:

� Reglementierung des Eingabeformats:

Der Datums-String liegt in einem Format vor, wie es für die Verarbeitung erforder-

lich ist.

� Intuitive Bedienung:

Der User wählt das Datum in einer übersichtlichen Kalendermetapher.

Das Fehlen eines entsprechenden nativen Elements führte in HTML5 zur Einführung

des Input-Typs »date«. Seitdem braucht man (in der Theorie) eigentlich nicht mehr

als dies hier:

<input type="date" name="datum">

Abbildung 6.20 Nativer HTML5-Date-Input in Opera (links) und Chrome (rechts)


581

6

Eigentlich hat man hier mehrere Vorteile:

� Unabhängigkeit von JavaScript

� Native Validierung im Rahmen der HTML5-Formularvalidierung

Den Vorteilen stehen aber auch gravierende Nachteile gegenüber:

� Mangelhafte Unterstützung:

Implementierung bislang nur in aktuellen Opera- und (teilweise) Chrome-Brow-

sern (siehe: http://caniuse.com/#feat=input-datetime)

� Mangelhafte Gestaltungsmöglichkeiten:

Das Widget Interface wird durch den Browser im Rahmen der vom Betriebssystem

vorgegebenen Gestalt erzeugt. Ein Einfluss (Theming) per CSS ist nicht möglich.

Das jQuery-Widget Datepicker

Der jQuery-Weg ist bereits altbekannt – ein HTML-Element (sinnvollerweise ein For-

mular-Input) wird per ID ausgewählt und die UI-Methode datepicker() darauf ange-

wendet:

<input type="text" id="datepicker">

Hier der Code:

$(document).ready( function() {$("#datepicker").datepicker();

});

Abbildung 6.21 jQuery UI-Datepicker in Opera (links) und Chrome (rechts)

6 jQuery UI

582

Lokalisierung des Datepickers

Die Oberfläche des Widgets ist per Default in Englisch gehalten. Eine andere Lokali-

sierung erfordert das Einbinden einer passenden Lokalisierungsdatei – Sie finden alle

derartigen Dateien im Ordner development-bundle/ui/ Ihres UI-Pakets im dortigen

Unterordner i18n/.

Kopieren Sie von dort das File jquery.ui.datepicker-de.js (deutsche Lokalisierung) und

legen Sie es in Ihr js-Verzeichnis, am besten in ein neues Unterverzeichnis i18n/.

Binden Sie die Datei wie folgt ein:

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

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

<script type="text/javascript"src="../js/i18n/jquery.ui.datepicker-de.js"></script>

Achtung: Die Lokalisierung ist nicht automatisch im UI-Script inkludiert!

Legen Sie noch eine weitere Datei, jquery.ui.datepicker-fr.js, in das lokale i18n-Ver-

zeichnis. Nun können Sie die Lokalisierung zwischen deutscher und französischer

Ausgabe umstellen.

Abbildung 6.22 Datepicker, deutsch lokalisiert


583

6

Der Datepicker besitzt ein Objekt-Attribut $.datepicker.regional, das die geladenen

Lokalisierungen enthält. Die Default-Lokalisierung befindet sich in einem Property

mit dem Key "" (leerer String).

Solange nur eine zusätzliche Lokalisierung geladen ist, befindet sich nur ein weiteres

Property im Objekt (derzeit "de" für Deutsch). Laden Sie nun die französische Lokali-

sierung dazu:

...<script type="text/javascript"

src="../js/i18n/jquery.ui.datepicker-de.js"></script><script type="text/javascript"

src="../js/i18n/jquery.ui.datepicker-fr.js"></script>...

Sie sehen, dass der Datepicker nun eine französische Oberfläche besitzt – binden Sie

einzelne Lokalisierungen ein, so gilt stets die letzte.

Um die deutsche Lokalisierung (wieder) zu erhalten, ohne die Reihenfolge der Script-

einbindung zu verändern, können Sie die Lokalisierung als Argument bei der Gene-

rierung des Widgets übergeben:

$("#datepicker").datepicker($.datepicker.regional["de"]

);

Achtung: Hier wird kein Konfigurationsobjekt übergeben! Die Konfiguration gilt

obendrein nur für das aktuelle Widget.

Wollen Sie alle Datepicker des Dokuments gleichmäßig lokalisieren, so geschieht

dies über die Option $.datepicker.setDefaults():

$.datepicker.setDefaults($.datepicker.regional["de"]);

Dies setzt alle Datepicker-Widgets auf die deutsche Lokalisierung. Möchten Sie auf

die Default-Lokalisierung zurück, so übergeben Sie statt "de" den leeren String "":

$.datepicker.setDefaults($.datepicker.regional[""]);

Noch mehr Lokalisierungen

Um allumfassende Lokalisierungsmöglichkeiten verfügbar zu haben, binden Sie die

Datei jquery-ui-i18n.js ein. Diese Datei ist allerdings im Verhältnis (69kB) recht groß.

...<script type="text/javascript"

src="../js/jquery-ui.js"></script>

6 jQuery UI

584

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

...

Nun können Sie die Lokalisierung (wie auch immer) anpassen – hier geschieht dies

über folgende Select-Option:

<select id="locale"><option value="da">Danish (Dansk)</option><option value="en-GB">English/UK</option><option value="fi">Finnish (suomi)</option><option value="de">German (Deutsch)</option><option value="fr" >French (Français)</option><option value="no">Norwegian (Norsk)</option>

</select>

Die aktuelle Lokalisierung des Datepicker-Widgets geschieht über folgende Funktion

(setzt den Parameter über die Setter-Funktion der Optionen):

$("#locale").change(function() {$("#datepicker" ).datepicker(

"option", $.datepicker.regional[$(this).val()]);

});

Abbildung 6.23 Datepicker nach Umschaltung auf finnische Lokalisierung


585

6

Konfiguration des Datepickers

Optionen für einen Datepicker können (derzeit) nicht sinnvoll im Rahmen eines

Konfigurationsobjekts während der Widget-Erstellung gesetzt werden.

Setzen Sie sie stattdessen nachträglich über den Option-Setter:

// Widget erstellen:var dp = $("#datepicker").datepicker();// Widget konfigurieren:dp.datepicker("option", "showAnim", "slideDown");

Dies ändert die Einblendeanimation eines Datepickers auf SlideDown.

Auf folgendem Weg erreichen Sie, dass für Monat und Jahr je ein Dropdownmenü im

Widget erscheint:

var dp = $("#datepicker").datepicker();dp.datepicker("option", {

changeMonth: true,changeYear:true

});

Sie können dem Option-Setter auch ein Objekt übergeben!

Das Ausgabeformat des Datums steuern Sie über die dateFormat-Option:

var dp = $("#datepicker").datepicker();dp.datepicker( "option", "dateFormat", "yy-mm-dd" );

Abbildung 6.24 Datepicker mit changeYear- und changeMonth-Option

6 jQuery UI

586

API des Datepickers

Eine Übersicht über die API des Datepickers erhalten Sie hier:

http://api.jqueryui.com/datepicker

6.7.2 Slider

Das Slider-Widget stellt eine intuitiv nutzbare Eingabemöglichkeit für numerische

Werte dar, die vom Nutzer einfach durch Ziehen eines Schiebereglers vorgenommen

werden kann.

Das Basis-Element eines Sliders ist gewöhnlich ein Div-Container, auf den die UI-

Methode slider() angewendet wird:

<div id="slider"></div>

Dieses wird einfach zum Slider gemacht:

$(document).ready( function() {$("#slider").slider();

});

Ein Slider ist kein Range-Input!

Ein Enhancement eines Inputs, um den HTML5-Input »range« zu simulieren, ist

nicht möglich. Basis-Element muss ein Container sein!

Am Slider treten bei Betätigung Ereignisse auf, an die per Konfiguration Handler-

Funktionen attacht werden können. Hier ein Beispiel für das Change-Ereignis, das bei

Verschieben des Reglers auftritt. Es wird der Inhalt eines Span-Containers mit dem

aktuellen Wert nach Betätigen gefüllt:

<div id="slider"></div><div>Slider steht auf: <span id="output">0</span></div>

Hier der Code:

var out = $('#output');$("#slider").slider({

change:function(evt, ui){console.log(ui.value);out.html(ui.value);

}});


587

6

Der Callback erhält als erstes Argument evt ein Event-Objekt, als zweites Argument

ui den Slider, dessen value direkt auslesbar ist.

Möchten Sie eine kontinuierliche Ausgabe bereits während der Bewegung (Change

feuert erst nach Abschluss der Bewegung), so verwenden Sie das Event slide:


slide:function(evt, ui){out.html(ui.value);

}});

Über den step-Parameter kann eine Rasterung des Regelbereichs (von 0 bis 100)

erreicht werden:


step : 10,slide:function(evt, ui){

out.html(ui.value);}

});

Mit Hilfe der Optionen min und max lässt sich der Regelbereich beliebig definieren:


min : 10,

Abbildung 6.25 Slider mit Wertausgabe

6 jQuery UI

588

max : 20,step : 2,slide:function(evt, ui){

out.html(ui.value);}

});

Mit der range-Option lässt sich ein Slider mit zwei Reglern definieren. Der value

nimmt dann die Form eines Arrays an:


range: true,min: 0,max: 250,values: [ 50, 150 ], // Startwerte

slide:function(ev, ui){out.html(ui.values[0] +

'€ bis ' +ui.values[1] +'€.');

}});

Abbildung 6.26 Slider mit min, max (zwischen 10 und 20), sowie step


589

6

API des UI-Sliders

Die komplette API des UI-Sliders finden Sie hier:

http://jqueryui.com/slider

6.7.3 Button

Das Buttonwidget von jQuery UI erzeugt klickbare Button-Elemente auf der Grund-

lage unterschiedlicher HTML-Markups, die über das jeweilige UI-Theme gestaltet

sind. Mit dem Widget können Einzel-Buttons, aber auch Buttonarrays (analog zu

Checkboxen oder Radiobuttons) realisiert werden, die auf Wunsch auch mit einem

Icon versehen werden können.

Das unterliegende Markup kann sein:

� ein Button-Element <button>

� ein Input des Typs »button«, »submit« oder »refresh«

� ein beliebiger Link in Form eines <a>-Elements

Auf das entsprechend ausgewählte Element ist lediglich die UI-Methode button()

anzuwenden.

Abbildung 6.27 Ein Slider als Range-Regler mit zwei Eckwerten

6 jQuery UI

590

Einfacher Button

Einen einfachen Button erreichen Sie, indem Sie die UI-Methode auf ein passendes

HTML-Element anwenden – hier ist es ein Buttoncontainer:

<button id="meinButton">Ein einfacher Button</button>

Hier der Code dazu:

$(document).ready( function() {$("#meinButton")

.button()

.click(function( event ) {console.log("Button geklickt.");

});});

Sie können ein Icon über das Konfigurationsobjekt hinzufügen – die Option icons

erhält ein Objekt, das die Properties primary und secondary für bis zu zwei Icons

enthält:

$("#meinButton").button( {

icons: {primary: "ui-icon-folder-open"

}});

Abbildung 6.28 Ein Buttonwidget mit Icon


591

6

Eine Übersicht über die verfügbaren Icons und ihre Namen erhalten Sie im Theme-

Roller (Ansicht gekürzt, siehe Abbildung 6.29).

Togglebutton

Ein Togglebutton ist ein Button, der seinen Zustand nach Klick wechselt. Grundlage

für ihn ist ein Checkbox-Input. Die Button-Beschriftung wird dem korrespondieren-

den Label-Container entnommen:

<label for="cb">Toggle-Button</label><input type="checkbox" id="cb">

Folgender Scriptcode ist erforderlich:

$("#cb").button( { icons: {

primary: "ui-icon-folder-collapsed"}

});

Abbildung 6.29 Icons für jQuery UI

6 jQuery UI

592

Buttonarrays mit buttonset()

Mehrere Checkboxen oder Radiobuttons können gemeinsam als Array eingesetzt

werden. Hierfür ist die Methode buttonset() auf die Container-Box der Inputs anzu-

wenden:

<div id="array"><label for="cb1">Rosen</label><input type="checkbox" id="cb1"><label for="cb2">Tulpen</label><input type="checkbox" id="cb2"><label for="cb3">Nelken</label><input type="checkbox" id="cb3">

</div>

Es genügt die einfache Anweisung:

$("#array").buttonset();

Analog können Radiobuttons eingesetzt werden. In diesem Fall kann nur eine

Option selektiert werden.

Abbildung 6.30 Togglebutton (im Toggle-Zustand)

Abbildung 6.31 Buttonarray aus Checkboxen (zweiter Button selektiert)


593

6

API des UI-Buttons

Die komplette API des UI-Buttons finden Sie hier:

http://jqueryui.com/button

6.7.4 Autocomplete

Das Autocomplete-Widget dient als Vorschlagsliste für Text-Inputs, aus der der User

einen Vorschlag durch Klick auswählen kann.

Als zu Grunde liegendes HTML-Element dient ein Text-Input, das von einem Div-

Container mit der Klasse ui-widget umgeben sein muss (ohne dies funktioniert es

nicht):

<div class="ui-widget"><label for="prog">Ihre Lieblingssprache: </label><input type="text" id="prog">

</div>

Hier ist die Datenquelle ein Array:

var sprachen = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL","ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript","Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];$( "#prog" ).autocomplete({source: sprachen});

API des Autocomplete-Widgets

Die komplette API des Autocomplete-Widgets finden Sie hier:

http://api.jqueryui.com/autocomplete

Abbildung 6.32 Autocomplete – alle Items mit »B« werden gezeigt

Inhalt

5

Inhalt

Vorwort .................................................................................................................................................. 17

1 jQuery kennenlernen 21

1.1 Was jQuery alles kann ...................................................................................................... 21

1.2 Ein Framework? Eine Community! .............................................................................. 23

1.3 Nicht ohne mein JavaScript ............................................................................................ 24

1.3.1 Gründe für das Entstehen von Frameworks ............................................... 25

1.3.2 Nochmals – was ist ein Framework? ............................................................. 25

1.3.3 Aufgaben eines Frameworks ............................................................................ 26

1.3.4 Aktuelle Frameworks für JavaScript .............................................................. 27

1.3.5 Frameworks – ein Rückblick ............................................................................. 28

1.4 jQuery – viel mit wenig erreichen ............................................................................... 29

2 Den Arbeitsplatz einrichten 31

2.1 Rechner und Betriebssystem ......................................................................................... 31

2.1.1 Windows ................................................................................................................. 32

2.1.2 Mac OS X ................................................................................................................. 32

2.1.3 Linux ......................................................................................................................... 32

2.2 Browser .................................................................................................................................... 33

2.2.1 Internet Explorer .................................................................................................. 33

2.2.2 Google Chrome ..................................................................................................... 33

2.2.3 Firefox ...................................................................................................................... 33

2.2.4 Safari ........................................................................................................................ 34

2.2.5 Opera ........................................................................................................................ 35

2.3 Webserver .............................................................................................................................. 35

2.4 IDEs und Editoren ................................................................................................................ 36

Inhalt

6

3 jQuery – der Einstieg 41

3.1 Vergleich: JavaScript mit und ohne jQuery ............................................................. 41

3.2 jQuery einbinden ................................................................................................................. 43

3.2.1 jQuery 1.x oder 2.x – was denn nun? ............................................................. 44

3.2.2 jQuery online und offline nutzen ................................................................... 45

3.2.3 jQuery lokal einbinden ....................................................................................... 45

3.2.4 jQuery aus dem Google Online Repository einbinden ............................ 47

3.2.5 Das Beste aus beiden Welten .......................................................................... 48

3.3 Das erste richtige Beispiel mit jQuery ........................................................................ 48

3.4 Wir haben fertig .................................................................................................................. 52

3.5 Das Mausereignis – Bindung eines Click-Events ................................................... 54

3.5.1 Zunächst – die »aufdringliche« Variante ..................................................... 54

3.5.2 Etwas weniger aufdringlich, bitte! ................................................................. 55

3.5.3 Ein unaufdringlicher Dreizeiler, dank jQuery ............................................. 56

3.6 Give me more! – Verkettung von jQuery-Methoden .......................................... 60

3.6.1 Den Elternknoten eines Elements manipulieren ...................................... 61

3.7 Zusammenfassung ............................................................................................................. 66

4 jQuery – die Übersicht 67

4.1 Im Zentrum – das jQuery-Objekt ................................................................................. 67

4.1.1 Drei Arten von jQuery-Methoden ................................................................... 68

4.2 Die Funktion $() und ihre Signatur .............................................................................. 69

4.2.1 Leerer Aufruf ohne Argument ......................................................................... 69

4.2.2 DOM-Elemente, jQuery-Objekt oder Plain Object als Argument ......... 69

4.2.3 HTML-String als Argument ............................................................................... 73

4.2.4 Callback-Funktion als Argument .................................................................... 76

4.2.5 CSS-Selektor als Argument ............................................................................... 77

4.3 CSS-Selektoren für die primäre Collection .............................................................. 80

4.3.1 Die Basisselektoren ............................................................................................. 81

4.3.2 Mehrfachklassenselektor .................................................................................. 82

4.3.3 Gruppen- und Kontextselektoren .................................................................. 82

4.3.4 Attributselektoren ............................................................................................... 85

4.3.5 Basis-Filterausdrücke für Selektoren ............................................................. 89

4.3.6 Inhaltsfilter ............................................................................................................. 94

4.3.7 Filter für Formularelemente ............................................................................. 97

Inhalt

7

4.3.8 Sichtbarkeitsfilter ................................................................................................ 98

4.3.9 Child-Filter – nach Position ............................................................................... 100

4.3.10 Child-Filter – nach Typ und Position .............................................................. 104

4.4 Accessoren – Eigenschaften der Collection ............................................................. 106

4.4.1 Methode .each(callback) .................................................................................... 107

4.4.2 Methode .get() und .get(index) ....................................................................... 109

4.4.3 Methode .index(subject) ................................................................................... 110

4.4.4 Methode .size() ..................................................................................................... 110

4.4.5 Eigenschaft .length .............................................................................................. 110

4.4.6 Eigenschaften .selector und .context ............................................................ 111

4.4.7 Methode .toArray() .............................................................................................. 112

4.4.8 Methode .is() .......................................................................................................... 112

4.5 Traversieren – ausgehend von Collections .............................................................. 113

4.5.1 Was ist und wann benötigt man eine »Traverse«? .................................. 113

4.5.2 jQuery-Methoden zur Achsen-Traverse ....................................................... 114

4.5.3 jQuery-Methoden zur erweiterten Achsen-Traverse ............................... 119

4.5.4 Filtern von Collections ........................................................................................ 127

4.5.5 Aufheben einer Filterung .................................................................................. 133

4.5.6 Kopieren einer Collection .................................................................................. 134

4.6 Events und Event-Handling ............................................................................................ 137

4.6.1 Das Event-Objekt in JavaScript ........................................................................ 137

4.6.2 Das jQuery-Event-Objekt ................................................................................... 139

4.6.3 Die jQuery-Methoden zu Event-Bindung ..................................................... 147

4.6.4 Direktes Binden und Lösen von Event-Listenern ....................................... 148

4.6.5 Convenience-Methoden für direkte Event-Bindung ................................ 156

4.6.6 Shortcut-Methoden für direkte Event-Bindungen ................................... 158

4.6.7 Delegierendes Binden und Lösen von Event-Listenern ........................... 167

4.6.8 Triggern und Erzeugen von Events ................................................................ 173

4.7 Inhalte, Attribute, Datenspeicher ................................................................................ 179

4.7.1 Lesen, Ändern und Entfernen von Attributen und

DOM-Eigenschaften ............................................................................................ 181

4.7.2 Manipulation von Text- und Elementinhalt ............................................... 186

4.7.3 Beliebige Daten an DOM-Elementen speichern ........................................ 191

4.8 Formulare verarbeiten mit jQuery .............................................................................. 194

4.8.1 Filterausdrücke für Formularelemente ........................................................ 194

4.8.2 Filter für Zustände von Formularinputs ....................................................... 198

4.8.3 Binden von Events an Formularelemente ................................................... 202

4.8.4 Serialisierung von Formulardaten .................................................................. 204

4.8.5 Extraktion von Formularfeldwerten .............................................................. 207

Inhalt

8

4.9 DOM-Manipulation ............................................................................................................ 211

4.9.1 Methoden zum Einfügen von Knoten .......................................................... 213

4.9.2 Entfernen von Knoten ........................................................................................ 218

4.9.3 Ersetzen von Knoten .......................................................................................... 221

4.9.4 Wrapping-Methoden ......................................................................................... 223

4.10 CSS und Style-Eigenschaften ......................................................................................... 229

4.10.1 Methoden für das class-Attribut .................................................................... 230

4.10.2 CSS-Eigenschaften manipulieren .................................................................. 238

4.10.3 Abmessungen von Containern ....................................................................... 240

4.10.4 Position von Containern ................................................................................... 242

4.10.5 Scrollen und Scrollposition .............................................................................. 246

4.11 Animationen ......................................................................................................................... 249

4.11.1 Animationen ohne jQuery – CSS3-Transitions und

CSS3-Animations ................................................................................................. 249

4.11.2 jQuery und CSS-Animationen ......................................................................... 255

4.11.3 jQuery-Animationen – Zeigen und Verstecken ......................................... 259

4.11.4 Slides – Zeigen und Verstecken mit Animation ........................................ 263

4.11.5 Fades – Zeigen und Verstecken über Opacity ............................................ 268

4.11.6 Utility-Methoden für Animationen ............................................................... 270

4.11.7 Animation mehrerer CSS-Parameter ............................................................ 274

4.11.8 Die Queue – Warteschlange für Effekte ...................................................... 283

4.11.9 Vollständiges Beispiel zu .queue() ................................................................. 287

4.11.10 Utilities für Queue und Animationen ........................................................... 290

4.12 Deferreds und Promises ................................................................................................... 291

4.12.1 Erzeugen eines Deferred-Objekts .................................................................. 292

4.12.2 Erzeugen eines Promise-Objekts .................................................................... 293

4.12.3 Test des Zustands des Deferred-Objekts ..................................................... 299

4.12.4 Das Deferred auflösen oder zurückweisen: Resolve, Reject, Notify ... 300

4.12.5 Bindung von Callbacks an Deferreds und Promises ................................ 306

4.12.6 Methode deferred.always() .............................................................................. 307

4.12.7 Methode deferred.done() ................................................................................. 308

4.12.8 Methode deferred.fail() ..................................................................................... 308

4.12.9 Methode deferred.progress() .......................................................................... 309

4.12.10 Callback-Bindung mit neuem Promise als Rückgabewert .................... 310

4.12.11 Methode deferred.then() .................................................................................. 311

4.12.12 Methode deferred.pipe() ................................................................................... 316

4.12.13 Deferreds im Einsatz mit Animationen ....................................................... 316

4.12.14 $.when() – Zusammenfassen mehrerer Promises ................................... 322

Inhalt

9

4.13 Managen von Callback-Ketten mit $.Callbacks() .................................................. 328

4.13.1 Callback-Liste erstellen mit $.Callbacks() .................................................... 328

4.13.2 Callback-Liste erweitern – callbacks.add() .................................................. 329

4.13.3 Callback-Liste reduzieren – callbacks.remove() ........................................ 330

4.13.4 Callback-Liste überprüfen – callbacks.has() ............................................... 330

4.13.5 Callbacks feuern – callbacks.fire() und callbacks.fireWith() ................. 331

4.13.6 Callback-Liste leeren – callbacks.empty() ................................................... 333

4.13.7 Callback-Liste stilllegen – callbacks.disable() ............................................ 333

4.13.8 Die Flags der Callback-Liste .............................................................................. 333

4.13.9 Callback-Liste verriegeln – callbacks.lock() ................................................. 336

4.13.10 Ein Click-Counter mit Callback-Liste ............................................................. 338

4.14 Ajax & JSON ........................................................................................................................... 341

4.14.1 Grundlagen zu Ajax ............................................................................................ 342

4.14.2 Daten und Datentypen für Ajax ..................................................................... 346

4.14.3 jQuery und Ajax ................................................................................................... 348

4.14.4 Low-level Ajax-Ultilities .................................................................................... 348

4.14.5 Das jqXHR-Objekt als Promise ........................................................................ 361

4.14.6 Ajax-Utilities und Convenience-Requests .................................................. 365

4.14.7 Globale Handler-Methoden ............................................................................. 377

4.15 Utilities des $-Objekts – praktisches Dies und Das .............................................. 380

4.15.1 Konfliktvermeidung mit anderen Frameworks ......................................... 381

4.15.2 Browser- und Feature-Detection ................................................................... 387

4.15.3 Utilities zur Array-Verarbeitung ..................................................................... 389

4.15.4 Utility zur Stringbearbeitung .......................................................................... 394

4.15.5 Utilities für DOM-Knotenverarbeitung ........................................................ 395

4.15.6 Utilities für Funktionsaufrufe ......................................................................... 398

4.15.7 Objektverarbeitung und Erweiterung von jQuery ................................... 400

4.15.8 Test-Utilities .......................................................................................................... 405

4.16 Zusammenfassung und Ausblick ................................................................................. 408

5 jQuery – der Praxiseinsatz 409

5.1 Wie organisiere ich meine Scripte ............................................................................... 410

5.1.1 Die klassische Notation ..................................................................................... 411

5.1.2 Verwendung von Objekt-Literalen ................................................................ 412

5.1.3 Das Modul-Muster .............................................................................................. 414

5.1.4 Sinn und Unsinn dieses Beispiels ................................................................... 416

5.1.5 Zusammenfassung ............................................................................................. 418

Inhalt

10

5.2 Schönere Navigationen .................................................................................................... 418

5.2.1 Die FlyOut-Navigation ........................................................................................ 419

5.2.2 Flyout mit CSS-Transitions ................................................................................ 430

5.2.3 Flyout-Menü mit dem Plugin-Transit ............................................................ 434

5.2.4 Die Tabs: Karteireiter .......................................................................................... 436

5.2.5 Das Akkordeon ...................................................................................................... 441

5.2.6 Das Tree-Menu ...................................................................................................... 445

5.2.7 Zusammenfassung .............................................................................................. 451

5.3 Von Tooltips und Links ...................................................................................................... 451

5.3.1 Tooltips .................................................................................................................... 451

5.3.2 Links sammeln, im Footer ausgeben ............................................................. 454

5.4 Spiel mit Bildern .................................................................................................................. 456

5.4.1 Galerie I: Einfache Slideshow ........................................................................... 459

5.4.2 Galerie II: Imagebox ............................................................................................ 468

5.4.3 Die Original Lightbox .......................................................................................... 478

5.5 Ajax mit jQuery einsetzen ............................................................................................... 480

5.5.1 Laden von HTML-Elementen ............................................................................ 481

5.5.2 Laden von JSON .................................................................................................... 489

5.5.3 Laden von JSONP .................................................................................................. 495


5.6 Formulare beherrschen mit jQuery ............................................................................. 497

5.6.1 Formulare validieren ........................................................................................... 498

5.6.2 Formulare senden mit Ajax .............................................................................. 504

5.6.3 Datepicker .............................................................................................................. 507

5.6.4 Nächste Ausbaustufe: Autocomplete ........................................................... 509

5.7 Flexible Tabellen mit jQuery .......................................................................................... 513

5.7.1 Die Zebra-Tabelle ................................................................................................. 513

5.7.2 Die Tabelle sortieren ........................................................................................... 517

5.7.3 Paginierung von Tabellen .................................................................................. 524

5.7.4 Grid-Plugins ........................................................................................................... 529


5.8 Von Browsern und Fenstern ........................................................................................... 535

5.8.1 Cookies .................................................................................................................... 535

5.8.2 Die History des Browsers ................................................................................... 541

5.8.3 Scrolling ................................................................................................................... 545

5.8.4 Für faule Browser: Lazy-Load ........................................................................... 548


Inhalt

11

6 jQuery UI 551

6.1 Download und Konfiguration von jQuery UI .......................................................... 552

6.1.1 Der Download Builder von jQuery UI ............................................................ 553

6.2 Theming von jQuery UI ..................................................................................................... 554

6.2.1 Scoped Themes ..................................................................................................... 556

6.3 Einsatz von jQuery UI ........................................................................................................ 558

6.3.1 Dateistruktur von jQuery UI ............................................................................. 558

6.4 Einbinden von jQuery UI .................................................................................................. 559

6.5 CSS-Klassen eines UI-Widgets ....................................................................................... 560

6.6 Layout-Widgets aus jQuery UI ...................................................................................... 563

6.6.1 Dialog-Widget ....................................................................................................... 563

6.6.2 Progressbar ............................................................................................................ 570

6.6.3 Akkordeon-Widget .............................................................................................. 574

6.6.4 Tab-Widget ............................................................................................................ 577

6.7 Formular-Widgets aus jQuery UI .................................................................................. 579

6.7.1 Datepicker .............................................................................................................. 580

6.7.2 Slider ......................................................................................................................... 586

6.7.3 Button ...................................................................................................................... 589

6.7.4 Autocomplete ........................................................................................................ 593

6.8 Effekte und Interaktionen aus jQuery UI ................................................................. 594

6.8.1 Die Effekte aus jQuery UI ................................................................................... 596

6.8.2 Interaktionen aus jQuery UI ............................................................................. 603

6.8.3 Drag & Drop mit Draggables und Droppables ........................................... 610

6.8.4 Sortierbare Elemente – Sortables ................................................................... 623

6.8.5 Größenveränderbare Elemente – Resizables .............................................. 635

6.8.6 Auswählbare Elemente – Selectables ........................................................... 643


7 Plugin-Entwicklung für jQuery 649

7.1 Das Plugin-Repository von jQuery ............................................................................... 650

7.1.1 Suche im Repository ............................................................................................ 651

7.1.2 Ein Plugin downloaden ...................................................................................... 652

7.1.3 Ein Plugin anwenden .......................................................................................... 654

Inhalt

12

7.2 Selbst ist der Mann – eigene Plugins schreiben .................................................... 658

7.2.1 Plugin-Gattungen: Functions und Methods ............................................... 659

7.3 jQuery-Function-Plugin .................................................................................................... 659

7.3.1 Function-Plugin – der Aufbau .......................................................................... 660

7.3.2 Beispiel für ein Function-Plugin – ein einfacher Logger ......................... 660

7.3.3 Beispiel für ein Function-Plugin – Ein CSS-Tool ......................................... 662

7.4 jQuery-Method-Plugin ...................................................................................................... 663

7.4.1 Method-Plugin – der Aufbau ........................................................................... 664

7.5 Method-Plugin – Setzen von CSS-Styles ................................................................... 665

7.5.1 Method-Plugin mit Argument ......................................................................... 665

7.5.2 Method-Plugin mit mehreren Argumenten ............................................... 666

7.5.3 Method-Plugin mit Konfigurationsobjekt ................................................... 667

7.5.4 toggleClick – Ein Ersatz für die Event-Methode .toggle() ....................... 671

7.5.5 multiToggle – Noch ein Ersatz für die Event-Methode .toggle() .......... 673

7.5.6 Method-Plugin mit Subroutinen .................................................................... 677

7.6 Das jQuery-Method-Plugin rekapituliert ................................................................. 683


8 Responsive Webdesign 685

8.1 Wann macht ein Responsive Layout Sinn? .............................................................. 686

8.2 Methodik: Mobile first vs. Desktop first ................................................................... 686

8.3 Media-Queries ...................................................................................................................... 687

8.3.1 Media-Angabe für verlinkte Stylesheets ...................................................... 688

8.3.2 Media-Angabe für Stylesheet-Import ........................................................... 688

8.3.3 Media-Angabe innerhalb eines Stylesheets ............................................... 688

8.4 Syntax der CSS-Media-Angabe ..................................................................................... 689

8.4.1 Typangabe des User Agents ............................................................................. 689

8.4.2 Query-Aspekt der Media-Query ...................................................................... 691

8.4.3 Keywords für Media-Queries ........................................................................... 691

8.5 Media-Features des User Agents ................................................................................. 693

8.5.1 Media-Features: width, height ........................................................................ 694

8.5.2 Media-Features: device-width, device-height ............................................ 694

8.5.3 Media-Feature: orientation .............................................................................. 695

8.5.4 Media-Features: aspect-ratio, device-aspect-ratio ................................... 695

8.5.5 Media-Feature: color ........................................................................................... 695

Inhalt

13

8.5.6 Media-Feature: color-index .............................................................................. 696

8.5.7 Media-Feature: monochrome .......................................................................... 696

8.5.8 Media-Feature: resolution ................................................................................ 697

8.6 Einsatz der Media-Query im Responsive Layout ................................................... 697

8.6.1 Anpassung des Layouts anhand der Viewport-Breite ............................. 698

8.7 Responsive Design und jQuery ..................................................................................... 700

8.7.1 Reihenfolge von Containern ändern ............................................................. 700

8.7.2 Bilder in verschiedenen Auflösungen ........................................................... 702

8.7.3 Slider mit Touch .................................................................................................... 703

8.7.4 Maurerhandwerk mit JavaScript und jQuery ............................................. 706


9 Going mobile mit jQuery 709

9.1 Ein Seitenblick auf die mobile Welt ............................................................................ 709

9.2 Emulatoren und IDEs für Mobilgeräte ....................................................................... 711

9.2.1 Emulatoren und IDEs für iPhone ..................................................................... 711

9.2.2 Dreamweaver CC für jQuery Mobile .............................................................. 714

9.3 Ins mobile Web mit jQuery Mobile ............................................................................. 716

9.3.1 Download oder Einbinden von der Website ............................................... 718

9.3.2 Der jQuery Mobile Download Builder ........................................................... 719

9.4 Ein erstes Dokument mit jQuery Mobile .................................................................. 720

9.4.1 jQuery Mobile-Dateien im Header einbinden ............................................ 720

9.4.2 Grundstrukturen im Body ................................................................................. 721

9.4.3 Mehrere Seiten in einem Dokument ............................................................. 722

9.4.4 Eine einfache Navigation .................................................................................. 723

9.4.5 Navigationen in der Toolbar ............................................................................. 725

9.5 Seitenübergänge ................................................................................................................. 727

9.6 Listenbuttons ........................................................................................................................ 729

9.6.1 Listviews mit Count-Bubbles ........................................................................... 730

9.6.2 Listenbuttons in Splitviews .............................................................................. 731

9.6.3 Listview mit Splitansicht – verbesserte Version ........................................ 733

9.6.4 Seiten per Ajax ansprechen .............................................................................. 735

9.7 Navbar-Button-Leisten ..................................................................................................... 736

9.7.1 Navbar im Header ................................................................................................ 736

9.7.2 Navbar im Content-Bereich .............................................................................. 737

Inhalt

14

9.7.3 Navbar im Footer-Bereich ................................................................................. 738

9.7.4 Button-Leisten und Data-Grid ......................................................................... 738

9.7.5 Button-Leisten mit Icons ................................................................................... 741

9.8 Layoutraster – Inhalte anordnen ................................................................................. 744

9.9 Collapsibles – Platzsparende Inhalte ......................................................................... 746

9.9.1 Collapsibles ............................................................................................................ 746

9.9.2 Collapsible-Sets .................................................................................................... 747

9.10 Formulare mit jQuery Mobile ........................................................................................ 749

9.10.1 Progressiv erweiterte Formularelemente .................................................... 750

9.10.2 Native Formularelemente ................................................................................. 751

9.10.3 Formularelemente im Einzelnen .................................................................... 751

9.10.4 Formulare versenden .......................................................................................... 756

9.10.5 Plugin-Methoden ................................................................................................. 756

9.10.6 Zurücksetzen (Degradieren) von Formularelementen ............................ 759

9.11 Themes und Swatches – Farben und Hintergründe ............................................ 759

9.11.1 Eigene Themes – »Roll your own« mit dem ThemeRoller ...................... 765

9.12 Das mobileinit-Event ......................................................................................................... 771

9.12.1 Enhancement des jQuery Mobile-Dokuments ........................................... 772

9.12.2 Die Optionen des $.mobile-Konfigurationsobjekts .................................. 775

9.12.3 HTML5-data-Attribute in jQuery Mobile ...................................................... 779

9.13 Events in jQuery Mobile ................................................................................................... 792

9.14 Methoden von jQuery Mobile ....................................................................................... 798

9.15 Zusammenfassung ............................................................................................................. 806

10 Der eigene jQuery-Build 807

10.1 Voraussetzungen zum Erstellen eines Builds ......................................................... 808

10.1.1 Installation von Git .............................................................................................. 809

10.1.2 Installation von NodeJS ..................................................................................... 811

10.1.3 Installation von Grunt und Bower .................................................................. 812

10.2 Das Git-Repository klonen .............................................................................................. 813

10.3 Einen Build des vollständigen jQuerys erzeugen .................................................. 814

10.4 Einen individuellen jQuery-Build aufbauen ............................................................ 816

Inhalt

15

11 QUnit – Testen mit jQuery 821

11.1 Ideen zum Testen von JavaScript ................................................................................. 821

11.1.1 Das alert-Statement ............................................................................................ 821

11.1.2 Die Konsole als Ausgabemedium ................................................................... 822

11.1.3 Eine Funktion durchleuchten ........................................................................... 822

11.2 Testen mit Unit-Tests ........................................................................................................ 825

11.2.1 Enter QUnit ............................................................................................................ 826

11.3 Ein Blick auf QUnit .............................................................................................................. 826

11.3.1 Download und Einbinden von QUnit ............................................................ 827

11.4 Ein Test mit QUnit – die Methode test() ................................................................... 831

11.5 Assertions ............................................................................................................................... 832

11.5.1 ok() ............................................................................................................................ 832

11.5.2 equal() und notEqual() ....................................................................................... 835

11.5.3 deepEqual() und notDeepEqual() ................................................................... 837

11.5.4 strictEqual() und notStrictEqual() ................................................................... 838

11.6 Module – mehrere Tests unter einer Haube ........................................................... 840

11.7 Testen asynchroner Anwendungen ............................................................................ 842

11.7.1 Das Kontextproblem bei asynchronen Tests .............................................. 842

11.7.2 Explizites Stoppen und Starten des Tests .................................................... 843

11.7.3 Testlauf in Wartestellung – asyncTest() ....................................................... 844


Anhang 847

A HTML und CSS ....................................................................................................................... 847

A.1 Trennungen – Struktur, Präsentation, Verhalten ..................................... 847

A.2 HTML – Beschreibung der Struktur ................................................................ 849

A.3 Aufbau von HTML-Dokumenten ..................................................................... 852

A.4 CSS – Beschreibung der Präsentation ........................................................... 864

B JavaScript und DOM ........................................................................................................... 887

B.1 JavaScript – Beschreibung des Verhaltens .................................................. 887

B.2 Die Synthese – das Document Object Model ............................................. 915

Index ........................................................................................................................................................ 921

Index

921

Index

$()-Funktion ............................................................... 67

Argument Callback ............................................ 76

Argument CSS-Selektor .................................... 77

Argument CSS-Selektor mit Kontext .......... 78

Argument CSS-Selektor mit Kontext,

DOM .................................................................... 78

Argument CSS-Selektor mit Kontext,

Selektor .............................................................. 79

Argument DOM-Collection ............................ 70

Argument DOM-Knoten .................................. 70

Argument HTML-String ................................... 73

Argument HTML-String, owner-

Document ......................................................... 75

Argument jQuery-Objekt ................................. 71

Argument Plain Object .................................... 72

$.ajax ......................................................................... 349

$.ajax, accepts .......................................................... 351

$.ajax, async ............................................................. 358

$.ajax, beforeSend ................................................. 354

$.ajax, cache ............................................................. 358

$.ajax, complete ..................................................... 356

$.ajax, contents ...................................................... 352

$.ajax, contentType ............................................... 351

$.ajax, context ......................................................... 351

$.ajax, converters .................................................. 353

$.ajax, crossDomain ............................................. 357

$.ajax, data ............................................................... 352

$.ajax, dataFilter ..................................................... 355

$.ajax, dataType ..................................................... 352

$.ajax, error .............................................................. 354

$.ajax, global ............................................................ 359

$.ajax, headers ......................................................... 351

$.ajax, ifModified ................................................... 359

$.ajax, isLocal .......................................................... 359

$.ajax, jsonp ............................................................. 357

$.ajax, jsonpCallback ............................................ 357

$.ajax, mimeType .................................................. 359

$.ajax, password ..................................................... 359

$.ajax, processData ............................................... 352

$.ajax, scriptCharset ............................................ 360

$.ajax, statusCode ................................................ 360

$.ajax, success ......................................................... 355

$.ajax, timeout ....................................................... 360

$.ajax, traditional ................................................. 360

$.ajax, type .............................................................. 350

$.ajax, url ................................................................... 351

$.ajax, username .................................................... 359

$.ajax, xhr .................................................................. 361

$.ajax, xhrFields ...................................................... 361

$.ajaxSetup .............................................................. 349

$.boxModel ............................................................. 387

$.browser .................................................................. 387

$.Callbacks() ............................................................. 328

$.Callbacks(), callbacks.add() ............................. 329

$.Callbacks(), callbacks.disable() ...................... 333

$.Callbacks(), callbacks.disabled() ................... 333

$.Callbacks(), callbacks.empty() ....................... 333

$.Callbacks(), callbacks.fire() .............................. 331

$.Callbacks(), callbacks.fired() ............................ 331

$.Callbacks(), callbacks.fireWith() .................... 331

$.Callbacks(), callbacks.has() ............................. 330

$.Callbacks(), callbacks.lock() ............................ 336

$.Callbacks(), callbacks.locked() ....................... 338

$.Callbacks(), callbacks.remove() .................... 330

$.Callbacks(), Flag 'memory' .............................. 334

$.Callbacks(), Flag 'once' ...................................... 334

$.Callbacks(), Flag 'stopOnFalse' ...................... 336

$.Callbacks(), Flag 'unique' ................................. 335

$.Callbacks(), Flags ................................................ 333

$.contains() .............................................................. 395

$.data() ........................................................................ 193

$.Deferred() .............................................................. 293

$.each() ..................................................................... 390

$.extend() ................................................................ 400

$.extend(obj) .......................................................... 403

$.fn.extend() ........................................................... 403

$.get() ......................................................................... 366

$.getJSON() ............................................................... 369

$.getScript() ............................................................. 370

$.globalEval() ........................................................... 398

$.grep() ....................................................................... 392

$.inArray() ................................................................ 393

$.isArray() ................................................................ 406

$.isEmptyObject() ................................................ 406

$.isFunction() ......................................................... 407

$.isPlainObject() .................................................... 407

$.map() ...................................................................... 393

$.merge() .................................................................. 390

$.mobile.activePage ............................................ 805

$.mobile.changePage() ........................................ 798

$.mobile.loadPage (method) ........................... 800

$.mobile.navigate() .............................................. 801

$.mobile.path.get() .............................................. 803

$.mobile.path.isAbsoluteUrl() ........................ 805

Index

922

$.mobile.path.isRelativeUrl() ........................... 804

$.mobile.path.makePathAbsolute() .............. 803

$.mobile.path.makeUrlAbsolute() ................. 804

$.mobile.path.parseUrl() ................................... 802

$.mobile.silentScroll() ........................................ 805

$.noConflict() ......................................................... 384

$.noConflict(), extreme ...................................... 386

$.param() .................................................................... 371

$.post() ...................................................................... 368

$.proxy() ................................................................... 399

$.pushStack() .......................................................... 396

$.removeData() ....................................................... 193

$.support .................................................................. 388

$.trim() ...................................................................... 394

$.unique() ................................................................. 391

$.when() ..................................................................... 322

A

add() ............................................................................. 125

addBack() ................................................................... 127

addClass() ................................................................. 232

after() .......................................................................... 214

Ajax ............................................................................. 341

$.ajax() ........................................................ 349, 496

$.ajax(), Konfiguration .................................. 349

$.ajaxSetup() ...................................................... 349

$.get() .................................................................... 366

$.getJSON() ......................................................... 369

$.getScript() ........................................................ 370

$.param() .............................................................. 371

$.post() ................................................................. 368

.load() .................................................................... 373

Crossdomain-Request ................................... 495

Cross-Domain-Schranke ................................ 347

Datentypen ........................................................ 346

Datentypen, HTML ......................................... 346

Datentypen, JASONP ....................................... 347

Datentypen, JSON ............................................. 347

Datentypen, Scriptdaten ............................... 347

Datentypen, Textdaten ................................. 346

Datentypen, XML ............................................. 347

klassischer Ansatz ............................................ 342

Low-level Utilities ............................................ 348

mit jQuery .......................................................... 348

Same Domain Policy ....................................... 373

XHR-Objekt ......................................................... 342

XHR-Objekt, .open() ......................................... 342

XHR-Objekt, .send() .......................................... 344

XHR-Objekt, onreadystatechange ............. 343

XHR-Objekt, readyState ................................. 343

Ajax (Forts.)

XHR-Objekt, responseText ........................... 344

XHR-Objekt, Spezifikation ............................ 346

XHR-Objekt, status .......................................... 345

XHR-Objekt, Statusmeldung ....................... 345

XHT-Objekt, responseXML ........................... 347

XMLHttpRequest ............................................... 341

ajaxComplete() ...................................................... 378

ajaxError() ................................................................ 378

Ajax-Request

.ajaxComplete() ................................................ 378

.ajaxError() .......................................................... 378

.ajaxSend() .......................................................... 378

.ajaxStart() ........................................................... 377

.ajaxStop() ........................................................... 378

.ajaxSuccess() ..................................................... 378

allgemein ............................................................. 349

Defaultkonfiguration ..................................... 349

Get .......................................................................... 366

Get JSON .............................................................. 369

Get Script ............................................................. 370

Globale Handler ................................................ 377

Konfiguration .................................................... 350

Konfiguration, accepts-Eigenschaft .......... 351

Konfiguration, async-Eigenschaft ............ 358

Konfiguration, beforeSend-Callback ....... 354

Konfiguration, cache-Eigenschaft ............ 358

Konfiguration, Callbacks .............................. 353

Konfiguration, complete-Callback ........... 356

Konfiguration, contents-Eigenschaft ...... 352

Konfiguration, contentType-

Eigenschaft ..................................................... 351

Konfiguration, context-Eigenschaft ......... 351

Konfiguration, converters-Eigenschaft ... 353

Konfiguration, crossDomain-

Eigenschaft ..................................................... 357

Konfiguration, data-Eigenschaft ............... 352

Konfiguration, dataFilter-Callback ........... 355

Konfiguration, dataType-Eigenschaft ..... 352

Konfiguration, error-Callback .................... 354

Konfiguration, global-Eigenschaft ........... 359

Konfiguration, headers-Eigenschaft ......... 351

Konfiguration, ifModified-Eigenschaft ... 359

Konfiguration, isLocal-Eigenschaft .......... 359

Konfiguration, jsonpCallback-

Eigenschaft ..................................................... 357

Konfiguration, jsonp-Eigenschaft .............. 357

Konfiguration, mimeType-Eigenschaft ... 359

Konfiguration, password-Eigenschaft .... 359

Konfiguration, processData-Eigenschaft 352

Index

923

Ajax-Request (Forts.)

Konfiguration, scriptCharset-

Eigenschaft ................................................... 360

Konfiguration, statusCode-

Eigenschaft ................................................... 360

Konfiguration, success-Callback ................ 355

Konfiguration, timeout-Eigenschaft ....... 360

Konfiguration, traditional-

Eigenschaft ................................................... 360

Konfiguration, type-Eigenschaft .............. 350

Konfiguration, url-Eigenschaft .................... 351

Konfiguration, username-Eigenschaft .... 359

Konfiguration, xhr-Eigenschaft ................. 361

Konfiguration, xhrFields-Eigenschaft ...... 361

Load ....................................................................... 373

Post ....................................................................... 368

ajaxSend() ................................................................. 378

ajaxStart() ................................................................. 377

ajaxStop() .................................................................. 378

ajaxSuccess() ........................................................... 378

Akkordeon-Navigation ....................................... 441

AMD

define() ................................................................. 807

AMD, Asynchronous Module Definition ... 807

andSelf() ..................................................................... 127

animate() .................................................................. 274

Animationen .......................................................... 249

.animate() ............................................................ 274

.animate(), Argumente ................................... 275

.animate(), Dauer ............................................. 276

.animate(), Easing ............................................ 277

.animate(), Easingfunktionen ...................... 278

.animate(), Optionsobjekt ............................. 282

.animate(), Property-Map ............................. 275

.delay() ................................................................... 271

.dequeue() ........................................................... 286

.fadeIn() ............................................................... 270

.fadeOut() ............................................................ 270

.fadeTo() .............................................................. 268

.fadeToggle() ...................................................... 268

.hide() ..................................................................... 261

.queue() ................................................................. 285

.queue(), Callback ............................................ 286

.queue(), Name der Queue ........................... 286

.show() ................................................................... 261

.slideDown() ....................................................... 264

.slideToggle() ..................................................... 266

.slideUp() ............................................................. 264

.stop() ..................................................................... 272

.toggle() ................................................................ 261

Abbrechen von ................................................... 272

Animationen (Forts.)

CSS-Eigenschaften animieren ..................... 274

Dauer .................................................................... 261

Easingfunktionen ............................................. 277

Easingfunktionen, Default .................. 278, 279

Fades ..................................................................... 268

Farbwerte animieren ...................................... 276

Globaler Stop .................................................... 290

jQuery Easing Plugin ...................................... 278

Queue .................................................................... 283

Slides ..................................................................... 263

Utilities ....................................................... 270, 290

Verzögerung ....................................................... 271

Zeigen und Verstecken ................................... 259

append() ..................................................................... 217

appendTo() ............................................................... 218

Array-Verarbeitung ............................................. 389

$.each() ................................................................ 390

$.grep() .................................................................. 392

$.inArray() ........................................................... 393

$.map() ................................................................. 393

$.merge() ............................................................. 390

$.unique() .............................................................. 391

Test auf Array ................................................... 406

attr() ............................................................................. 183

Attribute ................................................................... 180

entfernen ............................................................. 184

lesen ........................................................................ 183

schreiben .............................................................. 183

B

before() ....................................................................... 217

bind() .......................................................................... 148

blur() .................................................................. 162, 203

Bower ........................................................................ 809

C

change() ........................................................... 162, 203

children() ................................................................... 116

click() ........................................................................... 159

clone() ................................................................ 135, 216

closest() ...................................................................... 122

Collection, Eigenschaften .................................... 68

Collection, primäre ................................................ 67

contents() .................................................................. 117

context ........................................................................ 111

Cookies ....................................................................... 535

css() ............................................................................. 238

Index

924

CSS-Anweisung

Aufbau ................................................................. 867

Deklarationsblock ........................................... 867

Eigenschaftsdeklaration .............................. 867

Selektor ................................................................ 867

CSS-Datei, Import ................................................. 865

CSS-Datei, Verlinkung ........................................ 864

CSS-Eigenschaften

.addClass() ........................................................... 232

.css() ....................................................................... 238

.hasClass() ............................................................ 231

.height() ................................................................ 241

.innerHeight() ..................................................... 241

.innerWidth() ...................................................... 241

.outerHeight() .................................................... 241

.outerWidth() ...................................................... 241

.removeClass() ................................................... 234

.toggleClass() ...................................................... 235

.width() .................................................................. 241

Abmessungen ................................................... 240

animieren ............................................................ 274

computed height ............................................. 240

computed width ............................................... 240

Position ................................................................ 242

Scrollposition .................................................... 246

CSS-Selektoren

Gruppierung ...................................................... 868

ID-Selektor .......................................................... 870

Klassenselektor, frei ....................................... 869

Klassenselektor, gebunden .......................... 869

Typ-Selektor ....................................................... 868

D

data() .......................................................................... 192

dblclick() .................................................................... 159

Deferred .................................................................... 291

always() ............................................................... 307

done() ................................................................... 308

fail() ....................................................................... 308

isRejected(), Deprecated .............................. 300

isResolved(), Deprecated .............................. 300

Konstruktor ........................................................ 293

Methoden ........................................................... 306

notify() ....................................................... 305, 309

notifyWith() ............................................. 305, 309

Pending-Zustand .............................................. 293

pipe() ...................................................................... 316

progress() ............................................................ 309

promise() .................................................... 293, 294

Promise-Objekt .................................................. 293

Deferred (Forts.)

reject() ................................................................... 302

Rejected-Zustand ............................................. 293

rejectWith() ......................................................... 303

resolve() ............................................................... 304

Resolved-Zustand ............................................ 293

resolveWith() ...................................................... 305

state() .................................................................... 299

Status .................................................................... 293

then() ...................................................................... 311

Deferred-Objekt ..................................................... 292

delay() ......................................................................... 271

delegate() ................................................................... 167

dequeue() ................................................................. 286

Desktop first .......................................................... 686

detach() ..................................................................... 220

DHTML ......................................................................... 23

die() [abgeschafft] .................................................. 172

Doctype-Definition ............................................... 851

Doctype-Deklaration ............................................ 851

Document Object Model .................................... 915

Child ...................................................................... 916

decorating the tree ........................................... 917

Dokumentknoten .............................................. 915

Elementknoten .................................................. 916

Parent ................................................................... 916

Dokument-Style ................................................... 866

DOM-Eigenschaften

checked ................................................................. 199

data ....................................................................... 180

dataset ................................................................. 180

disabled ................................................................ 198

innerHTML ................................................... 74, 180

innerText ............................................................. 180

lesen ........................................................................ 185

nodeValue ........................................................... 180

schreiben .............................................................. 185

textContent ........................................................ 180

DOM-Knotenverarbeitung

$.contains() ......................................................... 395

$.pushStack() ...................................................... 396

DOM-Manipulation .............................................. 211

.after() .................................................................... 214

.append() ............................................................... 217

.appendTo() ......................................................... 218

.before() ................................................................. 217

.clone() .................................................................. 216

.detach() ............................................................... 220

.insertAfter() ........................................................ 215

.insertBefore() ..................................................... 217

.prepend() ............................................................. 218

Index

925

DOM-Manipulation (Forts.)

.prependTo() ....................................................... 218

.remove() .............................................................. 219

.replaceAll() ......................................................... 222

.replaceWith() ..................................................... 222

.unwrap() ............................................................. 227

.wrap() ................................................................... 224

.wrapAll() ............................................................. 226

.wrapInner() ........................................................ 225

Einfügen von Knoten ...................................... 213

Entfernen von Knoten .................................... 218

Ersetzen von Knoten ....................................... 221

Wrapping ............................................................. 223

DOM-Manipulation, klassisch .......................... 211

DOM-Methoden

.addEvent-Listener() ......................................... 137

.appendChild() ................................................... 212

.createElement() ........................................... 73, 211

.createTextNode() ............................................. 212

.getAttribute() ................................................... 180

.getElementById() ............................... 69, 70, 137

.getElementsByClassName() ........................... 71

.getElementsByTagName() ..................... 69, 70

.insertBefore() ..................................................... 212

.removeChild() ................................................... 213

.setAttribute() ............................................ 180, 212

DOM-Properties

entfernen ............................................................. 186

DOM-Referenz, online ....................................... 920

DOM-Scripting ......................................................... 23

E

each() .......................................................................... 107

Editoren

Adobe Dreamweaver ........................................ 36

Aptana .................................................................... 37

BBedit ...................................................................... 36

Eclipse IDE ............................................................. 37

Microsoft Visual Studio 2013 ......................... 37

Notepad++ ............................................................ 36

TextWrangler ....................................................... 36

Elementinhalt

lesen ....................................................................... 187

löschen ................................................................. 190

schreiben .............................................................. 187

empty() ..................................................................... 190

end() ............................................................................ 134

eq() ............................................................................... 129

error() ......................................................................... 166

Event

Propagation ........................................................ 145

Event-Bindung

.bind() .................................................................... 148

.blur() ...................................................................... 161

.change() ...................................................... 161, 203

.click() ..................................................................... 159

.dblclick() .............................................................. 159

.delegate() ............................................................. 167

.die() [abgeschafft] ............................................ 172

.error() ................................................................... 166

.focus() .......................................................... 161, 203

.focusin() ...................................................... 161, 203

.focusout() ................................................... 161, 203

.hover() .................................................................. 157

.keydown() ........................................................... 160

.keypress() ............................................................ 160

.keyup() ................................................................. 160

.live() [abgeschafft] ........................................... 172

.load() ..................................................................... 163

.mousedown() ..................................................... 159

.mouseenter() ...................................................... 159

.mouseleave() ...................................................... 159

.mousemove() ..................................................... 159

.mouseout() ......................................................... 159

.mouseover() ....................................................... 159

.mouseup() ........................................................... 159

.off() ......................................................................... 151

.on() ........................................................................ 149

.one() ...................................................................... 157

.resize() .................................................................. 165

.scroll() ................................................................... 165

.select() ......................................................... 162, 203

.submit() ...................................................... 162, 203

.toggle() [Removed] .......................................... 158

.unbind() ................................................................ 151

.undelegate() ...................................................... 168

.unload() .............................................................. 164

Event-Handler ......................................................... 137

Event-Handling ...................................................... 137

Event-Listener ......................................................... 137

Event-Objekt ................................. 137, 138, 205, 368

.isDefaultPrevented() ...................................... 146

.isImmediatePropagationStopped() .......... 145

.isPropagationStopped() ................................ 145

.preventDefault() ............................ 146, 367, 548

.stopPropagation() ........................................... 145

currentTarget ..................................................... 141

Eigenschaften .................................................... 140

keyCode ................................................................. 143

Koordinaten ........................................................ 142

Index

926

Event-Objekt (Forts.)

originalEvent ..................................................... 140

pageX .................................................................... 142

pageY ..................................................................... 142

relatedTarget ...................................................... 141

timeStamp .......................................................... 142

type ........................................................................ 142

vereinheitlichtes E. ........................................... 139

Events

Bubbling-Phase ................................................. 144

Capture-Phase ................................................... 143

Erzeugen von Events ........................................ 173

Fensterevents ..................................................... 164

Formulare ........................................................... 202

Ladeevents .......................................................... 163

Target-Phase ...................................................... 144

Triggern ................................................................. 173

Triggern, .blur() ................................................. 178

Triggern, .change() ........................................... 178

Triggern, .click() ................................................. 178

Triggern, .dblclick() .......................................... 178

Triggern, .focus() ............................................... 178

Triggern, .focusin() ........................................... 178

Triggern, .keydown() ....................................... 178

Triggern, .keypress() ........................................ 178

Triggern, .keyup() ............................................. 178

Triggern, .mousedown() ................................. 178

Triggern, .mouseenter() ................................. 178

Triggern, .mouseleave() ................................. 178

Triggern, .mousemove() ................................. 178

Triggern, .mouseout() ..................................... 178

Triggern, .mouseover() ................................... 178

Triggern, .mouseup() ....................................... 178

Triggern, .resize() .............................................. 179

Triggern, .scroll() ............................................... 179

Triggern, .select() .............................................. 178

Triggern, .submit() ........................................... 178

Weitertragen des Events ................................ 143

Extreme programming ...................................... 825

F

fadeIn() ..................................................................... 270

fadeOut() .................................................................. 270

fadeTo() .................................................................... 268

fadeToggle() ............................................................ 268

filter() ......................................................................... 129

find() ........................................................................... 120

first() ............................................................................ 131

focus() ............................................................... 161, 203

focusin() ........................................................... 161, 203

focusout() ......................................................... 161, 203

Formulare

Autocomplete ................................................... 509

Daten mit Ajax versenden ........................... 504

Datepicker ........................................................... 507

Validierung ........................................................ 498

Formularverarbeitung ........................................ 194

.serialize() ........................................................... 204

.serializeArray() ................................................ 206

.val() ....................................................................... 207

Events ................................................................... 202

Extraktion von Werten .................................. 207

Selektoren ............................................................ 195

Serialisierung .................................................... 204

Zustandsfilter .................................................... 198

Funktionsaufrufe

$globalEval() ...................................................... 398

$noop .................................................................... 398

$proxy() ................................................................ 399

G

Geodaten .................................................................. 510

Geonames ................................................................ 510

Webservice, Konfiguration .......................... 510

get() ............................................................................. 109

Git ............................................................................... 808

Github, jQuery ...................................................... 807

Grids ........................................................................... 529

Grunt ........................................................................ 808

H

has() ............................................................................. 132

hasClass() ................................................................... 231

height() ....................................................................... 241

hide() .......................................................................... 261

hover() ........................................................................ 157

html() .......................................................................... 187

I

index() ........................................................................ 110

innerHeight() ........................................................... 241

innerWidth() ............................................................ 241

insertAfter() .............................................................. 215

insertBefore() ........................................................... 217

iPhone-Emulator

iBBDemo 2 ............................................................ 712

MobiOne ............................................................... 714

is() ......................................................................... 112, 231

Index

927

J

JavaScript

Callback ............................................................... 910

Closure ................................................................. 898

Cookie Objekt ..................................................... 535

Funktionen ......................................................... 895

globale Variable ............................................... 896

Konstruktor ....................................................... 904

Konstruktorfunktionen ............................... 906

Kontrollstrukturen .......................................... 892

lokale Variable ................................................. 897

Namensräume ................................................... 913

Objekte ................................................................. 903

Objektliteral ....................................................... 905

Prototypkette .................................................... 907

Scope .................................................................... 896

ternärer Operator ............................................ 893

JavaScript-Methoden

.apply() ................................................................... 911

.call() ....................................................................... 911

.sort() ..................................................................... 522

jQuery

Erweiterbarkeit ................................................. 649

Plugin-Repository ........................................... 650

Plugins ................................................................. 649

jQuery Mobile ......................................................... 710

Basis-URL ............................................................. 773

Button .......................................................... 754, 759

Checkbox, Radiobutton ................................. 758

Checkboxen ........................................................ 753

data-*-Attribute, Definition ......................... 779

data-*-Attribute, Übersicht .......................... 780

data-count-theme ........................................... 764

data-direction .................................................... 791

data-divider-theme ........................................ 764

data-filter-theme ............................................. 764

data-icon .................................................... 726, 782

data-iconpos ...................................................... 726

data-icon-position ........................................... 784

data-inline ........................................................... 787

data-inset ............................................................ 724

data-position ..................................................... 785

data-rel ................................................................. 785

data-role ............................................................. 786

data-role, button .............................................. 787

data-role, collapsible ...................................... 788

data-role, collapsible-set ............................... 788

data-role, controlgroup ................................. 787

data-role, fieldcontain .................................. 789

data-role, footer ................................................. 721

jQuery Mobile (Forts.)

data-role, header ............................................... 721

data-role, list-divider ...................................... 788

data-role, listview ................................... 723, 788

data-role, nav-bar ............................................ 789

data-role, navbar .............................................. 725

data-role, none ................................................. 790

data-role, page ................................................... 721

data-role, slider ................................................ 790

data-split-theme ............................................... 764

data-theme ......................................................... 764

data-transition .................................................. 791

data-transition, Definition ........................... 727

data-transition, reverse .................................. 727

data-type ............................................................. 787

Enhancement ..................................................... 772

Events ................................................................... 792

Events, hashchange ........................................ 794

Events, Initialisierung .................................... 797

Events, Mouse-Events, virtuelle .................. 793

Events, navigate ............................................... 794

Events, Navigation .......................................... 794

Events, orientationchange ........................... 793

Events, Orientierung ....................................... 793

Events, pagebeforechange ........................... 796

Events, pagebeforecreate .............................. 797

Events, pagebeforehide ................................. 796

Events, pagebeforeload ................................. 796

Events, pagebeforeshow ............................... 796

Events, pagechange ........................................ 796

Events, pagechangefailed ............................. 796

Events, pagecreate ........................................... 797

Events, pagehide .............................................. 796

Events, pageinit ................................................ 797

Events, pageload .............................................. 796

Events, pageloadfailed ................................... 796

Events, pageremove ........................................ 796

Events, pageshow ............................................. 796

Events, Scrolling ............................................... 794

Events, scrollstart ............................................. 794

Events, scrollstop ............................................. 794

Events, Seitenübergänge ............................... 795

Events, swipe ...................................................... 792

Events, swipeleft ............................................... 792

Events, swiperight ............................................ 792

Events, tap .......................................................... 792

Events, taphold ................................................. 792

Events, throttledresize ................................... 794

Events, Touch-Events ...................................... 792

Events, vclick ...................................................... 793

Events, vmousecancel .................................... 793

Index

928


Events, vmousedown ...................................... 793

Events, vmousemove ...................................... 793

Events, vmouseout ........................................... 793

Events, vmouseover ......................................... 793

Events, vmouseup ............................................ 793

Formular mit Ajax ........................................... 756

Formular Transition ........................................ 756

Formulare ........................................................... 749

Icon-Sprites ......................................................... 782

Konfiguration .................................................... 775

Konfiguration, activeBtnClass .................... 777

Konfiguration, activePageClass ................. 777

Konfiguration, ajaxEnabled ........................ 777

Konfiguration, allowCrossDomain-

Pages ................................................................ 777

Konfiguration, defaultDialog-

Transition ....................................................... 778

Konfiguration, defaultPageTransition .... 778

Konfiguration, gradeA ................................... 779

Konfiguration, hashListeningEnabled .... 777

Konfiguration, ignoreContentEnabled ... 778

Konfiguration, linkBindingEnabled .......... 778

Konfiguration, minScrollBack .................... 778

Konfiguration, ns ............................................. 776

Konfiguration, pageLoadError-

Message ........................................................... 778

Konfiguration, subPageUrlKey ................... 776

Methoden ........................................................... 798

Methoden, changePage() ............................. 798

Methoden, loadPage() .................................. 800

Methoden, navigate() .................................... 801

Methoden, path.get() ..................................... 803

Methoden, path.isAbsoluteUrl() ................ 805

Methoden, path.isRelativeUrl() ................. 804

Methoden, path.makePathAbsolute() .... 803

Methoden, path.makeUrlAbsolute() ........ 804

Methoden, path.parseUrl() .......................... 802

Methoden, silentScroll() ................................ 805

Mobile Page ......................................................... 721

mobileinit ............................................................. 771

Properties, activePage ................................... 805

Radiobutton ....................................................... 753

role-Attribut ....................................................... 775

Seitenübergänge, Animationen ................. 727

Select Menü ......................................................... 753

Select-Menü ........................................................ 757

Slider ...................................................................... 758

Textfelder ..................................................... 753, 757

Themes .................................................................. 759

Themes, Übersicht ........................................... 764


Viewport-Meta ................................................... 773

WAI-ARIA ............................................................ 774

jQuery UI ............................................................ 30, 551

.autocomplete(), Optionen ............................ 512

.datepicker() ...................................................... 509

Autocomplete-Widget ................................... 509

Datepicker-Widget .......................................... 507

Datepicker-Widget, Lokalisierung ........... 508

Download ............................................................. 552

Download, Builder ............................................ 553

Draggable ........................................................... 610

Draggable, Events ............................................ 618

Draggable, Optionen ....................................... 611

Droppable ........................................................... 618

Droppable, Events ............................................ 622

Droppable, Optionen ..................................... 620

Effects core ........................................................... 513

Effekte .......................................................... 594, 596

Effekte, blind ...................................................... 597

Effekte, bounce .................................................. 598

Effekte, clip ......................................................... 598

Effekte, drop ....................................................... 599

Effekte, fade ...................................................... 600

Effekte, fold ....................................................... 600

Effekte, highlight .............................................. 601

Effekte, scale ....................................................... 601

Effekte, shake .................................................... 602

Effekte, size ........................................................ 602

Effekte, slide ...................................................... 602

Effekte, transfer ............................................... 603

Einbinden ............................................................ 559

Interactions ....................................................... 603

Interactions, destroy ..................................... 606

Interactions, disable ...................................... 606

Interactions, Einsatz ...................................... 604

Interactions, enable ....................................... 606

Interactions, Events ....................................... 605

Interactions, Konfiguration ....................... 604

Interactions, Methoden ................................ 606

Interactions, option ....................................... 606

Interactions, Typen ........................................ 603

Interactions, widget ....................................... 606

Methoden, .addClass() .................................... 594

Methoden, .effect() ........................................... 596

Methoden, .hide() ............................................. 596

Methoden, .removeClass() ............................ 594

Methoden, .show() ........................................... 596

Methoden, .switchClass() .............................. 594

Methoden, .toggle() ......................................... 596

Methoden, .toggleClass() .............................. 594

Index

929

jQuery UI (Forts.)

Resizable .............................................................. 635

Resizable, Events ............................................... 641

Resizable, Optionen ........................................ 639

Selectable ............................................................ 643

Selectable, Events ............................................ 646

Selectable, Optionen ...................................... 646

Sortable ................................................................ 623

Sortable, Events ................................................ 630

Sortable, Methoden ......................................... 633

Sortable, Optionen .......................................... 626

Struktur ................................................................ 558

Themes .................................................................. 554

Themes, scoped ................................................. 556

Themes, ThemeRoller ...................................... 554

Widgets, Accordeon ......................................... 574

Widgets, Autocomplete .................................. 593

Widgets, Basisklassen .................................... 560

Widgets, Button ............................................... 589

Widgets, Buttonset .......................................... 592

Widgets, Corner-Klassen .............................. 560

Widgets, CSS-Klassen ..................................... 560

Widgets, Datepicker ....................................... 580

Widgets, Dialog ................................................. 563

Widgets, Formulare ......................................... 579

Widgets, Layout-Widgets .............................. 563

Widgets, Progressbar ..................................... 570

Widgets, Slider .................................................. 586

Widgets, Tab-Widget ....................................... 577

Widgets, Toggle-Button ................................. 591

jQuery.when() ......................................................... 322

jQuery-Build ........................................................... 807

Bower ................................................................... 809

Git .......................................................................... 808

Git-Repository klonen .................................... 813

Grunt .................................................................... 808

Individueller Build ............................................ 816

Installation von Bower .................................. 813

Installation von Git ........................................ 809

Installation von Grunt ................................... 812

Installation von NodeJS .................................. 811

Kompletter Build .............................................. 814

NodeJS .................................................................. 808

Voraussetzungen ............................................ 808

jQuery-Eigenschaften

.context, Definition [deprecated] ................. 111

.length, Definition ............................................ 110

.selector, Definition ........................................... 111

jQuery-Helferfunktionen

$.ajax() ................................................................... 512

$.ajax(), success .................................................. 512

jQuery-Methoden ................................................... 67

.add(), Definition ............................................... 125

.addBack(), Definition ..................................... 127

.addClass() .................................. 78, 439, 443, 524

.addClass(), Definition .................................... 232

.after() ........................................................... 216, 217

.after(), Definition ............................................. 214

.ajaxError() .......................................................... 494

.ajaxSuccess() ..................................................... 494

.andSelf(), Definition ........................................ 127

.animate() ............................................................ 548

.animate(), Beispiel .......................................... 279

.animate(), Callback ........................................ 279

.animate(), Dauer ............................................. 276

.animate(), Definition ..................................... 274

.animate(), Easing ............................................. 277

.append() .................................. 439, 440, 493, 524

.append(), Definition ........................................ 217

.appendTo() ......................................................... 135

.appendTo(), Definition .................................. 218

.attr() ................................................... 109, 199, 439

.attr(), Definition ............................................... 183

.before(), Definition .......................................... 217

.bind() ..................................................................... 158

.bind(), Definition ............................................. 148

.blur(), Definition ...................................... 161, 203

.change(), Definition .............................. 162, 203

.children(), Definition ...................................... 116

.click() ............................... 136, 439, 440, 443, 548

.click(), Definition .............................................. 159

.clone(), Definition ................................... 135, 216

.clone(true) ........................................................... 136

.closest(), Definition ......................................... 122

.contents(), Definition ..................................... 117

.css() ..................................................... 261, 424, 425

.css(), Definition ................................................ 238

.css(), Eigenschaft über Funktion ............... 239

.css(), Eigenschaftsnamen ............................. 239

.css(), Lesen einer Eigenschaft ..................... 238

.css(), Setzen einer Eigenschaft ................... 238

.css(), Setzen mehrerer Eigenschaften ...... 239

.data() ............................................................ 191, 219

.data(), Definition ............................................. 192

.dblclick(), Definition ........................................ 159

.delay(), Definition ............................................ 271

.delegate() ............................................................. 158

.delegate(), Definition ...................................... 167

.dequeue(), Definition ..................................... 286

.detach(), Definition ........................................ 220

.die() [abgeschafft], Definition ..................... 172

.each() ...................... 110, 112, 202, 439, 440, 493

Index

930

jQuery-Methoden (Forts.)

.each(), Definition ............................................. 107

.empty(), Definition ........................................ 190

.end(), Definition ............................................... 134

.eq() .............................................................. 439, 440

.eq(), Definition .................................................. 129

.error(), Definition ............................................ 166

.fadeIn() ...................................................... 439, 493

.fadeIn(), Definition ........................................ 270

.fadeOut(), Definition ..................................... 270

.fadeTo(), Definition ....................................... 268

.fadeToggle(), Definition ............................... 268

.filter(), Definition ............................................. 129

.find() .................................................. 424, 425, 439

.find(), Definition .............................................. 120

.first() ................................................. 426, 439, 440

.first(), Definition ............................................... 131

.focus(), Definition ................................... 162, 203

.focusin(), Definition ............................... 161, 203

.focusout(), Definition ............................ 161, 203

.get() ........................................................................ 112

.get(), Definition ............................................... 109

.has(), Definition ............................................... 132

.hasClass() ............................................................ 524

.hasClass(), Definition ..................................... 231

.height(), Definition ......................................... 241

.hide() .................................................. 439, 443, 528

.hide(), Definition .............................................. 261

.hide(fast) ............................................................. 261

.hide(slow) ........................................................... 261

.hover() ................................................ 424, 425, 516

.hover(), Definition ............................................ 157

.html() .......................................................... 366, 368

.html(), Definition ............................................. 187

.index() ....................................................... 439, 440

.index(), Definition ........................................... 110

.innerHeight(), Definition .............................. 241

.innerWidth(), Definition ............................... 241

.insertAfter(), Definition .................................. 215

.insertBefore() .......................................... 439, 440

.insertBefore(), Definition ............................... 217

.is() ................................................................. 199, 516

.is(), Definition) ................................................... 112

.keydown(), Definition ................................... 160

.keypress(), Definition .................................... 160

.keyup(), Definition ......................................... 160

.last(), Definition ................................................ 131

.live() [abgeschafft], Definition .................... 172

.load() (Ajax) ....................................................... 485

.load(), Callback ................................................. 376

.load(), Daten-Argument ............................... 375


.load(), Definition (Ajax) ................................ 373

.load(), Definition (Event) ............................... 163

.load(), Drilldown-Selektor ........................... 374

.mouseenter(), Definition ............................... 159

.mouseleave(), Definition ............................... 159

.mousemove(), Definition .............................. 159

.mouseout(), Definition .................................. 159

.mouseover(), Definition ................................ 159

.mouseup(), Definition .................................... 159

.next() ........................................................... 443, 444

.next(), Definition .............................................. 118

.nextAll(), Definition ........................................ 123

.nextUntil(), Definition .................................... 124

.not() ...................................................................... 443

.not(), Definition ............................................... 130

.off(), Definition ................................................... 151

.offset(), Definition ........................................... 243

.offsetParent(), Definition ............................. 245

.on() ......................................................................... 158

.on(), Definition ................................................. 149

.one(), Definition ................................................ 157

.outerHeight(), Definition .............................. 241

.outerWidth(), Definition ................................ 241

.parent(), Definition ......................................... 117

.parents(), Definition ........................................ 121

.parentsUntil(), Definition ............................. 121

.position() ............................................................ 548

.position(), Definition ..................................... 245

.prepend(), Definition ...................................... 218

.prependTo(), Definition ................................. 218

.prev() .................................................................... 445

.prev(), Definition .............................................. 119

.promise(), Definition ...................................... 316

.prop(), Definition .............................................. 185

.queue(), Beispiel ............................................... 287

.queue(), Definition .......................................... 285

.ready() ................................................................. 424

.remove() ............................................................... 191

.remove(), Definition ....................................... 219

.removeAttr() ............................................. 135, 199

.removeAttr(), Definition ............................... 184

.removeClass() .......................................... 439, 443

.removeClass(), Definition ............................ 234

.removeData(), Definition ............................. 193

.removeProp(), Definition ............................. 186

.replace(), Definition ....................................... 222

.replaceWith(), Definition ............................. 222

.resize(), Definition ............................................ 165

.scroll() .................................................................. 248

.scroll(), Definition ............................................ 165

Index

931


.scrollLeft(), Definition .................................... 247

.scrollTop(), Definition ................................... 248

.select(), Definition .................................. 162, 203

.serialize() ................................................... 367, 368

.serialize(), Definition ..................................... 204

.serializeArray() ................................................ 207

.serializeArray(), Definition ......................... 206

.show() ................................................ 439, 440, 528

.show(), Definition ............................................ 261

.siblings(), Definition ....................................... 124

.size() [deprecated] ............................................. 111

.size(), Definition ............................................... 110

.slice() ..................................................................... 528

.slice(), Definition .............................................. 132

.slideDown() ...................................... 424, 425, 443

.slideDown(), Definition ................................ 264

.slideToggle(), Definition .............................. 266

.slideUp() .................................. 424, 425, 443, 444

.slideUp(), Definition ...................................... 264

.stop() ..................................................................... 425

.stop(), Definition .............................................. 272

.submit(), Definition ............................... 162, 203

.text() ................................................... 112, 439, 494

.text(), Definition .............................................. 188

.text(), Rückgabewert ...................................... 189

.text(), Stringmethoden .................................. 189

.toArray(), Definition ........................................ 112

.toggleClass(), Definition ............................... 235

.trigger(), Definition .......................................... 173

.triggerHandler(), Definition ......................... 175

.unbind(), Definition ......................................... 151

.undelegate(), Definition ................................ 168

.unload(), Definition ........................................ 164

.unwrap(), Definition ....................................... 227

.val() ...................................................................... 202

.val(), Definition ............................................... 208

.width(), Definition ........................................... 241

.wrap(), Definition ............................................ 224

.wrapAll(), Definition ...................................... 226

.wrapInner(), Definition ................................. 225

Accessoren .......................................................... 106

Animationen ..................................................... 249

Animationen, Fades ....................................... 268

Animationen, Slides ........................................ 263

Animationen, Utilities ................................... 270

Animationen, Zeigen und Verstecken ...... 259

Collection, Eigenschaften ............................. 106

Event-Bindung ................................................... 147

Traversierung ...................................................... 113

Verkettbarkeit ...................................................... 67

jQuery-Methoden, destruktive ......................... 68

jQuery-Methoden, terminierende ................... 68

jQuery-Methoden, transparente ...................... 68

jQuery-Objekt ........................................................... 67

Datenspeicherung in ....................................... 191

Erweiterung mit $.extend() ......................... 403

jQuery-Properties ................................................... 68

jQuery-Utilities

$.ajax(), Definition ........................................... 349

$.ajaxSetup(), Definition ............................... 349

$.boxModel, Definition .................................. 387

$.browser, Definition ...................................... 387

$.contains(), Definition .................................. 395

$.data(), Definition ........................................... 193

$.dequeue(), Definition .................................. 290

$.each() ................................................................. 207

$.each(), Definition ......................................... 390

$.extend(), Definition ..................................... 400

$.extend(), jQuery-Objekt ............................. 403

$.extend(), Objektmerging ........................... 400

$.fn.extend(), Definition ................................ 403

$.fx.off, Definition ........................................... 290

$.get(), Definition ............................................. 366

$.getJSON(), Definition ................................... 369

$.getScript(), Definition .................................. 370

$.globalEval(), Definition .............................. 398

$.grep(), Definition ........................................... 392

$.inArray(), Definition .................................... 393

$.isArray(), Definition .................................... 406

$.isEmptyObject(), Definition ..................... 406

$.isFunction(), Definition ............................. 407

$.isPlainObject(), Definition ........................ 407

$.map(), Definition ........................................... 393

$.merge() .............................................................. 397

$.merge(), Definition ...................................... 390

$.noConflict(), Definition ................................ 381

$.noConflict(), Einsatz .................................... 384

$.noConflict(), extreme .................................. 386

$.noConflict(), mit Alias ................................. 386

$.param(), Definition ....................................... 371

$.post(), Definition ........................................... 368

$.proxy(), Definition ........................................ 399

$.pushStack(), Definition ............................... 396

$.queue(), Definition ...................................... 290

$.removeData(), Definition ........................... 193

$.support, Definition ....................................... 388

$.trim() .................................................................. 203

$.trim(), Definition ........................................... 394

$.unique(), Definition ....................................... 391

$.when(), Definition ......................................... 322

Array-Verarbeitung ........................................ 389

Index

932

jQuery-Utilities (Forts.)

DOM-Knotenverarbeitung ........................... 395

Erweiterung von jQuery ............................... 400

Funktionsaufrufe ............................................. 398

Objektverarbeitung ....................................... 400

Stringbearbeitung ........................................... 394

Test auf Datentyp ............................................ 405

JSON ........................................................................... 494

JSON-Daten

laden ..................................................................... 492

JSONP ............................................................... 495, 496

K

keydown() ................................................................ 160

keypress() ................................................................ 160

keyup() ...................................................................... 160

L

last() ............................................................................. 131

length ......................................................................... 110

live() [abgeschafft] ................................................. 172

load() (Ajax) ............................................................. 373

load() (Event) ........................................................... 163

M

MAMP .......................................................................... 35

Media-Query .......................................................... 687

@media-Block .................................................. 689

conforming ......................................................... 691

Einsatz ................................................................. 697

Features ............................................................... 693

Features, aspect-ratio .................................... 695

Features, color .................................................. 695

Features, color-index ..................................... 696

Features, device-aspect-ratio ..................... 695

Features, device-height ................................. 694

Features, device-width .................................. 694

Features, Existenzprüfung ........................... 693

Features, height ............................................... 694

Features, monochrome ................................. 696

Features, orientation ..................................... 695

Features, resolution ........................................ 697

Features, Schwellenwert ............................... 693

Features, Vergleich ......................................... 693

Features, width ................................................. 694

intern .................................................................... 688

Keywords ............................................................. 691

Keywords, and .................................................. 692

Media-Query (Forts.)

Keywords, not .................................................... 692

Keywords, only .................................................. 692

non-conforming ............................................... 691

Query-Aspekt ........................................... 690, 691

Query-Aspekt, Syntax ..................................... 691

Stylesheet-Import ........................................... 688

Syntax .................................................................. 689

Useragenttyp .................................................... 689

verlinkte Stylesheets ...................................... 688

Mobile first ............................................................. 686

mousedown() .......................................................... 159

mouseenter() ........................................................... 159

mouseleave() ........................................................... 159

mousemove() .......................................................... 159

mouseout() ............................................................... 159

mouseover() ............................................................. 159

mouseup() ................................................................ 159

Mozilla Foundation ............................................ 920

N

next() .......................................................................... 118

nextAll() ..................................................................... 123

nextUntil() ................................................................ 124

NodeJS ...................................................................... 808

not() ............................................................................ 130

O

Objektverarbeitung

$.extend() ............................................................ 400

$.extend(), deep ................................................. 401

Merging von Objekten .................................. 400

Test auf leeres Objekt .................................... 406

Test auf plain Object ...................................... 407

off() ............................................................................... 151

offset() ....................................................................... 243

offsetParent() .......................................................... 245

on() .............................................................................. 149

one() ............................................................................ 157

outerHeight() ........................................................... 241

outerWidth() ............................................................ 241

P

Paginierung ............................................................. 524

parent() ...................................................................... 117

parents() .................................................................... 121

parentsUntil() .......................................................... 121

Index

933

Personen

Alsup, Mike ......................................................... 504

Dhakar, Lokesh ................................................. 468

Edwards, Dean ..................................................... 28

Resig, John .................................................... 28, 828

Sullivan, Shaun ................................................... 712

Zaefferer, Jörn .......................................... 498, 828

phpMyAdmin ........................................................... 35

Plugin-Erstellung ................................................. 403

Plugins

Dateiname .......................................................... 655

Function-Plugin ............................................... 659

Function-Plugin, Aufbau ............................. 660

Function-Plugin, CSS-Tool-Beispiel .......... 662

Function-Plugin, Logger-Beispiel ............. 660

Gattungen .......................................................... 659

GitHub .................................................................. 652

History,js .............................................................. 541

jqGrid .................................................................... 530

jqGrid, Konfigurator ........................................ 531

jQuery.cookies ................................................... 536

jQuery.sheet ........................................................ 534

Konfiguration .................................................... 657

Method-Plugin ........................................ 659, 663

Method-Plugin, Aufbau ................................ 664

Method-Plugin, Beispiel CSS-Styles .......... 665

Method-Plugin, Beispiel multiToggle ....... 673

Method-Plugin, Beispiel toggleClick ......... 671

Method-Plugin, Closure ................................ 669

Method-Plugin, Defaultwerte .................... 668

Method-Plugin, Grundregeln ..................... 683

Method-Plugin, mehrere Argumente ...... 666

Method-Plugin, mit Argument .................. 665

Method-Plugin, mit Konfigurations-

objekt ............................................................... 667

Method-Plugin, mit Subroutinen ............... 677

Namespace-Pollution ..................................... 677

Photobox, anwenden ..................................... 654

Photobox, download ...................................... 652

Repository .......................................................... 650

Repository, Download .................................... 652

Repository, Kurzbeschreibungen ............... 652

Repository, Plugin anwenden .................... 654

Repository, Suche im ....................................... 651

Schreiben ............................................................ 658

Tabs ....................................................................... 540

Veröffentlichen ................................................. 658

position() .................................................................. 245

prepend() .................................................................. 218

prependTo() ............................................................. 218

prev() ........................................................................... 119

Promise-Objekt ...................................................... 293

prop() .......................................................................... 185

Q

Querystring ......... 205, 347, 352, 357, 368, 371, 372

queue() ...................................................................... 285

QUnit ......................................................................... 826

Assertions ............................................................ 832

Download ............................................................ 827

Einbindung ......................................................... 827

Methoden, asyncTest() ................................... 844

Methoden, deepEqual() .................................. 837

Methoden, equal() ............................................ 835

Methoden, module() ...................................... 840

Methoden, notDeepEqual() .......................... 837

Methoden, notEqual() .................................... 835

Methoden, notStrictEqual() ......................... 838

Methoden, ok() .................................................. 832

Methoden, start() ............................................. 843

Methoden, stop() .............................................. 843

Methoden, strictEqual() ................................. 838

Methoden, test() ................................................ 831

Modulstatement ............................................. 840

Startstatement .................................................. 843

Stopstatement ................................................... 843

Test, fail ............................................................... 830

Test, pass ............................................................. 829

Testausgabe ....................................................... 829

Testausgabe, Bannerstreifen ...................... 830

Testausgabe, Ergebnisliste ............................ 831

Testausgabe, Summary .................................. 831

Testausgabe, Titelbalken ............................. 830

Testausgabe, Toolbar ...................................... 831

Testausgabe, Useragent ................................. 831

Test-Template .................................................... 828

QUnit, Git-Build ..................................................... 828

R

remove() ................................................................... 219

removeAttr() ........................................................... 184

removeClass() ......................................................... 234

removeData() .......................................................... 193

removeProp() ......................................................... 186

replaceAll() ............................................................... 222

replaceWith() .......................................................... 222

resize() ........................................................................ 165

Responsive Webdesign ...................................... 685

Ausgangslayout ............................................... 697

Breakpoint ......................................................... 698

Index

934

Responsive Webdesign (Forts.)

Desktop-First ..................................................... 698

Mobile-First ........................................................ 699

S

scroll() ........................................................................ 165

scrollLeft() ................................................................ 247

scrollTop() ............................................................... 248

select() ............................................................... 162, 203

selector ........................................................................ 111

Selektorstring

Basisselektoren .................................................... 81

Child E > F, Definition ....................................... 84

Descendant ........................................................... 83

Filter :animated, Definition ........................... 94

Filter :button ...................................................... 195

Filter :checkbox ................................................. 195

Filter :contains, Definition .............................. 95

Filter :empty, Definition .................................. 95

Filter :eq(), Definition ........................................ 93

Filter :even, Definition ...................................... 93

Filter :file .............................................................. 195

Filter :first, Definition ....................................... 92

Filter :first-child ................................................. 101

Filter :first-of-type, Definition .................... 104

Filter :gt(), Definition ........................................ 93

Filter :has(), Definition .................................... 96

Filter :header, Definition ................................. 94

Filter :hidden ............................................ 443, 444

Filter :hidden, Definition ................................ 99

Filter :image ....................................................... 195

Filter :input ......................................................... 195

Filter :last, Definition ........................................ 92

Filter :last-child ................................................. 101

Filter :last-of-type, Definition ..................... 104

Filter :lt(), Definition .......................................... 93

Filter :not() ........................................................... 96

Filter :not(), Definition ..................................... 92

Filter :nth-child(), Definition ........................ 102

Filter :nth-child(even) , Definition ............. 102

Filter :nth-child(even) zu :even ................... 103

Filter :nth-child(odd) , Definition ............... 102

Filter :nth-last-child(), Definition ............... 102

Filter :nth-last-of-type (), Definition ......... 105

Filter :nth-of-type (), Definition .................. 105

Filter :odd, Definition ........................................ 93

Filter :only-child, Definition ......................... 101

Filter :only-of-type, Definition ................... 104

Filter :parent, Definition ................................. 96

Filter :password ................................................. 195

Selektorstring (Forts.)

Filter :radio .......................................................... 195

Filter :reset ........................................................... 195

Filter :submit ....................................................... 195

Filter :text ............................................................. 195

Filter :visible .............................................. 443, 444

Filter :visible, Definition ............................... 100

Filter Attribut, Definition ................................ 86

Filter Attributwert (Anfang), Definition ... 89

Filter Attributwert (Ende), Definition ......... 88

Filter Attributwert (Teilstring),

Definition ......................................................... 88

Filter Attributwert (Teilwert),

Definition ......................................................... 88

Filter Attributwert (Ungleichheit),

Definition ......................................................... 89

Filter Attributwert, Definition ....................... 87

Filter für Formularelemente ........................ 194

Filter lang-Attribut, Definition ..................... 87

Filter Multi-Attribut .......................................... 87

Filter nach Attribut ........................................... 85

Filter nach Inhalt ................................................ 94

Filter nach Position als

Kindknoten .......................................... 100, 104

Filter nach Sichtbarkeit ................................... 98

Filterausdrücke ................................................... 89

Following E ~ F, Definition ............................. 85

Following Sibling E + F, Definition .............. 84

Gruppenselektoren ............................................ 83

ID-Selektor ............................................................. 81

Klassenselektor .................................................... 81

Kontextselektor E F, Definition .................... 83

Mehrfachklassen ................................................ 82

Sonderzeichen, escapen von .......................... 80

Typselektor ............................................................ 81

Universalselektor ................................................ 81

Zustandsfilter :checked ................................. 199

Zustandsfilter :disabled ................................. 198

Zustandsfilter :enabled .................................. 198

Zustandsfilter :selected .................................. 201

Zustandsfilter für Formularelemente ...... 198

serialize() ................................................................. 204

serializeArray() ...................................................... 206

show() ........................................................................ 261

siblings() .................................................................... 124

size() .................................................................... 110, 111

slice() ........................................................................... 132

slideDown() ............................................................. 264

slideToggle() ............................................................ 266

slideUp() ................................................................... 264

stop() .......................................................................... 272

Index

935

Stringbearbeitung

$.trim() ................................................................. 394

Stylesheet, Definition ......................................... 866

submit() ............................................................ 162, 203

T

Tabellen

Paginierung ........................................................ 524

Sortierfunktion .................................................. 524

Sortierung ................................................... 517, 520

Zebra-Tabellen .................................................... 513

Tab-Navigation ..................................................... 436

Test driven development ................................. 826

Tests, alert ................................................................ 821

Tests, console.log .................................................. 822

Tests, Function-Wrap .......................................... 822

text() ................................................................... 112, 188

Textinhalt

lesen ....................................................................... 188

löschen ................................................................. 190

schreiben ............................................................. 190

toArray() ..................................................................... 112

toggle() ....................................................................... 261

toggle() [Removed] ............................................... 158

toggleClass() ............................................................ 235

trigger() ....................................................................... 173

triggerHandler() ...................................................... 175

U

unbind() ...................................................................... 151

undelegate() ............................................................ 168

Unit-Tests .................................................................. 821

JUnit ....................................................................... 825

QUnit ..................................................................... 826

unload() .................................................................... 164

Unobtrusive JavaScript ........................................ 28

Unobtrusive JavaScript, Definition ............... 912

unwrap() ................................................................... 227

V

val() ............................................................................ 208

Viewport ................................................. 246, 862, 918

W

width() ........................................................................ 241

wrap() ......................................................................... 224

wrapAll() ................................................................... 226

wrapInner() ............................................................. 225

X

XAMPP ......................................................................... 35

Z

Zebra-Tabellen ........................................................ 513

Zustandsfilter ......................................................... 198

Wir hoffen sehr, dass Ihnen diese Leseprobe gefallen hat. Gerne dürfen Sie diese Leseprobe empfehlen und weitergeben, allerdings nur vollständig mit allen Seiten. Die vorliegende Leseprobe ist in all ihren Teilen urheberrecht-lich geschützt. Alle Nutzungs- und Verwertungsrechte liegen beim Autor und beim Verlag.

Teilen Sie Ihre Leseerfahrung mit uns!

Frank Bongers lebt und arbeitet in Berlin als freier Webdesigner, Autor und Dozent für Webprogram-mierung. Seit 1999 verfolgt er die Entwicklung der Schlüsseltechnologien XML und XSLT mit großer Auf-merksamkeit.

Maximillian Vollendorf ist selbstständiger Webdesi-gner und kümmert sich in seiner Agentur form + fak-ten um Beratung, Konzeption und Umsetzung von komplexen Webprojekten. Er setzt jQuery seit Jahren produktiv ein.

Frank Bongers, Maximilian Vollendorf

jQuery – Das Praxisbuch935 Seiten, 3. Auflage 2013, mit DVD, 39,90 € ISBN 978-3-8362-2638-7

www.galileocomputing.de/3473

Wissen, wie’s geht.

http://www.galileocomputing.de/3473?GPP=lpn

https://www.facebook.com/GalileoPressVerlag

https://plus.google.com/118435207805510651040

http://twitter.com/Galileo_Press

Documents

Leseprobe - Amazon S3...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