of 157/157
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 JQUERY MOBILE Kompakt 16.05.2012 Patrick Lobacher (GF typovision GmbH) 1

jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)

  • View
    22.969

  • Download
    1

Embed Size (px)

DESCRIPTION

jQuery Mobile ist das führende Framework zur Erstellung von mobilen Websites. Das über 150 Seiten umfassende Kompendium behandelt alle Elemente der aktuelle Version 1.1.0 und führt mit zahlreichen Beispielen und Code-Examples umfassend in die Verwendung ein.

Text of jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    JQUERY MOBILEKompakt

    16.05.2012

    Patrick Lobacher (GF typovision GmbH)

    1

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    EINFHRUNGin jQuery Mobile

    2

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    DAS MOBILE WEB - MYTHEN

    Es gibt kein mobiles Web - es gibt nur das Web ansich?!

    Man bentigt keine spezielle Anpassung fr das mobile Web?!

    Eine Website sollte auf allen Zugangsgerten funktionieren?!

    Um eine mobile Website zu erstellen, gengt es mit einer Breite von 240px zu arbeiten?!

    => Neue Herausforderungen im mobilen Bereich

    3

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    MOBILE LSUNGEN

    4

    Native App

    (eigener Code fr alle Plattformen)

    Hybride App

    (Web-Technologie eingebettet in nativem Rahmengerst)

    Web App

    (speziell optimierte Applikation bestehend aus Web-

    Technologie)

    Kompatible Website

    (Keine Anpassung)

    Optimierte Website

    (Viewport, BuildIn, ...)

    Mobile Framework

    (Web-Technologie, optimiert fr alle Zugangsgerte)

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    MOBILE FRAMEWORKS

    5

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    WAS IST JQUERY MOBILE

    Was ist jQuery Mobile?

    jQuery Mobile: Berhrungsoptimiertes Web Framework fr Smartphones & Tablets

    A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

    progressive enhancement graceful degradationProgressive Verbesserung wrdevolle Herabstufung

    6

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    JQUERY MOBILE - PROGRESSIVE

    Progressive Enhancement?

    Basis-Inhalte sind von allen Browsern zugnglich

    Basis-Funktionalitten sind von allen Browsern zugnglich

    Der Inhalt wird in semantischem Markup abgebildet

    Erweitertes Layout wird ber extern verlinkte CSS-Dateien zur Verfgung gestellt

    Erweiterte Funktionen werden ber extern verlinkte, unaufdringliche JS-Dateien realisiert

    7

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    WAS IST JQUERY MOBILE NICHT

    Was ist jQuery Mobile NICHT? jQuery Mobile ist keine jQuery-Alternative fr mobile Browser

    Um jQuery Mobile zu benutzen, muss das jQuery Framework eingebunden werden. Es ist kein Ersatz, sondern ein UI-Layer auf Basis von jQuery

    jQuery Mobile ist kein Webapp-SDK Man kann damit natrlich komplette Web-Apps erstellen - die allerdings

    erst mit Hybrid-Frameworks wie PhoneGap nativ werden

    jQuery Mobile ist kein Framework fr JavaScript Liebhaber Ausser fr erweiterte Themen, wird kein JavaScript bentigt

    jQuery Mobile ist NICHT die Lsung fr ALLE mobile Applikationen, Websites oder Spiele

    Aber fr die meisten :-)

    8

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    JQUERY MOBILE GESCHICHTE

    Erfunden 2010 vom Team rund um Jon Resig ( jQuery Team)

    John Resig, JavaScript Tool Entwickler fr die Mozilla Corporation (@jeresig auf Twitter)

    Dual Lizenz: GPL oder MIT

    jquerymobile.com

    Aktuelle Version: 1.1.0 (13.04.2012)

    Gre: 19 KB (130 KB)

    (Gre jQuery: 32 KB / 247 KB - Gesamt: 51 KB / 377 KB)9

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    JQUERY MOBILE FEATURE

    jQuery Mobile Feature List

    Cross platform, cross device, and cross browser

    UI optimized for touch devices

    Themeable and customizable design

    Usage of nonintrusive semantic HTML5 code only, without the need of any Java-Script, CSS, or API knowledge

    AJAX calls automatically to load dynamic content

    Built on the well-known and supported jQuery core

    Lightweight size, 12Kb compressed

    Progressive enhancement

    Accessibility support (http://www.w3.org/TR/wai-aria/)

    10

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    JQUERY MOBILE KOMPATIBILITT

    11

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    JQUERY MOBILE KOMPATIBILITT

    12

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    HTML5

    jQuery Mobile verwendet einige der HTML5/CSS3-Features direkt und kann mit folgenden gut integriert werden:

    Offline access Offline storage Web sockets Geolocation access Accelerometer and gyroscope support Animations 2D and 3D transformations Gradients and visual effects Viewport management (for zooming support inside the browser) Webapp installation metadata Integration with native applications Multimedia support Graphic drawing (vector and bitmap)

    13

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    EMULATOREN

    http://www.mobilexweb.com/emulators

    z.B. Android: http://developer.android.com/sdk/index.html

    Download

    Start der Datei android im Verzeichnis tools

    Download der Updates

    Tools > Manage AVDs

    NIE ohne Endgert oder Emulator testen!!14

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    GETTING STARTEDJetzt gehts los :-)

    15

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    JQUERY MOBILE EINBINDEN

    Download von http://jquerymobile.com/download/

    Einbindung von LATEST (nur zu Testzwecken):

    16

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    HTML5-GRUNDGERST

    Basis HTML

    Titel

    17

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    META-DATEN

    Angaben fr den Viewport

    width = Wert in Pixel oder device-widthinitial-scale = Wert der initialen Skalieren (1.0 fr normal)maximum-scale = Wert fr die maximal mgliche Skalierungminimum-scale = Wert fr die minimal mgliche Skalierunguser-scalable = Angabe, ob der User berhaupt skalieren darf

    Angaben zum Fullscreen-ModusFullscreen Modus - kein Bottom-Controls und kein URL-Feld mehr - kann per JS ber window.navigator.standalone abgefragt werdenFarbe der Status-Leiste oben - diese kann nicht ausgeblendet werden

    18

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    WEBCLIPS ICON

    Fr alle Icon-Gren und/oder Devices mssen eigene Angaben gemacht werden:

    => iPhone/iPod: 320460 / iPad Portrait: 7481004 / iPad Landscape: 7481024(rotated 90 degrees)

    19

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    RESPONSIVE LAYOUTS MIT JQM

    Media-Queries z.B. um die Orientierung zu befragen:@media (orientation: portrait) { /* Code hier fr die Orientierung Portrait... */}@media (orientation: landscape) { /* Code hier fr die Orientierung Landscape... */}

    => http://www.w3.org/TR/css3-mediaqueries/

    Beim Orientierungswechsel kann es in iOS-Gerten dazu kommen, dass der Zoom nicht mehr stimmt (iOS Bug) - dafr gibt es zwei Lsungen:

    Abschalten des Zooms

    Dynamisches Neuberechnen des Zoomshttp://adactio.com/journal/4470/

    20

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    RESPONSIVE LAYOUTS MIT JQM

    Beispiel: Label neben Formularelemente im Landscape Mode:@media all and (min-width: 450px){2 label.ui-input-text { display: inline-block; }}

    => http://www.w3.org/TR/css3-mediaqueries/

    Abfrage von iOS Retina [email protected] screen and (-webkit-min-device-pixel-ratio: 2){ // iOS Rentina Display}

    Abfrage der Media Queries ber jQuery// Test auf Screen Media Type$.mobile.media("screen");

    // Test auf min-width$.mobile.media("screen and (min-width: 480px)");

    // Test auf iOS Retina Display$.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)");

    21

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    ARCHITEKTUR

    Cards & Roles

    Idee kommt von WML: Eine oder mehrere Zielseiten befinden sich in einem HTML-Dokument

    Eine Seite ist ein DIV-Element mit einer spezielle Rolle Zugehriges Attribut ist data-role (In HTML5 gibt es die data-* Attribute um spezielle, eigene

    Auszeichnungen zu vergeben - custom data attributes) Vorteil: Funktioniert auch auf Non-HTML5-Browser

    22

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    ARCHITEKTUR - ROLLEN

    23

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    SEITENSTRUKTUR

    data-role ist NICHT mandatory - aber guter Stil!

    Header

    CONTENT

    Footer

    24

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    ABLAUF

    25

    Semantisches HTML5 Markup

    jQuery Mobilepage

    enhancementsanreichern umwandeln

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    SEITENSTRUKTUR - JQM Das macht jQuery Mobile aus der Seite (enhancement)

    Titel Header

    CONTENT

    Footer loading

    26

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    THEMING Alle Elemente werden ber ein Theme dargestellt

    Default ist ein Theme enthalten, weitere mssen ber den sogenannten Theme-Roller eingebracht werden: http://jquerymobile.com/themeroller/

    Jedes Theme ist in Swatches unterteilt (unterschiedliche Optionen)

    Ansprechen ber data-theme="buchstabe"

    27

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    MULTI-PAGEMehrere Seiten in einem Dokument

    28

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    MULTI-PAGE TEMPLATE Weitere Seiten ber separate DIVs mit data-role="page" und eindeutiger ID die mittels

    Anker-Link angesprungen wird. Seitentitel ber data-title="Home".

    Willkommen! Kontakt

    Kontakt Kontakt Infos... /* Seitenspezifisches JavaScript */

    29

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    SEITENTITEL

    1. Wenn ein Wert fr data-title existiert, wird dieser fr den Titel der internen Seite verwendet.

    2. Wenn kein Wert fr data-title existiert, wird der Header (data-role="header") verwendet.

    3. Existiert weder ein Wert fr data-title noch ein Header, wird das Element innerhalb des Elements auf der Seite verwendet.

    30

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    VERLINKUNG Wenn man auf HTML-Dokumente verlinkt, die ebenfalls eine

    Seitenstruktur ber data-role="page" beinhalten, wird diese wie eine interne Seite behandelt

    Enthlt das externe Dokument allerdings mehrere HTML-Seiten, so muss bei Link das Attribut rel="external" oder target="_blank" verwendet werden

    Das fhrt zu einem kompletten Seiten-Refresh (und nicht einer Animation und Vorladen per AJAX).

    Dies ist notwendig, da jQuery Mobile keine Multi-Page Dokumente in das DOM der aktuellen Seite laden kann (Namespace Konflikte)

    Zustzlich ist es nicht mglich, Anker im klassischen Sinn zu verwenden, da diese als Sprungmarken fr interne Seite dienen.

    31

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    NAVIGATIONENLinks Links Links :-)

    32

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    NAVIGATION

    In jQuery Mobile werden vier Link-Arten unterschieden: Interne Links zu einer anderen Seite die im selben Dokument

    enthalten ist (Multipage-Dokument) Externer JQM Link zu einer anderen Seite in einem anderen

    Dokument Externer Link zu einer Nicht-jQueryMobile Seite Mobile Spezial-Links

    Die ersten beiden Link-Arten verhalten sich dabei wie folgt: Vorladen des Inhalts (bei extern) Erzeugung einer Animation von der ersten zur zweiten Seite Trigger des Back-Buttons um zur ersten Seite zurckzukommen

    33

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    INTERNE LINKS (#ID)

    34

    Quelle Grafik:jQuery Mobile - Up and running

    Maximiliano FirtmanOReilly

    ISBN: 978-1-449-39765-4

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    EXTERNER JQM REQUEST

    35

    jQuery Mobile

    Page RequestHijax-Request

    Web Server

    Hijax: http://en.wikipedia.org/wiki/Hijax

    Append to DOM

    Enhance Page

    Transition

    Hijax-Response

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    DATA-URL

    Das Attribut data-url wird beim Anreichern an die Seite gebunden

    Der Wert entspricht dem eindeutigen Locator (ID) und wird in der URL-Zeile des Browsers angezeigt

    Per Default verwendet jQuery Mobile hierfr die URL der Seite

    Allerdings kann man diesen Wert gezielt berschreiben indem man das Attribut selbst setzt.

    Dies ist insbesondere nach einem Redirect sinnvoll

    Oder wenn man den Dateinamen verstecken und nur die URL-Pfad anzeigen will

    36

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    EXTERNE JQM REQUEST1. jQuery Mobile parst das Attribut href ldt die Zielseite mittels eines Ajax-

    Requests (Hijax).2. Wenn die Seite erfolgreich geladen wurde, wird sie in das DOM

    eingehngt3. Ist dies erfolgreich, reichert jQuery Mobile die Seite an -inbesondere wird

    das base Element erweitert und das data-url Attribut gesetzt (wenn dies noch nicht explizit geschehen ist)

    4. Nun fhrt das Framework eine Transition (bergang) mit dem Typ slide durch (neue Seite wird von rechts nach links animiert reingeschoben und die alte Seite schiebt sich gleichermaen nach links raus).

    5. Anschlieend bekommt die aktive Seite die Klasse ui-page-active zugewiesen

    6. Schlielich wir die URL angepasst, soda ein Bookmark gesetzt werden kann (pushState Feature von HTML5)

    7. Schlgt das Laden fehl, wird ein Error Loading Page Overlay gezeigt

    37

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    TRANSITIONS (BERGNGE)1. jQuery Mobile verfgt ber 9 eingebaute Transitions:

    1. fade (Ausblenden/Einbleden)2. pop (Vergrern/Verkleinern)3. flip (Umdrehen - wie eine Karte)4. turn (Rausklappen/Reinklappen nach/von Links)5. flow (Animationseffekt bekannt vom iPhone Safari beim Wechsel von Seiten)6. slidefade (Rausfahren/Reinfahren nach/von links bei gleichzeitigem Ausblenden/Einblenden)7. slide (Rausfahren/Reinfahren nach/von links)8. slideup (Rausfahren/Reinfahren nach/von oben bei gleichzeitigem Ausblenden/Einblenden)9. slidedown (Rausfahren/Reinfahren nach/von unten bei gleichzeitigem Ausblenden/Einblenden)10. none (Keine Animation)

    2. Eine Transition kann ber das Attribut data-transition="[transition]" spezifiziert werden, welches auf alle Links, Buttons und Formulare gelegt werden kann.

    3. Um eine umgekehrte Transition zu forcieren kann data-direction="reverse" verwendet werden.

    38

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    DIALOGE VS. SEITEN1. Dialoge sind Seiten mit einem

    abgenderten UI2. Die Seite wird auf dem Hintergrund platziert,

    mit abgerundeten Ecken dargestellt und mit einem Schlieen-Button links oben versehen

    3. Eingeleitet wird ein Dialog mit dem AttributAGB

    4. Oder aber bei der Definitionder Seite selbstAGB

    5. Dialoge knnen nicht gebookmarkt werden und tauchen nicht in der History auf.

    6. Dialoge knnen per API geschlossen werdenfunction processAgreement(){ // Dialog schlieen $('.ui-dialog').dialog('close');}

    39

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    ACTION SHEETS1. Action Sheets sind Dialoge die von

    oben animiert hereinfahren2. Auf diesen wird meist eine User-Interaktion eingefordert3. Technisch gesehen sind dies Dialoge,

    denen Header und Footer fehlt

    4. Code:Logout LOGOUT: Sicher? Yepp! Niemals! span.title { display:block; text-align:center; margin-top:10px; margin-bottom:20px; }

    40

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    EXTERNE LINKS Damit der jQuery Mobile Ablauf erhalten bleibt:

    Das Ziel muss auch eine jQuery Mobile Seite sein Das Ziel muss in der selben Domain liegen. Das Ziel darf nur eine Seite enthalten Wenn die Ziel-URL ein Verzeichnis ist, muss ein abschlieender

    Slash angeben werden => href="/clients/" . Das target-Attribut darf nicht angegeben werden

    Alle anderen Flle fhren zu einem normalen Laden der Seite Vorab laden von Seiten ber das Attribut data-prefetchLade Seite vorab

    DOM-Caching (erzeugtes DOM der Seite wird gecached):

    41

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    EXTERNE ABSOLUTE LINKS

    Externe absolute Links werden wie folgt erzeugt: Zufgen des Attributs: data-rel="external"typovison

    Zufgen eines target Attributstypovison

    Verweisen auf eine andere Domaintypovison

    Verwenden des Attributs: data-ajax="false"typovison

    Dieses Attribut kann auch auf die Seite selbst angewendet werden

    42

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    MOBILE SPEZIAL-LINKS

    Es gibt einige spezielle Links: Starten der Telefon-AppRufen Sie uns an!

    Facetime (nur auf iOS)Rufen Sie uns ber Facetime an

    Skype (nur wenn vorhanden)Rufen Sie uns ber Skype an

    EmailSchreiben Sie uns!

    SMSSchreiben Sie uns eine SMS

    43

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    TOOLBARSHeader & Footer Toolsbars

    44

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    HEADER BAR Normale Header Toolbar:

    Seitentitel

    Fixieren der Toolbar mittels:

    Fullscreen-Mode mittels:(Toolbars sind verschwunden und tauchen erst bei Touch wieder auf - gut fr groflchige Seiten wie Galerien oder hnlichem)

    Die Header Bar hat keinen Backbutton per Default, man muss diesen einschalten (siehe spter)

    45

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    HEADER BAR - TITLE

    Auf den Header/Footer wird das CSS-Attribut text-overflow: ellipsis gelegt um den Titel abzuschneiden und mit ... aufzufllen: Ziemlich langer Titel

    Dies kann ber folgendes CSS verhindert werden:.ui-header .ui-title, .ui-footer .ui-title { margin-right: 0 !important; margin-left: 0 !important;}

    46

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    HEADER BAR - FIXED POSITION ber das Attribut data-position="fixed" kann die fixe Position von Header Bar

    (und auch Footer Bar) emuliert werden, soda sie als fixiert wahrgenommen wird

    iOS untersttzt dafr seit der Version 5.0 die CSS-Eigenschaften position:fixed, overflow:auto sowie overflow-scrolling: touch

    Auf Android 3.0, sowie Blackberry PlayBook funktioniert dies auch innerhalb von Block-Elementen und wurde in jQuery Mobile 1.1 nachgereicht.

    Um auf diesen Systemen richtig fixierte Toolbars zu erhalten, sollte das Feature in jQuery Mobile eingeschaltet werden - Fallback ist immer das Default-Verhalten:

    $(document).bind('mobileinit', function() { $.mobile.touchOverflowEnabled=true;});

    Will man nun ausschlielich im Content-Bereich zoomen, so kann man dies mittels touchOverflowZoomEnabled einschalten.

    47

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    HEADER TOOLBAR - BUTTONS Toolbar mit einem Button:

    Log out Title

    Toolbar mit zwei Buttons:

    Log out Title Settings

    Will man den Button rechts positionieren, kann manclass="ui-btn-right" verwenden

    48

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    HEADER TOOLBAR - BUTTONS

    Button ohne Text:

    Header

    Zur Realisierung eines eigene Back-Buttons:

    data-rel="back"

    Dies stattet den Button mit einer Back-Funktion aus. Das Linkziel wird dann nicht mehr beachtet und die Animation findet mit der Richtung reverse statt. Funktioniert nur in A- und B-Grade Browser. C-Grade Browser ignorieren das Attribut und folgen dem Link-Ziel

    49

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    BACK-BUTTON

    Zufgen eine Back-Buttons ber folgenden Code:

    Button aktivieren (default ist false): data-add-back-btn="true"Button-Text: data-back-btn-text="Previous"Button-Theme: data-back-btn-theme="e"

    Globales Konfigurieren ber JavaScript

    $(document).bind('mobileinit',function(){ $.mobile.page.prototype.options.addBackBtn = true; $.mobile.page.prototype.options.backBtnText = "Previous"; $.mobile.page.prototype.options.backBtnTheme = "b";});

    50

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    TOOLBARS - SEGMENTED

    Segmentierte Toolbar: Filme Im Kino In Krze Top-Filme .segmented-control { text-align:center;} .segmented-control .ui-controlgroup { margin: 0.2em; } .ui-control-active, .ui-control-inactive { border-style: solid; border-color: gray; } .ui-control-active { background: #BBB; } .ui-control-inactive { background: #DDD; }

    51

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    TOOLBARS - UI-BAR

    Toolbar mit einer UI-Bar:

    Refresh Filter Search New Item

    52

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    TOOLBARS - NAVBAR

    Toolbar mit einer UI-Bar: Home Home Kontakt Events News

    Fr Icon-Only einfach Text weglassen

    53

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    ICONS

    bersicht ber die verfgbaren Icons:

    http://jquerymobile.com/test/docs/buttons/buttons-icons.html

    54

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    TOOLBARS - AKTIVER BUTTON

    Aktiver Button mittels:

    Home Contacts Events News

    55

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    TOOLBARS - PERSISTENZ

    Nach jedem Ladevorgang wird auch die Footer-Toolbar neu geladen. Will man diese persistieren (kein Neuladen), so muss man folgenden Code verwenden: Kino Theater Kino Theater

    56

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    TOOLBARS - CUSTOM ICONS Verwendung von eigenen Icons (beispielsweise von http://

    glyphish.com/) Home Kino Theater .ui-navbar-custom .ui-btn .ui-btn-inner { font-size: 11px!important; padding-top: 24px!important; padding-bottom: 0px!important;}.ui-navbar-custom .ui-btn .ui-icon { width: 30px!important; height: 20px!important; margin-left: -15px!important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important;}#home .ui-icon { background: url(icons/53-house.png) 50% 50% no-repeat; background-size: 22px 20px;}...

    57

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    BUTTONSKlick & Action

    58

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    BUTTONS - ARTEN Mgliche Arten:Klick mich!Klick mich auch!

    Inline Buttons ber:B1

    Icon-Buttons ber:Search

    59

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    BUTTONS - NATIVE BEIBEHALTEN Um automatische Button-Umwandlung aufzuheben, muss das Attribut

    data-role="none"

    verwendet werden.

    Oder ber JS global deaktiviert werden:

    $(document).bind('mobileinit',function(){ $.mobile.page.prototype.options.keepNative = "input, select";});

    60

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    BUTTON-ICONS

    ICONS:http://jquerymobile.com/test/docs/buttons/buttons-icons.html

    Eigene ICONS: data-icon="myapp-tweet".ui-icon-myapp-tweet { background: url(icons/tweet.png)50% 50% no-repeat; background-size: 14px 14px;}@media only screen and (-webkit-min-device-pixel-ratio: 2) { .ui-icon-myapp-tweet { background-image: url(icons-hd/tweet.png) !important; background-size: 18px 18px; }}

    61

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    ICON-POSITIONIERUNG

    Positionierungen:Help

    Help

    Help

    Help

    62

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    BUTTONS - GRUPPIERUNG Button-Gruppierung: Button 1 Button 2 Button 2

    Button-Gruppierung horizontal: Button 1 Button 2 Button 2

    63

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    BUTTONS - EFFEKTE

    Button-Effekte:Help

    64

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    FORMULAREInteraktion

    65

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    FORMULARE - GRUNDLAGEN

    Email: Submit

    Animation beim Wegschicken ber data-transition="pop"

    Ohne AJAX ber data-ajax="false" oder target="_blank"

    66

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    FORMULARE - FIELDCONTAINER Company Name: Email:

    67

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    FORMULARE - FELDER

    Mgliche Feld-Arten:

    Untersttzung siehehttp://www.quirksmode.org/html5/inputs_mobile.html

    68

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    FORMULARE - FELDER

    date: Datum Tag, Monat, Jahrdatetime: Tag, Monat, Jahr, Stunde, Minutetime: Stunde, Minutedatetime-local: Datum ohne Zeit-Informationmonth: Monats-Selektorweek: Wochen-Selektor

    Your Birthdate:Your favorite month:

    69

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    FORMULARE - SELECT 1/2 Select-Elemente (Mehrfachauswahl mit multiple)

    Technologie: Extbase pi_base jQuery jQuery Mobile jQuery UI Offline Storage Markup

    70

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    FORMULARE - SELECT 2/2 Select-Elemente mit eigener ( jQuery Mobile) UI

    Technologie: Whlen Sie aus... TYPO3 FLOW3 jQuery

    71

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    FORMULARE - CHECKBOXEN Radio-Buttons (name-Attribut muss gleich sein)

    Technologie: TYPO3 FLOW3 jQuery Technologie: TYPO3 FLOW3 jQuery

    Wichtig, damit horizontale Radiobuttons nicht umbrechen .ui-controlgroup-horizontal .ui-radio label { font-size: 13px !important; }

    72

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    FORMULARE - CHECKBOXEN Checkboxen (name-Attribut muss gleich sein)

    Technologie: TYPO3 FLOW3 jQuery Technologie: TYPO3 FLOW3 jQuery

    Wichtig, damit horizontale Checkboxen nicht umbrechen .ui-controlgroup-horizontal .ui-checbox label { font-size: 12px !important; }

    73

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    FORMULARE - SLIDER Menge:

    74

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    FORMULARE - SWITCH jQuery: Aus An

    75

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    LISTENParadigmen

    76

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    NORMALE LISTEN

    Normale Listen: Offline Access Geolocation API Canvas Offline Storage New semantic tags

    77

    data-inset="true"

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    TRENNER

    Trenner: Group A Argentina ... Group B United States ... Group C Germany ...

    78

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    INTERAKTIVE LISTEN

    Interakive Listen: Interner Link Externer Link Absoluter externer Link Telefon JavaScript link

    79

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    LISTEN-AUSZEICHNUNG

    Listen-Auszeichnungen: Sonntag

    20.Mai 2012

    18 Uhr Meeting Sonntag

    20.Mai 2012

    Mails 123

    80

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    LISTEN DARSTELLUNG

    Listen-Darstellung mit Thumbnails: Kung Fu Panda

    Rated: PG

    Runtime: 95 min.

    ...

    Um Icons mit der Gre 16x16 Pixel zuverwenden kann man eine Klasse verwenden:

    81

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    LISTEN - SPLIT BUTTONS

    Listen-Darstellung mit Split-Buttons: Kung Fu Panda

    Rated: PG

    Runtime: 95 min.

    Tickets kaufen

    Eignet sich sehr gut um zwei verschiedeneAktionen (Links) zu untersttzen

    82

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    NUMERISCHE LISTEN

    Numerische Listen mittel -Tag: TYPO3 FLOW3 jQuery jQuery Mobile

    83

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    LISTEN FILTERN

    Filtern von Listen

    TYPO3 FLOW3 jQuery jQuery Mobile

    Suchen in Meta-Daten (findet auch AAPL z.B.)AppleUnited States

    Der Platzhalter-Text kann auch global gesetzt werden:$(document).bind('mobileinit',function(){ $.mobile.listview.prototype.options.filterPlaceholder="Suche...";});

    84

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    VERSCHACHTELTE LISTEN

    Verschachtelte Listen

    TYPO3 TCA TCE TypoScript FLOW3 jQuery

    Verschachtelte Listen werden automatisch zugeklappt angezeigt. Ein Klick auf eines der Elemente sorgt dafr, dass mittels eine Slide-Animation die Unterliste angezeigt wird.

    85

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    CONTENTInhalte und deren Auszeichnung

    86

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    GRID-CONTENT

    Spalten und Zeilen (gleichmige Aufteilung): Zelle 1.1 Zelle 1.2 Zelle 1.3 Zelle 2.1 Zelle 2.2

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    AUFKLAPP-CONTENT Aufklapp-Content: berschrift1

    INHALT1

    berschrift2

    INHALT2

    Kann beliebig verschachtelt werdenDIV > DIV > H2 > DIV > H3 > p

    Styling durch:data-themedata-content-theme

    88

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    AUFKLAPP-CONTENT + EMOJI

    Aufklapp-Content mit EMOJI-Icons (nur iOS):

    Wireless Notifications Location Services Applications Faceoff LinkedOut Netflicks

    http://www.iphone-ticker.de/ios-5-alle-emoji-symbole-auf-einen-blick-22663/

    89

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    AKKORDION - COLLAPSIBLE SET Akkordion-Funktion (nur ein ausgeklappter

    Container zur gleichen Zeit):

    Wireless Notifications Location Services Applications Faceoff LinkedOut Netflicks

    90

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    THEME-ROLLERCustom Designs

    91

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    EIGENE SKRIPTE

    92

    http://jquerymobile.com/themeroller/

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    THEME ROLLER

    Mit dem Theme Roller ist es mglich ein individuelles Theme zu erstellen, dieses runterzuladen und dann zu verwenden

    Es ist damit mglich alle Elemente individuellzu gestalten

    In the Global-Settings knnen globale Einstellungen getroffen werden, die in allenSwatches gelten sollen

    93

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    THEME ROLLER

    Es knnen beliebig viele Swatches hinzugefgt werden Man kann entweder den eingebauten Farbwhler (mit Brightness-

    und Saturation-Funktion) verwenden oder Adobe Kuler

    94

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    THEME ROLLER

    Man kann ein altes Theme importieren und umwandeln lassen in ein Theme der Version 1.1.0

    Das fertig Theme kann anschlieend heruntergeladen werden Oder man teilt das Theme mit anderen Leuten ber einen

    eindeutigen Link

    95

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    JAVASCRIPTUnd das Framework

    96

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    EIGENE SKRIPTE

    $(document).bind("mobileinit", function() { // Eigener Code hier});

    97

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    EVENTS 1/12

    Um Events nachzuvollziehen, kann man einen Event Logger als Bookmarklet verwenden:http://code.jquery.com/mobile/latest/demos/tools/log-page-events.html

    mobileinitWenn jQuery Mobile initialisiert wird,wird ein mobileinit Event auf dasdocument Objekt getriggert

    98

    Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    EVENTS 2/12

    pagebeforechangeDies ist der erste Event der whrendeinem Seitenwechsel getriggert wird.

    $( document ).bind( "pagebeforechange", function( e, data ) { console.log("Seitenwechsel startet..."); // Hole die Seite var toPage = data.toPage; // Hole die Optionen der Seite var options = data.options; // Etwas mit der Seite machen // z.B. Seitenwechsel abbrechen e.preventDefault();});

    99

    Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    EVENTS 3/12

    pagebeforeloadDies ist der erste Event der whrenddem Laden der Seite getriggert wird.

    $( document ).bind( "pagebeforeload", function( e, data ){ console.log("Laden der Seite startet"); // Manuelles Laden triggern e.preventDefault(); // Seite laden + Einfgen ins DOM var response = manuallyLoadPage(); if (response.status = "success") { data.deferred.resolve( data.absUrl, data.options,response.page); } else { data.deferred.reject( data.absUrl, data.options ); }});

    100

    Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    EVENTS 4/12

    pagebeforecreateDieser Event tritt auf, nachdem der Seiten-Container zum DOM hinzugefgt wurde und bevor die Seite angereichert wird.

    $( "#to-page-id" ). live( "pagebeforecreate", function(){ console.log( "Hier sollte das Markup geparst werden, bevor es angereichert wird" );});

    101

    Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    EVENTS 5/12

    pagecreateHier ist der beste Platz um Seiten-Plugins zu initialisieren.

    $( "#to-page-id" ).live( "pagecreate", function(){ console.log("Seiten-Plugins werden initialisiert...); // Initialisiere eigene Plugins ( ":jqmData(role='my-plugin') " ) .myPlugin();});

    102

    Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    EVENTS 6/12

    pageinitEvent der auftritt, nachdem die Anreicherung komplett ist. Die Seite ist nun DOM-Ready.

    $( "#to-page-id" ).live( "pageinit", function(){ console.log("Die Seite wurde angereichert... "); ...});

    103

    Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    EVENTS 7/12

    pageloadEvent nachdem die Seite erfolgreichins DOM geladen wurde.

    $( document ).bind( "pageload", function( e, data ){ console.log("Seite wurde erfolgreich ins DOM geladen...");});

    pageloadfailedWird aufgerufen, wenn das Laden fehl schlgt.

    104

    Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    EVENTS 8/12

    pagebeforehideWird auf der Seite getriggert von der die Animation startet. Wird nur abgefeuert, wenn der Seitenwechsel eine dedizierte von Seite besitzt.

    $( "#from-page-id" ).live( "pagebeforehide", function( e, data ){ console.log( "Der Seitenbergang startet jetzt..." );});

    105

    Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    EVENTS 9/12

    pagebeforeshowWird auf der Seite getriggert zu der die Animation fhren soll. Wird nur abgefeuert, wenn der Seitenwechsel eine dedizierte zu Seite besitzt.

    $( "#from-page-id" ).live( "pagebeforeshow", function( e, data ){ console.log( "Der Seitenbergang startet jetzt..." );});

    106

    Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    EVENTS 10/12

    pagehideWird auf der Seite getriggert von der die Animation gestartet ist und die nun versteckt ist.

    $( "#from-page-id" ).live( "pagehide", function( e, data ){ console.log( "Der Seitenbergang ist fertig..." );});

    107

    Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    EVENTS 11/12

    pageshowWird auf der Seite getriggert zu der die Animation fhren soll und die nun sichtbar ist.

    $( "#from-page-id" ).live( "pageshow", function( e, data ){ console.log( "Der Seitenbergang ist fertig..." );});

    108

    Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    EVENTS 12/12

    pagechangeLetzter Event eines Seitenwechsels.

    $( document ).bind( "pagechange", function( e, data ){ console.log(Change page successfully completed...); var toPage = data.toPage; var options = data.options;});

    pagechangefailedWird getriggert, falls der Seitenwechsel fehl schlgt.

    109

    Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    WIDGETS

    Zugriff auf das jQuery Mobile Objekt:$.mobile. bzw. jQuery.mobile

    Mgliche Widgetspagedialogcollapsiblefieldcontainnavbarlistviewcheckboxradiobuttonslidertextinputselectmenucontrolgroup

    110

    $.mobile..prototype.$.mobile..prototype.options.

    $.mobile.page.prototype.options

    gltig fr

    Instanzen: data-role="page"

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    DEFAULT CONFIGURATION

    ndern von Default-Werten:$(document).bind("mobileinit", function() { $.mobile.pushStateEnabled = true; $.mobile.loadingMessage = "Ldt..."; $.mobile.pageLoadErrorMessage = "Fehler!"; $.mobile.defaultPageTransition = "fade"; $.mobile.minScrollBack = 150; $.mobile.activeBtnClass = "active-button"; $.mobile.ajaxEnabled = false; $.mobile.allowCrossDomainPages = true;

    // resultiert in $.mobile.ns = "typovision";

    ...});

    111

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    DATA UTILITIES

    Zugriff auf die Data-Attributevar buttons = $("a[data-role=button"]);var buttons = $("a:jqmData(role='button')");

    $("a").jqmRemoveData("transition"); // statt removedata$("#button1").jqmData("theme", "a"); // statt data

    112

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    PAGE UTILITIES Seiten-Funktionen

    // activePage ist das var currentPageId = $.mobile.activePage.id;

    // pageContainer ist das $.mobile.pageContainer...

    // Laden einer externen Seite$.mobile.changePage("external.html");

    // bergang zu einer internen Seite im selben Doc$.mobile.changePage($("#pageId"));$.mobile.changePage($("#page2"), { transition: "slide", reverse: true});

    113

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    API - CHANGEPAGE 1/2 $.mobile.changePage( toPage, [options] ) toPage (string oder jQuery collection)

    toPage: URL (contact.html) oder interne ID (#contact) toPage: jQuery collection ($("#contact"))

    options (object) transition (string, default: $.mobile.defaultTransition, slide)

    bergangs-Animations-Funktion reverse (boolean, default: false)

    Ablauf der Animation: Vorwrts=false, Rckwrts=true changeHash (boolean, default: true)

    Aktualisierung des Hash in der URL-Zeile role (string, default: page)

    Das data-role Attribut. Kann page oder dialog sein pageContainer ( jQuery collection, default: $.mobile.pageContainer)

    Spezifiziert das Element, welches die Seite nach dem Laden enthlt

    114

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    API - CHANGEPAGE 2/2

    options (object) (Fortsetzung...) type (string, default: get)

    Spezifiziert die Methode des Ladens (get oder post) data (string oder object, default: undefined)

    Daten, die an den AJAX-Request gesendet werden reloadPage (boolean, default: false)

    Forciert einen Reload der Seite, selbst wenn diese im DOM-Cache ist showLoadMsg (boolean, default: true)

    Anzeigen einer Loading-Message whrend des Ladens fromHashChange (boolean, default: false)

    Zeigt an, dass die Funktion aus einem hashchange Event aufgerufen wurde

    115

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    CHANGEPAGE - BEISPIEL 1/2 Beispiel 1

    function viewProduct(idProduct) { $.mobile.changePage("productdetail.php", { method: "post", data: { action: 'getProduct', id: idProduct }, transition: "fade" });}Produkt-Details

    116

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    CHANGEPAGE - BEISPIEL 2/2

    Beispiel 2

    /* Erstellung und ffnen einer neuer Seite */

    // Erstellung des Markupsvar newPage = $("Neuer HeaderNeuer Inhalt!");

    // Fge die Seite zum Seitencontainer hinzunewPage.appendTo( $.mobile.pageContainer );

    // bergang zur neuen Seite einleiten$.mobile.changePage( newPage );

    117

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    DYNAMISCHE BUTTONS 1/4

    Grundstruktur des Markups Dynamische Buttons Erzeuge Button1

    Button ans Ende zufgen$( "#create-button1" ).bind( "click", function() { $( 'Button1' ) .appendTo( ".ui-content" ) .button();});

    118

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    DYNAMISCHE BUTTONS 2/4 Button nach dem Klick-Button zufgen

    $( "#create-button2" ).bind( "click", function() { $( 'Button2' ) .insertAfter( "#create-button2" ) .button({ corners: true, icon: "home", inline: true, shadow: true, theme: 'a', create: function(event) { console.log( "Creating button..." ); for (prop in event) { console.log(prop + ' = ' + event[prop]); } } })});

    119

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    DYNAMISCHE BUTTONS 3/4

    Input-Type Button zufgen und konfigurieren

    $( "#create-button5" ).bind( "click", function() { $( '' ) .insertAfter( "#create-button5" ) .button();});

    $( "#create-button6" ).bind( "click", function() { $( '' ) .insertAfter( "#create-button6" ) .button({ 'icon': "home", 'inline': true, 'shadow': true, 'theme': 'a' })});

    120

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    DYNAMISCHE BUTTONS 4/4

    Mehrere Buttons zufgen sowie Aktivierung/Deaktivierung

    $( "#create-multiple-buttons" ).bind( "click", function() { $( 'Button3' ).insertAfter( "#create-multiple-buttons" ); $( 'Button4' ).insertAfter( "#button3" ); $.mobile.pageContainer.trigger( "create" );});

    $( "#disable-button3" ).bind( "click", function() { $( "#button3" ).button( "disable" );});

    $( "#enable-button3" ).bind( "click", function() { $( "#button3" ).button( "enable" );});

    121

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    DYNAMISCHER TEXTINPUT

    Input-Felder dynamisch hinzufgen sowie De-/Aktivierung

    $( '' ) .insertAfter( "#firstName" ) .textinput();

    $( '' ) .insertAfter( "#text1" ) .textinput({ theme: 'c' });

    $( "#text1" ).textinput( "disable" );

    $( "#text1" ).textinput( "enable" );

    122

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    DYNAMISCHE SELECTS

    Selectmens erzeugen

    $( '...' ) .insertAfter( "#foo" ) .selectmenu();

    $( '...' ) .insertAfter( "#select1" ) .selectmenu({ theme: "e", overlayTheme: "c", disabled: false, nativeMenu: false});

    $( "#select1" ).selectmenu( "disable" );

    $( "#select1" ).selectmenu( "enable" );

    123

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    DYNAMISCHE RADIOBUTTONS

    Radiobuttons erzeugen

    $( ' Map view: Map...') .insertAfter( "#radio1" );$.mobile.pageContainer.trigger( "create" );

    $( ' Map view: Map...' ) .insertAfter( "#radio1" );

    $( "#map1" ).checkboxradio({ theme: "e" });$( "#map2" ).checkboxradio({ theme: "e" });

    $.mobile.pageContainer.trigger( "create" );

    124

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    DYNAMISCHE CHECKBOXEN

    Checkboxen erzeugen

    $( ' Genre: Action...' ) .insertAfter( "#element1" );

    $.mobile.pageContainer.trigger( "create" );

    $( ' Genre: Action...' ) .insertAfter( "#create-cb2" );

    $( '#c3' ).checkboxradio({ theme: "e" });$( '#c4' ).checkboxradio({ theme: "e" });

    $.mobile.pageContainer.trigger( "create" );

    125

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    DYNAMISCHE SLIDER

    Slider erzeugen

    $( 'Brightness: ') .insertAfter( "#element1" );$( "#s1" ).slider();

    $( 'Brightness: ' ) .insertAfter( "#create-s2" ); $( "#s1" ).slider({ theme: "d", trackTheme: "a", disabled: false});

    126

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    DYNAMISCHE SWITCHES

    Switch erzeugen

    $( '' ) .insertAfter( #foo ) .slider();

    $( '...' ) .insertAfter( #switch1 ) .slider({ theme: "b", trackTheme: "c", disabled: false});

    127

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    DYNAMISCHE LISTEN

    Listen erzeugen$( ' Genres Action Comedy' ) .insertAfter( "#list0" ) .listview();

    $( 'Genres Action Comedy' ) .insertAfter( "#list1" ) .listview({ theme: "d", dividerTheme: "a", inset: true,});

    $( "#list1" ) .append('Drama') .listview("refresh");

    128

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    LISTEN FILTERN

    Das Listen-Filtern Feature ( data-filter="true") sucht in den Listen nach irgendeinem Auftreten der eingetippten Buchstaben. Will man beispielsweise nur am Anfang suchen, so muss man die Suchfunktion selbst programmieren.

    text enthlt den Text der ListesearchValue enthlt den eingetippten Suchstring

    $(document).bind('mobileinit',function(){ $.mobile.listview.prototype.options.filterCallback = function( text, searchValue ){ // Verwenden eine Suche am Anfang-Funktion return !(text.toLowerCase().indexOf( searchValue ) === 0); };});

    Die Default-Suche ist wie folgt definiert:return text.toLowerCase().indexOf( searchValue ) === -1;

    129

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    PLATTFORM-UTILITIES

    130

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    PFAD-UTILITIES

    131

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    ORIENTATION CHANGE

    Orientierung feststellen

    $(document).bind("orientationchange", function(orientation) { if (orientation=="landscape") {

    // Landscape-Mode

    } else {

    // Portrait-Mode

    }

    });

    132

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    GESTEN

    Swipe-Right triggern

    $(document).bind("mobileinit", function() { $("#page2").live("swiperight", goBackToPage1);});function goBackToPage1() { $.mobile.changePage("#page1", { reverse: true }); $("#page2").unbind("swiperight", goBackToPage1);}

    133

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    BEISPIELE: SEITEN ZUFGEN 1/2

    HTML-Markup

    Dynamic page Add Pages

    134

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    BEISPIELE: SEITEN ZUFGEN 2/2

    JavaScript (ausserhalb mobileinit platzieren)

    function addPages() { for (var i=1; i

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    BEISPIELE: SEITEN ERZEUGEN 1/2

    HTML-Markup

    Dynamic pages Page 1 Page 2 Page 3 Page 4 Header Content Footer

    136

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    BEISPIELE: SEITEN ERZEUGEN 2/2

    JavaScript (ausserhalb mobileinit platzieren)

    $(document).bind('pagebeforechange', function(event, data) { // We receive the destination page in data.toPage and we normalize it var url = $.mobile.path.parseUrl(data.toPage).hash; if (url!=undefined && url.length>5 && url.substring(0, 5)=="#page") { // We dynamically inject a new page var id = url.substring(5); // We will use a page template already in the DOM $("#pageTemplate h1").html("Page " + id); // We change to the real page template without using // its real page id in history $.mobile.changePage($("#pageTemplate"), {dataUrl: data.toPage}); // We prevent normal page transition event.preventDefault(); }});

    137

    Quelle Code:jQuery Mobile - Up and running

    Maximiliano FirtmanOReilly

    ISBN: 978-1-449-39765-4

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    TOUCH EVENTS

    tab (Kurzes Tippen)

    tabhold (Tippen und mindestens ca. 1s halten)

    swipe (Wischen, mindestens 30px horizontal und max 20px vertikal, innerhalb einer 1s - alle Parameter einstellbar)

    swipeleft (swipe nach links)

    swiperight (swipe nach rechts)

    138

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    VIRTUELLE MOUSE EVENTS

    Dient dazu normalisierte Events fr sowohl Touch wie auch Mouse zu haben

    vmouseover (touch oder mouseover) vmousedown (touchstart oder mousedown) vmousemove (touchmove oder mousemove) vmouseup (touchend oder mouseup) vclick (touchend oder click) vmousecancel (touch oder mousecancel)

    139

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    CHANGELOG FR JQUERY MOBILE 1.1

    Verffentlicht am 13.04.2012

    140

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 141

    Richtige fixe Toolbars, CSS-basiert und kompatibelauf diesen Endgerten: iOS5 iPhone and iPad, Android 2.2 and 2.3, Android 3.x, Tablets(Honeycomb), Android 4.x (ICS), Chrome for Android (beta), BB Playbook 1-2, BB7, Nook Color/Tablet, Kindle Fire, Kindle 3, All modern desktop browsers (IE, Firefox, Safari, Chrome, etc.)

    Methoden: http://jq2uerymobile.com/demos/1.1.0/docs/toolbars/bars-fixed-options.html

    Die bergnge sind nun weicher und schneller Die bergnge turn (WP Metro style page effect) und flow (iOS

    tabswitchingtransition) wurden hinzugefgt

    Firefox untersttzt nun eine Vielzahl an bergngen Neues AJAX-Loader Design und Optionen

    Beispiel: http://jquerymobile.com/demos/1.1.0/docs/config/loadingMessageTextVisible.html

    Das Feature touchOverflow ist deprecated jQuery 1.7.1 wird nun untersttzt

    DIE NDERUNGEN IN 1.1

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 142

    Mini Formular-Elemente knnen nun ber das Attribut data-mini="true" hinzugefgt werdenEin Vergleich: http://jquerymobile.com/demos/1.1.0/docs/forms/forms-all-compare.html

    Der Flip Switch wurde berarbeitet:http://jquerymobile.com/demos/1.1.0/docs/forms/switch/

    Der Slider hat nun ein Highlight-Feature bekommen, welches ber das Attribut data-highlight="true" aktiviert wird.

    Bei Slider kann man nun die Schrittgre ber das Attribut step="25" einstellen

    ber das Attribut data-enhance="false" kann die Anreicherung gezielt fr einzelne Elemente abgeschaltet werden

    DIE NDERUNGEN IN 1.1

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 143

    data-ajax="false" wirkt nun auch auf Container (und nicht nur einzelne Elemente). Dies kann zudem ber $.mobile.ignoreContentEnabled=true zentral eingestellt werden

    Der Default-bergang ist nun ab 1.1.0 fade und nicht mehr slide Alle bergnge, die nicht darstellbar sind, haben nun fade als Fallback Der Theme-Roller erlaubt es nun, ltere 1.0er Themes zu importieren und

    als 1.1er zu exportieren

    URL JS: http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js URL CSS: http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css

    DIE NDERUNGEN IN 1.1

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    QUELLENWeitere Quellen

    144

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    QUELLEN

    145

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    QUELLEN

    jQuery Dokumentationhttp://jquerymobile.com/demos/1.1.0/

    jQuery Mobile Projektseite: http://www.jquerymobile.com

    jQuery Mobile Examples: http://www.jqmgallery.com

    jQuery Mobile Forum: http://forum.jquery.com/jquery-mobile

    Cheat-Sheethttp://www.opitz-consulting.com/fileadmin/redaktion/veroeffentlichungen/pdf/CheatSheet-jQuery-Mobile.pdf

    146

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 147

    LINKSZu Tools

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    LINKS

    148

    http://www.codiqa.com/

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 149

    BEISPIELEjQuery Mobile in the wild

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    BEISPIELE

    150

    ikea.se kanbanpad.com jquerymobile.com/demo/

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

    BEISPIELE

    151

    m.fiat.es vaio-s.de eticur.de

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 152

    VIELEN DANK!FRAGEN?

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 153

    SIE PLANEN EIN EIGENESJQUERY MOBILE PROJEKT?

    SPRECHEN SIE UNS AN!

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 154

    Patrick Lobacher (geb. Schuster) - Geschftsfhrer 41 Jahre alt, glcklich verheiratet, wohnhaft in Mnchen Autor von 8 Fachbchern und 34 Fachartikeln

    zum Thema TYPO3 und Webentwicklung

    Certified TYPO3 Integrator seit 2009 Mitglied in den TYPO3 Core-Teams:

    Certification & Extbase & Content Editorial

    Mitveranstalter des TYPO3camp Munich und T3DD12 Speaker auf nationalen und internationalen Kongressen Dozent fr fhrende Schulungsinstitute und die MVHS

    BER PATRICK LOBACHER

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 155

    BER DIE TYPOVISION GMBH Mnchner Fullservice-Agentur fr digitale Kommunikation 25 Mitarbeiter (+ 10 aus festem Freelancer Pool) Geschftsfhrer: Sebastian Bttger, Patrick Lobacher Spezialisiert auf TYPO3 seit 9 Jahren (Extbase/Fluid seit 2009)

    Agenturprsentation unter: www.typovision.de/dieagentur

    ber 400 TYPO3-Projekte jeglicher Grenordnung - fr Kunden wie:

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 156

    Adresse:

    typovision GmbH

    Landshuter Allee 880637 Mnchen

    Fon: +49 89 45 20 59 3 - 0Fax: +49 89 45 20 59 3 - 29Email: [email protected]: http://www.typovision.de

    KONTAKT - KLASSISCH

  • (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 157

    Twitter: www.twitter.com/typovision www.twitter.com/PatrickLobacher www.twitter.com/crosscontent

    Facebook: www.facebook.com/typovision

    XING: www.xing.com/profile/Patrick_Lobacher www.xing.com/profile/Sebastian_Boettger2

    Slideshare: www.slideshare.net/plobacher

    Amazon: www.amazon.de/Patrick-Lobacher/e/B0045AQVEA

    KONTAKT - SOCIAL CHANNELS