Successfully reported this slideshow.
Your SlideShare is downloading. ×

jQuery Mobile

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
11.- Servidor dhcp
11.- Servidor dhcp
Loading in …3
×

Check these out next

1 of 35 Ad

jQuery Mobile

Download to read offline

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

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

Advertisement
Advertisement

More Related Content

Similar to jQuery Mobile (20)

Advertisement

More from Mayflower GmbH (20)

Recently uploaded (20)

Advertisement

jQuery Mobile

  1. 1. Auffrischung jQuery jQuery Mobile Marco Francke I 03.03.2011 © Mayflower GmbH 2010
  2. 2. Was ist jQuery und was kann es? Mayflower GmbH I 2
  3. 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. 4. Was spricht für die Verwendung von jQuery? Mayflower GmbH I 4
  5. 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. 6. Nützliches im Alltag Mayflower GmbH I 6
  7. 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. 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. 9. Event-Handler Mayflower GmbH I 9
  10. 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. 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. 12. jQuery Mobile Fakten Mayflower GmbH I 12
  13. 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. 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. 15. Eigenschaften von jQuery Mobile Mayflower GmbH I 15
  16. 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. 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. 18. Wie geht jQuery Mobile vor? Mayflower GmbH I 18
  19. 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. 20. Konfiguration Mayflower GmbH I 20
  21. 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. 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. 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. 24. Events Mayflower GmbH I 24
  25. 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. 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. 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. 28. Events - Scroll-Events · scrollstart wird getriggert, wenn eine Scrollbewegung beginnt · Scrollstop wird getriggert, wenn die Scrollbewegung beendet wird Mayflower GmbH I 28
  29. 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. 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. 31. Methoden Mayflower GmbH I 31
  32. 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. 33. Layout-Helfer Mayflower GmbH I 33
  34. 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. 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

×