Upload
mayflower-gmbh
View
4.528
Download
0
Embed Size (px)
DESCRIPTION
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
Citation preview
© Mayflower GmbH 2010
Auffrischung jQuery
jQuery Mobile
Marco Francke I 03.03.2011
Mayflower GmbH I 2
Was ist jQuery und was kann es?
Mayflower GmbH I 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 4
Was spricht für die Verwendung von jQuery?
Mayflower GmbH I 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 6
Nützliches im Alltag
Mayflower GmbH I 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 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 9
Event-Handler
Mayflower GmbH I 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 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 12
jQuery Mobile
Fakten
Mayflower GmbH I 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 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 15
Eigenschaften von jQuery Mobile
Mayflower GmbH I 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 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 18
Wie geht jQuery Mobile vor?
Mayflower GmbH I 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 20
Konfiguration
Mayflower GmbH I 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 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 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 24
Events
Mayflower GmbH I 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 26
Events
I Touch-Events
· tapwird getriggert bei einer kurzen Berührung
· tapholdwird getriggert nach ca. einer Sekunde
· swipewird getriggert nach einer horizontalen Wischung von 30px
oder einer vertikalen Wischung von weniger als 20px
Mayflower GmbH I 27
Events
· swipeleftwie swipe nur gerichtet nach links
· swiperightwie swipe nur gerichtet nach rechts
I Orientation Event:
· orientationchangewird 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 28
Events - Scroll-Events
· scrollstartwird getriggert, wenn eine Scrollbewegung beginnt
· Scrollstopwird getriggert, wenn die Scrollbewegung beendet wird
Mayflower GmbH I 29
Events - Page-Events
I Immer wenn eine Seite angezeigt wird oder verschwindet, werden jeweils 2 Events getriggert.
· pagebeforeshowwird getriggert bevor die Seite dargestellt wird
· pagebeforehidewird getriggert bevor die Seite verschwindet
Mayflower GmbH I 30
Events - Page-Events
· pageshowwird getriggert nachdem die Seite dargestellt wurde
· pagehidewird getriggert nachdem die Seite verschwunden ist
Mayflower GmbH I 31
Methoden
Mayflower GmbH I 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 33
Layout-Helfer
Mayflower GmbH I 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
10.03.11 Mayflower GmbH 35
Vielen Dank für Ihre Aufmerksamkeit!
Kontakt Marco Francke
Mayflower GmbH
Mannhardtstrasse6
80538 München