Das Dokument bietet einen Überblick über jQuery und jQuery Mobile, einschließlich ihrer Funktionen, Vorteile und Verwendung im Web-Frontend-Entwicklung. Es erklärt die grundlegenden Operationen wie Elementselektion, Event-Handling und AJAX-Interaktionen, während es auch spezifische Merkmale von jQuery Mobile für mobile Geräte hervorhebt. Zudem werden Anpassungsmöglichkeiten und neue Events in jQuery Mobile beschrieben, die die Interaktion auf mobilen Geräten verbessern.

1. Auffrischung jQuery
jQuery Mobile
Marco Francke I 03.03.2011
© Mayflower GmbH 2010

2. Was ist jQuery und was kann
es?
Mayflower GmbH I 2

3. Was ist jQuery und was kann es?
I schnelle JavaScript Bibliothek basierend auf der Selector Engine
Sizzle
I ermöglicht einfache Selection und Manipulation von HTML-
Elementen
I einfaches Event-Handling
I bietet von "Haus" aus einfache Animationen an (toggle, slide, ...)
I einfache AJAX-Interaktionen
I versteht sich mit "allen" commerziellen Browsern
Mayflower GmbH I 3

4. Was spricht für die Verwendung
von jQuery?
Mayflower GmbH I 4

5. Was spricht für die Verwendung von jQuery?
I wird von großen "Playern" verwendet
(Google, Wordpress, Drupal, Mozilla, ...)
I wird als inoffizieller Standard gehandelt
I Sehr gute Dokumentation mit vielen Beispielen
I eine große Community
I einfach zu erlernen
I extrem viele Plugins
Mayflower GmbH I 5

6. Nützliches im Alltag
Mayflower GmbH I 6

7. Nützliches im Alltag
Die Selektoren:
I am schnellsten ist die Selektion über die ID
·$('#id');
I eingeschränkte Selektoren sind um ein Vielfaches schneller
· $('input.myClass') ist ca. 5-6 mal schneller als $('.myClass')
· $('a[href="index.html"]') ist auch ca. 5-6 mal schneller als $
('[href="index.html"]')
Mayflower GmbH I 7

8. Nützliches im Alltag
I Selektion innerhalb eines Contexts
· $('input.myClass', $('#id')[0]) ist gut aber
· $('#id').find('input.myClass') ist noch besser
I Richtig gut ist:
· bereits selektierte Elemente (die öfter benötigt werden) in eine
Variable speichern und diese dann im weiteren Verlauf
verwenden
Mayflower GmbH I 8

9. Event-Handler
Mayflower GmbH I 9

10. Event-Handler
I Gewohnte Verwendung
·via closures (werden zur Laufzeit erzeugt)
$('#id').click(function() {
// mache was
});
· gleiche wie
$('#id').bind('click', function() {
// mache was
});
Mayflower GmbH I 10

11. Event-Handler
I Closures vermeiden
· besser: $('#id').click(myfunction);
I Aber Achtung Scope nicht verlieren!
·$('#id').click(jQuery.proxy(this.myFunction, this));
I Nützliche Begleiter wenn es um Events geht sind
·live und closest
I Beispiele sagen mehr als Worte
Mayflower GmbH I 11

12. jQuery Mobile
Fakten
Mayflower GmbH I 12

13. Fakten
I jQuery Mobile ist derzeit in der Version 1.0 verfügbar
und ist ALPHA 3
I Bietet optimierte und angepasste UI-Widgets für mobile Endgeräte
I Einfaches Theming
I User Interface arbeitet mit den meisten Smartphones, Webbrowsern
und Tablets
I Browser-History Management
Mayflower GmbH I 13

14. Fakten
I jQuery Mobile verfolgt den Ansatz high-end Geräte die HTML5,
CSS3 und JS verszehen sowie weniger gut ausgestattete Geräte.
I Unterstützt Screenreader und andere unterstützende Technologien.
Mayflower GmbH I 14

15. Eigenschaften von
jQuery Mobile
Mayflower GmbH I 15

16. Eigenschaften von jQuery Mobile
I setzt auf dem jQuery Core auf und daher gleiche Syntax
>> geringe Lernkurve
I kompatibel mit den wichtigsten mobilen Plattformen
· iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian,
Windows Mobile, bada, MeeGo
I Selbstverständlich ist auch jQuery Mobile ein Leichtgewicht
von 12k (compressed) und beinhaltet alle Mobile relevanten
Funktionen
Mayflower GmbH I 16

17. Eigenschaften von jQuery Mobile
I jQuery Mobile verwendet das HTML5 data-role Attribut
als Trigger um alle Widgets zu initialisieren
I einfache und gut dokumentierte API
I neue Events für Touch-Screens mit Fallback- Funktionalität
Mayflower GmbH I 17

18. Wie geht jQuery Mobile vor?
Mayflower GmbH I 18

19. Wie geht jQuery Mobile vor?
I Es hängt sich automatisch an Markup-Erweiterungen
I Entsprechend der Attribute lädt es die Plugins und wandelt das
HTML in ein interaktives UI um.
I Dieser Vorgang ist die Standardeinstellung von jQuery Mobile.
Dieses Verhalten kann konfiguriert werden.
· Beispiel: Grundgerüsst einer jQ-Mobile-App
Mayflower GmbH I 19

20. Konfiguration
Mayflower GmbH I 20

21. Konfiguration
I So bald jQuery Mobile geladen wird,
wird das „mobileinit“-Event getriggert.
I Innerhalb des mobileinit-Handlers kann man mit $.mobile.*
Standard-Konfigurationen ändern oder erweitern
Mayflower GmbH I 21

22. Konfiguration
I Standard-Konfigurationen:
· nonHistorySelectors (string, default: "dialog"):
wird eine Seite über einen Link mit dem Attribut data-
rel=“dialog“ oder wird die Seite mit dem Attribut data-
role=“dialog“ aufgerufen, dann wird keine Browser-History
aufgezeichnet
· ajaxLinksEnabled (boolean, default: true):
es wird versucht, alle Seiten mit AJAX aufzurufen
· ajaxFormsEnabled (boolean, default: true):
Formulare werden ebenso mit AJAX abgeschickt
Mayflower GmbH I 22

23. Konfiguration
· transitions (array, default: ['slide', 'slideup', 'slidedown', 'pop',
'flip', 'fade']):
Verfügbare Übergangseffekte
· defaultTransition (string, default: 'slide'):
Standard-Übergang
· loadingMessage (string, default: 'loading'):
Standard-Popupnachricht beim Laden
I Beispiel: Konfiguration der Mobile-App
Mayflower GmbH I 23

24. Events
Mayflower GmbH I 24

25. Events
I jQuery Mobile bietet verschiedene neue Events, die für mobile
Geräte und ebenso für Desktop-Umgebungen funktionieren
· Bsp.: tap -> mouseclick
I Das Event-Binding ist wie gewohnt
Mayflower GmbH I 25

26. Events
I Touch-Events
· tap
wird getriggert bei einer kurzen Berührung
· taphold
wird getriggert nach ca. einer Sekunde
· swipe
wird getriggert nach einer horizontalen Wischung von 30px
oder einer vertikalen Wischung von weniger als 20px
Mayflower GmbH I 26

27. Events
· swipeleft
wie swipe nur gerichtet nach links
· swiperight
wie swipe nur gerichtet nach rechts
I Orientation Event:
· orientationchange
wird getriggert bei der Änderung der Handyposition von der
Portrait- in Landscape- Ansicht und umgekehrt
(Hochformat/Querformat)
I Beispiel: Events einer jQ-Mobile-App
Mayflower GmbH I 27

28. Events - Scroll-Events
· scrollstart
wird getriggert, wenn eine Scrollbewegung beginnt
· Scrollstop
wird getriggert, wenn die Scrollbewegung beendet wird
Mayflower GmbH I 28

29. Events - Page-Events
I Immer wenn eine Seite angezeigt wird oder verschwindet, werden
jeweils 2 Events getriggert.
· pagebeforeshow
wird getriggert bevor die Seite dargestellt wird
· pagebeforehide
wird getriggert bevor die Seite verschwindet
Mayflower GmbH I 29

30. Events - Page-Events
· pageshow
wird getriggert nachdem die Seite dargestellt wurde
· pagehide
wird getriggert nachdem die Seite verschwunden ist
Mayflower GmbH I 30

31. Methoden
Mayflower GmbH I 31

32. Methoden
I jQuery Mobile bietet Methoden an, die später an einer geeigneten
Stelle über das „$.mobile“-Objekt aufgerufen werden können.
· $.mobile.changePage (method)
Aufruf einer Seite
· $.mobile.pageLoading (method)
zeigt und versteckt das "loading" Popup
· $.mobile.silentScroll (method)
scrollt zu einer angegeben Y-Position ohne die Scroll-Events
zu triggern
I Beispiel: Methoden von jQuery-Mobile
Mayflower GmbH I 32

33. Layout-Helfer
Mayflower GmbH I 33

34. Layout-Helfer
I jQuery Mobile setzt Device-spezifische Klassen im HTML-Tag um
das Layout an das entsprechende Gerät bzw. Position des Gerätes
anzupassen. Im JS und CSS kann man sich darauf beziehen, um
eigene Änderungen vorzunehmen.
· Die portait und landscape Klasse gibt an, in welcher Position
sich das Device gerade befindet
· Klasse wie z.B. „max-width-320px“ gibt die maximal
darstellbare Breite an
Mayflower GmbH I 34

35. Vielen Dank für Ihre Aufmerksamkeit!
Kontakt Marco Francke
marco.francke@mayflower.de
Mayflower GmbH
Mannhardtstrasse6
80538 München
10.03.11 Mayflower GmbH 35