jQuery Mobile

Auffrischung jQueryjQuery MobileMarco Francke I 03.03.2011 © Mayflower GmbH 2010

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

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

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

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

Nützliches im Alltag Mayflower GmbH I 6

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

Nützliches im AlltagI Selektion innerhalb eines Contexts · $(input.myClass, $(#id)[0]) ist gut aber · $(#id).find(input.myClass) ist noch besserI 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

Event-Handler Mayflower GmbH I 9

Event-HandlerI 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

Event-HandlerI 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 closestI Beispiele sagen mehr als Worte Mayflower GmbH I 11

jQuery Mobile Fakten Mayflower GmbH I 12

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

FaktenI 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

Eigenschaften von jQuery Mobile Mayflower GmbH I 15

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

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

Wie geht jQuery Mobile vor? Mayflower GmbH I 18

Wie geht jQuery Mobile vor?I Es hängt sich automatisch an Markup-ErweiterungenI 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

Konfiguration Mayflower GmbH I 20

KonfigurationI 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

KonfigurationI 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

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 LadenI Beispiel: Konfiguration der Mobile-App Mayflower GmbH I 23

Events Mayflower GmbH I 24

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

EventsI 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

Events · swipeleft wie swipe nur gerichtet nach links · swiperight wie swipe nur gerichtet nach rechtsI 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

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

Events - Page-EventsI 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

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

Methoden Mayflower GmbH I 31

MethodenI 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 triggernI Beispiel: Methoden von jQuery-Mobile Mayflower GmbH I 32

Layout-Helfer Mayflower GmbH I 33

Layout-HelferI 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

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

jQuery Mobile

by Mayflower GmbH on Mar 10, 2011

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 70

Statistics

jQuery Mobile — Presentation Transcript