jquery mobile

© 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


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


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


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


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

[email protected]

Mayflower GmbH

Mannhardtstrasse6

80538 München

jquery mobile

Technology