Inhaltsverzeichnis

Alle Kapitel aufklappen
Alle Kapitel zuklappen
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
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
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
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
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
5.2 Schönere Navigationen
418
5.2.1 Die FlyOut-Navigation
419
5.2.2 Flyout mit CSS-Transitions
430
5.2.3 Flyout-Menü mit dem Plugin-Transit
434
5.2.4 Die Tabs: Karteireiter
436
5.2.5 Das Akkordeon
441
5.2.6 Das Tree-Menu
445
5.2.7 Zusammenfassung
451
5.3 Von Tooltips und Links
451
5.3.1 Tooltips
451
5.3.2 Links sammeln, im Footer ausgeben
454
5.4 Spiel mit Bildern
456
5.4.1 Galerie I: Einfache Slideshow
459
5.4.2 Galerie II: Imagebox
468
5.4.3 Die Original Lightbox
478
5.5 Ajax mit jQuery einsetzen
480
5.5.1 Laden von HTML-Elementen
481
5.5.2 Laden von JSON
489
5.5.3 Laden von JSONP
495
5.5.4 Zusammenfassung
497
5.6 Formulare beherrschen mit jQuery
497
5.6.1 Formulare validieren
498
5.6.2 Formulare senden mit Ajax
504
5.6.3 Datepicker
507
5.6.4 Nächste Ausbaustufe: Autocomplete
509
5.7 Flexible Tabellen mit jQuery
513
5.7.1 Die Zebra-Tabelle
513
5.7.2 Die Tabelle sortieren
517
5.7.3 Paginierung von Tabellen
524
5.7.4 Grid-Plugins
529
5.7.5 Zusammenfassung
534
5.8 Von Browsern und Fenstern
535
5.8.1 Cookies
535
5.8.2 Die History des Browsers
541
5.8.3 Scrolling
545
5.8.4 Für faule Browser: Lazy-Load
548
5.8.5 Zusammenfassung
550
6 jQuery UI
551
6.1 Download und Konfiguration von jQuery UI
552
6.1.1 Der Download Builder von jQuery UI
553
6.2 Theming von jQuery UI
554
6.2.1 Scoped Themes
556
6.3 Einsatz von jQuery UI
558
6.3.1 Dateistruktur von jQuery UI
558
6.4 Einbinden von jQuery UI
559
6.5 CSS-Klassen eines UI-Widgets
560
6.6 Layout-Widgets aus jQuery UI
563
6.6.1 Dialog-Widget
563
6.6.2 Progressbar
570
6.6.3 Akkordeon-Widget
574
6.6.4 Tab-Widget
577
6.7 Formular-Widgets aus jQuery UI
579
6.7.1 Datepicker
580
6.7.2 Slider
586
6.7.3 Button
589
6.7.4 Autocomplete
593
6.8 Effekte und Interaktionen aus jQuery UI
594
6.8.1 Die Effekte aus jQuery UI
596
6.8.2 Interaktionen aus jQuery UI
603
6.8.3 Drag & Drop mit Draggables und Droppables
610
6.8.4 Sortierbare Elemente – Sortables
623
6.8.5 Größenveränderbare Elemente – Resizables
635
6.8.6 Auswählbare Elemente – Selectables
643
6.9 Zusammenfassung und Ausblick
648
7 Plugin-Entwicklung für jQuery
649
7.1 Das Plugin-Repository von jQuery
650
7.1.1 Suche im Repository
651
7.1.2 Ein Plugin downloaden
652
7.1.3 Ein Plugin anwenden
654
7.2 Selbst ist der Mann – eigene Plugins schreiben
658
7.2.1 Plugin-Gattungen: Functions und Methods
659
7.3 jQuery-Function-Plugin
659
7.3.1 Function-Plugin – der Aufbau
660
7.3.2 Beispiel für ein Function-Plugin – ein einfacher Logger
660
7.3.3 Beispiel für ein Function-Plugin – Ein CSS-Tool
662
7.4 jQuery-Method-Plugin
663
7.4.1 Method-Plugin – der Aufbau
664
7.5 Method-Plugin – Setzen von CSS-Styles
665
7.5.1 Method-Plugin mit Argument
665
7.5.2 Method-Plugin mit mehreren Argumenten
666
7.5.3 Method-Plugin mit Konfigurationsobjekt
667
7.5.4 toggleClick – Ein Ersatz für die Event-Methode .toggle()
671
7.5.5 multiToggle – Noch ein Ersatz für die Event-Methode .toggle()
673
7.5.6 Method-Plugin mit Subroutinen
677
7.6 Das jQuery-Method-Plugin rekapituliert
683
7.7 Zusammenfassung und Ausblick
684
8 Responsive Webdesign
685
8.1 Wann macht ein Responsive Layout Sinn?
686
8.2 Methodik: Mobile first vs. Desktop first
686
8.3 Media-Queries
687
8.3.1 Media-Angabe für verlinkte Stylesheets
688
8.3.2 Media-Angabe für Stylesheet-Import
688
8.3.3 Media-Angabe innerhalb eines Stylesheets
688
8.4 Syntax der CSS-Media-Angabe
689
8.4.1 Typangabe des User Agents
689
8.4.2 Query-Aspekt der Media-Query
691
8.4.3 Keywords für Media-Queries
691
8.5 Media-Features des User Agents
693
8.5.1 Media-Features: width, height
694
8.5.2 Media-Features: device-width, device-height
694
8.5.3 Media-Feature: orientation
695
8.5.4 Media-Features: aspect-ratio, device-aspect-ratio
695
8.5.5 Media-Feature: color
695
8.5.6 Media-Feature: color-index
696
8.5.7 Media-Feature: monochrome
696
8.5.8 Media-Feature: resolution
697
8.6 Einsatz der Media-Query im Responsive Layout
697
8.6.1 Anpassung des Layouts anhand der Viewport-Breite
698
8.7 Responsive Design und jQuery
700
8.7.1 Reihenfolge von Containern ändern
700
8.7.2 Bilder in verschiedenen Auflösungen
702
8.7.3 Slider mit Touch
703
8.7.4 Maurerhandwerk mit JavaScript und jQuery
706
8.8 Zusammenfassung und Ausblick
708
9 Going mobile mit jQuery
709
9.1 Ein Seitenblick auf die mobile Welt
709
9.2 Emulatoren und IDEs für Mobilgeräte
711
9.2.1 Emulatoren und IDEs für iPhone
711
9.2.2 Dreamweaver CC für jQuery Mobile
714
9.3 Ins mobile Web mit jQuery Mobile
716
9.3.1 Download oder Einbinden von der Website
718
9.3.2 Der jQuery Mobile Download Builder
719
9.4 Ein erstes Dokument mit jQuery Mobile
720
9.4.1 jQuery Mobile-Dateien im Header einbinden
720
9.4.2 Grundstrukturen im Body
721
9.4.3 Mehrere Seiten in einem Dokument
722
9.4.4 Eine einfache Navigation
723
9.4.5 Navigationen in der Toolbar
725
9.5 Seitenübergänge
727
9.6 Listenbuttons
729
9.6.1 Listviews mit Count-Bubbles
730
9.6.2 Listenbuttons in Splitviews
731
9.6.3 Listview mit Splitansicht – verbesserte Version
733
9.6.4 Seiten per Ajax ansprechen
735
9.7 Navbar-Button-Leisten
736
9.7.1 Navbar im Header
736
9.7.2 Navbar im Content-Bereich
737
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
11 QUnit – Testen mit jQuery
821
11.1 Ideen zum Testen von JavaScript
821
11.1.1 Das alert-Statement
821
11.1.2 Die Konsole als Ausgabemedium
822
11.1.3 Eine Funktion durchleuchten
822
11.2 Testen mit Unit-Tests
825
11.2.1 Enter QUnit
826
11.3 Ein Blick auf QUnit
826
11.3.1 Download und Einbinden von QUnit
827
11.4 Ein Test mit QUnit – die Methode test()
831
11.5 Assertions
832
11.5.1 ok()
832
11.5.2 equal() und notEqual()
835
11.5.3 deepEqual() und notDeepEqual()
837
11.5.4 strictEqual() und notStrictEqual()
838
11.6 Module – mehrere Tests unter einer Haube
840
11.7 Testen asynchroner Anwendungen
842
11.7.1 Das Kontextproblem bei asynchronen Tests
842
11.7.2 Explizites Stoppen und Starten des Tests
843
11.7.3 Testlauf in Wartestellung – asyncTest()
844
11.8 Zusammenfassung und Ausblick
846
Anhang
847
A HTML und CSS
847
A.1 Trennungen – Struktur, Präsentation, Verhalten
847
A.2 HTML – Beschreibung der Struktur
849
A.3 Aufbau von HTML-Dokumenten
852
A.4 CSS – Beschreibung der Präsentation
864
B JavaScript und DOM
887
B.1 JavaScript – Beschreibung des Verhaltens
887
B.2 Die Synthese – das Document Object Model
915
Index
921