Auffrischung zu jQuery - Einführung - Tipps und Tricks im Alltag - Selektion und Manipulation von HTML-Elementen - besseres und effektiveres Binding jQuery Mobile - Einführung - Aufbau und Struktur - Wie arbeitet jQuery Mobile - Konfiguration von jQuery Mobile - Events - Methoden von jQuery Mobile

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