SlideShare ist ein Scribd-Unternehmen logo
1 von 157
Downloaden Sie, um offline zu lesen
JQUERY MOBILE
                                                Kompakt

                                                  16.05.2012




                              Patrick Lobacher (GF typovision GmbH)


(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   1
EINFÜHRUNG
                                            in jQuery Mobile



(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   2
DAS MOBILE WEB - MYTHEN


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

•   Man benötigt keine spezielle Anpassung für das mobile Web?!

•   Eine Website sollte auf allen Zugangsgeräten funktionieren?!

•   Um eine mobile Website zu erstellen, genügt es mit einer Breite von
    240px zu arbeiten?!

•   => Neue Herausforderungen im mobilen Bereich




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   3
MOBILE LÖSUNGEN


                                                                                   Mobile Framework
      Kompatible Website                    Optimierte Website

                                                                           (Web-Technologie, optimiert für
      (Keine Anpassung)                    (Viewport, BuildIn, ...)
                                                                                  alle Zugangsgeräte)




           Web App
                                                Hybride App                            Native App

(speziell optimierte Applikation
                                      (Web-Technologie eingebettet               (eigener Code für alle
     bestehend aus Web-
                                        in nativem Rahmengerüst)                      Plattformen)
          Technologie)




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




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   5
WAS IST JQUERY MOBILE

•   Was ist jQuery Mobile?

    •   jQuery Mobile: Berührungsoptimiertes Web Framework für
        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 degradation
        Progressive Verbesserung <=> würdevolle Herabstufung

(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   6
JQUERY MOBILE - PROGRESSIVE

•   Progressive Enhancement?

    •   Basis-Inhalte sind von allen Browsern zugänglich

    •   Basis-Funktionalitäten sind von allen Browsern zugänglich

    •   Der Inhalt wird in semantischem Markup abgebildet

    •   Erweitertes Layout wird über extern verlinkte CSS-Dateien zur
        Verfügung gestellt

    •   Erweiterte Funktionen werden über extern verlinkte,
        „unaufdringliche“ JS-Dateien realisiert

(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   7
WAS IST JQUERY MOBILE NICHT

•   Was ist jQuery Mobile NICHT?
    •   jQuery Mobile ist keine jQuery-Alternative für 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 natürlich komplette Web-Apps erstellen - die allerdings
              erst mit Hybrid-Frameworks wie PhoneGap „nativ“ werden
    •   jQuery Mobile ist kein Framework für JavaScript Liebhaber
          •   Ausser für erweiterte Themen, wird kein JavaScript benötigt
    •   jQuery Mobile ist NICHT die Lösung für ALLE mobile Applikationen,
        Websites oder Spiele
          •   Aber für die meisten :-)

(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   8
JQUERY MOBILE GESCHICHTE

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

    •   John Resig, JavaScript Tool Entwickler für die Mozilla Corporation
        (@jeresig auf Twitter)

    •   Dual Lizenz: GPL oder MIT

    •   jquerymobile.com

    •   Aktuelle Version: 1.1.0 (13.04.2012)

    •   Größe: 19 KB (130 KB)

    •   (Größe jQuery: 32 KB / 247 KB - Gesamt: 51 KB / 377 KB)
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   9
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/)

(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   10
JQUERY MOBILE KOMPATIBILITÄT




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   11
JQUERY MOBILE KOMPATIBILITÄT




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   12
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)


(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   13
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 Endgerät oder Emulator testen!!
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   14
GETTING STARTED
                                           Jetzt geht‘s los :-)



(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   15
JQUERY MOBILE EINBINDEN

•   Download von http://jquerymobile.com/download/
    <link rel="stylesheet" href="http://code.jquery.com/mobile/
    1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></
    script>
    <script src="http://code.jquery.com/mobile/1.1.0/
    jquery.mobile-1.1.0.min.js"></script>


•   Einbindung von LATEST (nur zu Testzwecken):
    <link href="http://code.jquery.com/mobile/latest/
    jquery.mobile.min.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-latest.pack.js"></
    script>
    <script src="http://code.jquery.com/mobile/latest/
    jquery.mobile.min.js"></script>




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   16
HTML5-GRUNDGERÜST
•   Basis HTML

    <!DOCTYPE html>
    <html>
    <head>
         <meta charset="utf-8" />
         <title>Titel</title>
         <link rel="stylesheet" href="http://code.jquery.com/mobile/
    1.0/jquery.mobile-1.0.min.css" />
         <script src="http://code.jquery.com/jquery-1.6.4.min.js"></
    script>
         <script type="text/javascript" src="http://code.jquery.com/
    mobile/1.0/jquery.mobile-1.0.min.js"></script>
         <meta name="viewport" content="width=device-width; initial-
    scale=1;">
    </head>
    <body>

    </body>
    </html>


(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   17
META-DATEN
•   Angaben für den Viewport
    <meta name="viewport" content="width=device-width; initial-
    scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

    width = Wert in Pixel oder device-width
    initial-scale = Wert der initialen Skalieren (1.0 für normal)
    maximum-scale = Wert für die maximal mögliche Skalierung
    minimum-scale = Wert für die minimal mögliche Skalierung
    user-scalable = Angabe, ob der User überhaupt skalieren darf

•   Angaben zum Fullscreen-Modus
    <meta name="apple-mobile-web-app-capable" content="yes" />
    Fullscreen Modus - kein Bottom-Controls und kein URL-Feld mehr - kann per JS über
    window.navigator.standalone abgefragt werden
    <meta name="apple-mobile-web-app-status-bar-style"
    content="black" />
    Farbe der Status-Leiste oben - diese kann nicht ausgeblendet werden

(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   18
WEBCLIPS ICON
•   Für alle Icon-Größen und/oder Devices müssen eigene Angaben
    gemacht werden:
    <link rel="icon" href="icons/icon32.png">
    <link rel="shortcut icon" href="icons/icon32.png">
    <link rel="apple-touch-icon" href="icons/icon57.png" sizes="57x57">
    <link rel="apple-touch-icon" href="icons/icon114.png" sizes="114x114">
    <link rel="apple-touch-icon" href="icons/icon72.png" sizes="72x72">
    <link rel="apple-touch-icon" sizes="80x80" href="icons/icon80.png">
    <link rel="apple-touch-icon-precomposed" sizes="android-only"
    href="icons/icon57.png">

    <link rel="apple-touch-startup-image" href="images/launch-iphone.png"
    media="(max-device-width: 480px)">
    <link rel="apple-touch-startup-image" href="images/launch-iPad-p.png"
    media="screen and (min-device-width: 481px) and (max-device-width:
    1024px) and (orientation:portrait)">
    <link rel="apple-touch-startup-image" href="images/launch-iPad-l.png"
    media="screen and (min-device-width: 481px) and (max-device-width:
    1024px) and (orientation:landscape)">

    => iPhone/iPod: 320×460 / iPad Portrait: 748×1004 / iPad Landscape: 748×1024(rotated 90 degrees)


(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   19
RESPONSIVE LAYOUTS MIT JQM

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

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

•   Beim Orientierungswechsel kann es in iOS-Geräten dazu kommen, dass der Zoom nicht mehr
    stimmt (iOS Bug) - dafür gibt es zwei Lösungen:

       •   Abschalten des Zooms
           <meta name="viewport" content="width=device-width,
           minimum-scale=1.0, maximum-scale=1.0">

       •   Dynamisches Neuberechnen des Zooms
           http://adactio.com/journal/4470/


(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   20
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 Displays
    @media 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)");

(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   21
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“
       •   Zugehöriges 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




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




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   23
SEITENSTRUKTUR
•   data-role ist NICHT mandatory - aber guter Stil!
•   <div data-role="page">
           <div data-role="header">
              <h1>Header</h1>
           </div>
           <div data-role="content">
              <p>CONTENT</p>
           </div>
        <div data-role="footer" data-position="fixed">
           <h4>Footer</h4>
        </div>
    </div>



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




                                          jQuery Mobile
  Semantisches
                                               page
 HTML5 Markup
                      anreichern         enhancements          umwandeln




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   25
SEITENSTRUKTUR - JQM
•   Das macht jQuery Mobile aus der Seite (enhancement)
    <html class="ui-mobile">
    <head>
           <meta charset="utf-8">
           <title>Titel</title>
           <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/
    jquery.mobile-1.0.min.css">
           <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
           <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/
    jquery.mobile-1.0.min.js"></script>
           <meta name="viewport" content="width=device-width; initial-scale=1;">
    </head>
    <body class="ui-mobile-viewport">
           <div data-role="page" data-url="/Users/patricklobacher/Desktop/jQuery Mobile/
    test.html" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height:
    403px; ">
               <div data-role="header" class="ui-header ui-bar-a" role="banner">
                    <h1 class="ui-title" tabindex="0" role="heading" aria-
    level="1">Header</h1>
               </div>
               <div data-role="content" class="ui-content" role="main">
                    <p>CONTENT</p>
               </div>
               <div data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-
    footer-fixed fade ui-fixed-overlay" role="contentinfo" style="top: 241px; ">
                    <h4 class="ui-title" tabindex="0" role="heading" aria-
    level="1">Footer</h4>
               </div>
           </div>
           <div class="ui-loader ui-body-a ui-corner-all" style="top: 354px; "><span
    class="ui-icon ui-icon-loading spin"></span><h1>loading</h1></div>
    </body>
    </html>

(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   26
THEMING
•   Alle Elemente werden über ein Theme dargestellt

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

•   Jedes Theme ist in „Swatches“ unterteilt (unterschiedliche Optionen)

•   Ansprechen über data-theme="buchstabe"




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   27
MULTI-PAGE
                             Mehrere Seiten in einem Dokument



(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   28
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".

•   <!-- Erste Seite -->
    <div data-role="page" id="home" data-title="Home">
         <div data-role="header">
             <h1>Willkommen!</h1>
         </div>
         <div data-role="content">
             <a href="#contact" data-role="button">Kontakt</a>
         </div>
    </div>
    <!-- Zweite Seite -->
    <div data-role="page" id="contact" data-title="Contact">
         <div data-role="header">
             <h1>Kontakt</h1>
         </div>
         <div data-role="content">
             Kontakt Infos...
         </div>
         <script type="text/javascript">
             /* Seitenspezifisches JavaScript */
         </script>
    </div>

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


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

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

3. Existiert weder ein Wert für data-title noch ein Header, wird das
   <title> Element innerhalb des <head> Elements auf der Seite
   verwendet.




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   30
VERLINKUNG
•   Wenn man auf HTML-Dokumente verlinkt, die ebenfalls eine
    Seitenstruktur über data-role="page" beinhalten, wird diese wie eine
    interne Seite behandelt

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

•   Das führt 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)

•   Zusätzlich ist es nicht möglich, Anker im klassischen Sinn zu
    verwenden, da diese als Sprungmarken für interne Seite dienen.
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   31
NAVIGATIONEN
                                         Links Links Links :-)



(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   32
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 zurückzukommen



(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   33
INTERNE LINKS (#ID)




                                                                                                          Quelle Grafik:
                                                                                         jQuery Mobile - Up and running
                                                                                                    Maximiliano Firtman
                                                                                                                O‘Reilly
                                                                                               ISBN: 978-1-449-39765-4




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012               34
EXTERNER JQM REQUEST
             jQuery Mobile


             Page Request
                                             Hijax-Request
                                                                                     Web Server


            Append to DOM
                                            Hijax-Response




             Enhance Page




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


(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   35
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 hierfür 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

(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   36
EXTERNE JQM REQUEST
1. jQuery Mobile parst das Attribut href lädt die Zielseite mittels eines Ajax-
   Requests (Hijax).
2. Wenn die Seite erfolgreich geladen wurde, wird sie in das DOM
   eingehängt
3. 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 führt 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 gleichermaßen nach links raus).
5. Anschließend bekommt die aktive Seite die Klasse ui-page-active
   zugewiesen
6. Schließlich wir die URL angepasst, sodaß ein Bookmark gesetzt werden
   kann (pushState Feature von HTML5)
7. Schlägt das Laden fehl, wird ein „Error Loading Page“ Overlay gezeigt

(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   37
TRANSITIONS (ÜBERGÄNGE)
1. jQuery Mobile verfügt über 9 eingebaute Transitions:
   1.    fade (Ausblenden/Einbleden)
   2.    pop (Vergrößern/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.
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   38
DIALOGE VS. SEITEN
1. Dialoge sind Seiten mit einem
   abgeänderten UI
2. Die Seite wird auf dem Hintergrund platziert,
   mit abgerundeten Ecken dargestellt und mit
   einem Schließen-Button links oben versehen
3. Eingeleitet wird ein Dialog mit dem Attribut
    <a href="#terms" data-rel="dialog"
    data-transition="slidedown">AGB</a>
4. Oder aber bei der Definition
    der Seite selbst
    <div data-role="dialog" id="terms">
    AGB
    </a>
5. Dialoge können nicht gebookmarkt werden
   und tauchen nicht in der History auf.
6. Dialoge können per API geschlossen werden
    function processAgreement(){
        // Dialog schließen
        $('.ui-dialog').dialog('close');
    }


(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   39
ACTION SHEETS
1. Action Sheets sind Dialoge die von
   oben animiert hereinfahren
2. Auf diesen wird meist eine User-Interaktion eingefordert
3. Technisch gesehen sind dies Dialoge,
   denen Header und Footer fehlt

4. Code:
    <div data-role="page" id="home">
    <!-- Öffnen der Seite als Dialog -->
    <a href="#logout" data-transition="slidedown">
    Logout</a>
    </div>
    <!-- Action-Sheet durch weglassen des Headers! -->
    <div data-role="dialog" id="logout">
        <div data-role="content">
        <span class="title">LOGOUT: Sicher?</span>
        <a href="#home" data-role="button" data-theme="b">Yepp!</a>
        <a href="#" data-role="button" data-theme="c" data-rel="back">Niemals!</
    a>
    </div>
    <style>
        span.title { display:block; text-align:center;
        margin-top:10px; margin-bottom:20px; }
    </style>
    </div>

(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   40
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 abschließender
        Slash angeben werden => href="/clients/" .
    •   Das target-Attribut darf nicht angegeben werden
•   Alle anderen Fälle führen zu einem „normalen“ Laden der Seite
•   Vorab laden von Seiten über das Attribut data-prefetch
    <a href='neueseite' data-prefetch>Lade Seite vorab</a>
•   DOM-Caching (erzeugtes DOM der Seite wird gecached):
    <div data-role="page" data-dom-cache="true">


(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   41
EXTERNE ABSOLUTE LINKS


•   Externe absolute Links werden wie folgt erzeugt:
    •   Zufügen des Attributs: data-rel="external"
        <a href="http://www.typovision.de" data-rel="external">typovison</a>

    •   Zufügen eines target Attributs
        <a href="http://www.typovision.de" target="_blank">typovison</a>

    •   Verweisen auf eine andere Domain
        <a href="http://www.anderedomain.de">typovison</a>

    •   Verwenden des Attributs: data-ajax="false"
        <a href="http://www.typovision.de" data-ajax="false">typovison</a>
        Dieses Attribut kann auch auf die Seite selbst angewendet werden




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   42
MOBILE SPEZIAL-LINKS

•   Es gibt einige spezielle Links:
    •   Starten der Telefon-App
        <a href="tel:+498945205930">Rufen Sie uns an!</a>

    •   Facetime (nur auf iOS)
        <a href="facetime:101010">Rufen Sie uns über Facetime an</a>

    •   Skype (nur wenn vorhanden)
        <a href="skype:skype_user?call">Rufen Sie uns über Skype an</a>

    •   Email
        <a href="mailto:info@typovision.de?subject=Kontakt&body=Das
        %20ist%20der%20Inhalt">Schreiben Sie uns!</a>
    •   SMS
        <a href="sms://+49151547266?body=SMS%20Text">Schreiben Sie uns
        eine SMS</a>



(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   43
TOOLBARS
                                    Header & Footer Toolsbars



(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   44
HEADER BAR
•   Normale Header Toolbar:
    <div data-role="header">
         <h1>Seitentitel</h1>
    </div>

•   Fixieren der Toolbar mittels:
    <div data-role="header" data-position="fixed">

•   Fullscreen-Mode mittels:
    <div data-role="page" data-fullscreen="true">
    (Toolbars sind verschwunden und tauchen erst bei Touch wieder auf -
    gut für großflächige Seiten wie Galerien oder ähnlichem)

•   Die Header Bar hat keinen Backbutton per Default, man muss diesen
    einschalten (siehe später)
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   45
HEADER BAR - TITLE

•   Auf den Header/Footer wird das
    CSS-Attribut text-overflow: ellipsis
    gelegt um den Titel abzuschneiden und
    mit ... aufzufüllen:
    <div data-role="header">
          <h1>Ziemlich langer Titel</h1>
    </div>

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

(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   46
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 unterstützt dafür 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 ausschließlich im Content-Bereich zoomen, so kann man dies
    mittels touchOverflowZoomEnabled einschalten.
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   47
HEADER TOOLBAR - BUTTONS
   •   Toolbar mit einem Button:

       <div data-role="header">
         <a href="logout">Log out</a>
         <h1>Title</h1>
       </div>
   •   Toolbar mit zwei Buttons:

       <div data-role="header">
         <a href="logout">Log out</a>
         <h1>Title</h1>
         <a href="settings" data-icon="gear" data-
       theme="b">Settings</a>
       </div>

   •   Will man den Button rechts positionieren, kann man
       class="ui-btn-right" verwenden
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   48
HEADER TOOLBAR - BUTTONS

   •   Button ohne Text:

       <div data-role="header">
         <h1>Header</h1>
         <a href="#" data-icon="plus" data-
       iconpos="notext" data-theme="b"></a>
       </div>
   •   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


(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   49
BACK-BUTTON
•   Zufügen eine Back-Buttons über folgenden Code:

    •   <div data-role="page" data-add-back-btn="true"
        data-back-btn-text="Previous" data-back-btn-theme="e">


        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";
        });


(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   50
TOOLBARS - SEGMENTED
   •   Segmentierte Toolbar:
       <div data-role="header" data-theme="b"
          data-position="fixed">
          <h1>Filme</h1>
              <div class="segmented-control ui-bar-d">
                  <div data-role="controlgroup"
       data-type="horizontal">
                      <a href="#" data-role="button"
       class="ui-control-active">Im Kino</a>
                      <a href="#" data-role="button"
       class="ui-control-inactive">In Kürze</a>
                      <a href="#" data-role="button"
       class="ui-control-inactive">Top-Filme</a>
                  </div>
              </div>
          </div>
          <style>
              .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; }
          </style>


(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   51
TOOLBARS - UI-BAR

   •   Toolbar mit einer „UI-Bar“:

       <div data-role="footer" class="ui-bar">
            <a href="refresh">Refresh</a>
            <a href="filter">Filter</a>
            <a href="search">Search</a>
            <a href="add" data-theme="b">New Item</a>
       </div>




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   52
TOOLBARS - NAVBAR
   •   Toolbar mit einer „UI-Bar“:
       <div data-role="header"
         data-position="fixed">
         <h1>Home</h1>
         <div data-role="navbar">
            <ul>
               <li><a href="#index" data-icon="home">Home</a>
               <li><a href="#contacts" data-
       icon="search">Kontakt</a>
               <li><a href="#events" data-icon="info">Events</a>
               <li><a href="#news" data-icon="grid">News</a>
            </ul>
         </div>
       </div>

   •   Für Icon-Only einfach Text weglassen




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

   •   Übersicht über die verfügbaren Icons:
       http://jquerymobile.com/
       test/docs/buttons/buttons-icons.html




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   54
TOOLBARS - AKTIVER BUTTON

   •   Aktiver Button mittels:

       <div data-role="footer" data-position="fixed">
         <div data-role="navbar">
            <ul>
               <li><a href="#index" class="ui-btn-
       active">Home</a>
               <li><a href="#contacts">Contacts</a>
               <li><a href="#events">Events</a>
               <li><a href="#news">News</a>
            </ul>
         </div>
       </div>




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   55
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 Tab Bar -->
       <div data-role="footer" class="tabbar" data-id="main-tabbar" data-
       position="fixed">
          <div data-role="navbar" class="tabbar">
              <ul>
                  <li><a href="tabbar-movies.html" class="ui-btn-active ui-state-
       persist">Kino</a></li>
                  <li><a href="tabbar-theatres.html">Theater</a></li>
              </ul>
          </div>
       </div>
       <!-- Theatres tab bar -->
       <div data-role="footer" class="tabbar" data-id="main-tabbar" data-
       position="fixed">
          <div data-role="navbar" class="tabbar">
              <ul>
                  <li><a href="tabbar-movies.html">Kino</a></li>
                  <li><a href="tabbar-theatres.html"
       class="ui-btn-active ui-state-persist">Theater</a></li>
              </ul>
          </div>
       </div>

(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   56
TOOLBARS - CUSTOM ICONS
   •   Verwendung von eigenen Icons (beispielsweise von http://
       glyphish.com/)
       <div data-role="footer" class="ui-navbar-custom" data-position="fixed">
           <div data-role="navbar" class="ui-navbar-custom">
               <ul>
                    <li><a href="#" id="home" data-icon="custom" data-theme="d">Home</a></
       li>
                    <li><a href="#" id="movies" data-icon="custom" class="ui-btn-
       active">Kino</a></li>
                    <li><a href="#" id="theatres" data-icon="custom" data-
       theme="d">Theater</a></li>
               </ul>
           </div>
       </div>
       <style>
       .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;
       }
       ...

(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   57
BUTTONS
                                              Klick & Action



(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   58
BUTTONS - ARTEN
   •   Mögliche Arten:
       <a href="#" data-role="button">Klick mich!</a>
       <button data-theme="b">Klick mich auch!</button>
       <input type="button" value="Und mich erst recht!">

   •   Inline Buttons über:
       <a href="#" data-role="button" data-inline="true">B1</a>




   •   Icon-Buttons über:
       <a href="" data-role="button"
       data-icon="plus"
       data-iconpos="notext"></a>
       <button data-icon="search"
       data-iconpos="notext">Search</button>


(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   59
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";
    });




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   60
BUTTON-ICONS
•   ICONS:
    http://jquerymobile.com/test/docs/buttons/buttons-icons.html




•   Eigene ICONS:
    data-icon="myapp-tweet"
    <style>
    .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;
       }
    }
    </style>

(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   61
ICON-POSITIONIERUNG
•   Positionierungen:
    <a href="#" data-role="button" data-icon="help" data-
    iconpos="right">Help</a>

    <a href="#" data-role="button" data-icon="help" data-
    iconpos="left">Help</a>

    <div data-role="controlgroup">

      <a href="#" data-role="button"
    data-icon="help"
    data-iconpos="bottom">Help</a>

      <a href="#" data-role="button"
    data-icon="help"
    data-iconpos="top">Help</a>

    </div>


(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   62
BUTTONS - GRUPPIERUNG
   •   Button-Gruppierung:
       <div data-role="controlgroup">
         <a href="#" data-
       role="button">Button 1</a>
         <a href="#" data-
       role="button">Button 2</a>
         <a href="#" data-
       role="button">Button 2</a>
       </div>

   •   Button-Gruppierung horizontal:
       <div data-role="controlgroup" data-type="horizontal">
         <a href="#" data-role="button" data-
       inline="true">Button 1</a>
         <a href="#" data-role="button" data-
       inline="true">Button 2</a>
         <a href="#" data-role="button" data-
       inline="true">Button 2</a>
       </div>

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


   •   Button-Effekte:
       <a href="#" data-role="button" data-shadow="false" data-
       corners="false">Help</a>




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



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


       •   <form action="send.php" action="get" data-transition="pop">
               <label for="email">Email:</label>
               <input type="email" name="email" id="email" value="" />
               <button type="submit" name="submit">Submit</button>
           </form>


       •   Animation beim Wegschicken über data-transition="pop"

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




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   66
FORMULARE - FIELDCONTAINER
       •   <form action="send.php" action="get" data-
           transition="pop">
              <div data-role="fieldcontainer">
                 <label for="company">Company Name:</label>
                 <input type="text" id="company" name="company">
              </div>
              <div data-role="fieldcontainer">
                 <label for="email">Email:</label>
                 <input type="email" id="email" name="email">
              </div>
           </form>




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


•   Mögliche Feld-Arten:
    <input type="text">
    <input type="password">
    <input type="email">
    <input type="tel">
    <input type="url">
    <input type="search">
    <input type="number">
    <textarea>

•   Unterstützung siehe
    http://www.quirksmode.org/html5/inputs_mobile.html




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


•   date: Datum Tag, Monat, Jahr
    datetime: Tag, Monat, Jahr, Stunde, Minute
    time: Stunde, Minute
    datetime-local: Datum ohne Zeit-Information
    month: Monats-Selektor
    week: Wochen-Selektor

    <div data-role="field container">
    <label for="birth">Your Birthdate:</label>
    <input type="date" id="birth" name="birth">
    <label for="favmonth">Your favorite month:</label>
    <input type="month" id="favmonth" name="favmonth">
    </div>




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   69
FORMULARE - SELECT 1/2
•   Select-Elemente (Mehrfachauswahl mit multiple)

    <label for="delivery">Technologie:</label>
    <select name="delivery" id="delivery"
         multiple="multiple">
         <optgroup label="TYPO3">
            <option value="extbase">Extbase</option>
            <option value="pi">pi_base</option>
         </optgroup>
         <optgroup label="JavaScript">
            <option value="jq">jQuery</option>
            <option value="jqm">jQuery Mobile</option>
            <option value="jqui">jQuery UI</option>
         </optgroup>
         <optgroup label="HTML5">
            <option value="offline">Offline Storage</option>
            <option value="markup">Markup</option>
         </optgroup>
    </select>


(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   70
FORMULARE - SELECT 2/2
•   Select-Elemente mit eigener ( jQuery Mobile) UI

    <label for="genre">Technologie:</label>
    <select name="genre" id="genre"
            data-native-menu="false"
            multiple="multiple">
         <option value="">Wählen Sie aus...</option>
         <option value="action">TYPO3</option>
         <option value="comedy">FLOW3</option>
         <option value="drama">jQuery</option>
    </select>




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   71
FORMULARE - CHECKBOXEN
•   Radio-Buttons (name-Attribut muss gleich sein)

    <fieldset data-role="controlgroup">
           <legend>Technologie:</legend>
           <input type="radio" name="tech" id="tech1"
    value="TYPO3" checked="checked" />
           <label for="tech1" data-theme="b">TYPO3</label>
           <input type="radio" name="tech" id="tech2" value="FLOW3" />
           <label for="tech2" data-theme="b">FLOW3</label>
           <input type="radio" name="tech" id="tech3" value="jQuery" />
           <label for="tech3" data-theme="b">jQuery</label>
    </fieldset>
    <fieldset data-role="controlgroup"
                data-type="horizontal">
           <legend>Technologie:</legend>
           <input type="radio" name="tech" id="tech1"
    value="TYPO3" checked="checked" />
           <label for="tech1">TYPO3</label>
           <input type="radio" name="tech" id="tech2" value="FLOW3" />
           <label for="tech2">FLOW3</label>
           <input type="radio" name="tech" id="tech3" value="jQuery" />
           <label for="tech3">jQuery</label>
    </fieldset>

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


(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   72
FORMULARE - CHECKBOXEN
•   Checkboxen (name-Attribut muss gleich sein)

    <fieldset data-role="controlgroup">
           <legend>Technologie:</legend>
           <input type="checkbox" name="tech" id="tech1"
    value="TYPO3" checked="checked" />
           <label for="tech1" data-theme="b">TYPO3</label>
           <input type="checkbox" name="tech" id="tech2" value="FLOW3" />
           <label for="tech2" data-theme="b">FLOW3</label>
           <input type="checkbox" name="tech" id="tech3" value="jQuery" />
           <label for="tech3" data-theme="b">jQuery</label>
    </fieldset>
    <fieldset data-role="controlgroup"
                data-type="horizontal">
           <legend>Technologie:</legend>
           <input type="checkbox" name="tech" id="tech1"
    value="TYPO3" checked="checked" />
           <label for="tech1">TYPO3</label>
           <input type="checkbox" name="tech" id="tech2" value="FLOW3" />
           <label for="tech2">FLOW3</label>
           <input type="checkbox" name="tech" id="tech3" value="jQuery" />
           <label for="tech3">jQuery</label>
    </fieldset>

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


(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   73
FORMULARE - SLIDER
•   <div data-role="fieldcontainer">
        <label for="qty">Menge:</label>
        <input type="range" id="qty" name="qty" min="1"
    max="100" value="5" data-theme="e" data-track-theme="b">
    </div>




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   74
FORMULARE - SWITCH
•   <label for="alerts">jQuery:</label>
    <select name="slider" id="alerts" data-role="slider">
        <option value="off">Aus</option>
        <option value="on">An</option>
    </select>




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



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

•   Normale Listen:
    <ul data-role="listview">
      <li>Offline Access</li>
      <li>Geolocation API</li>
      <li>Canvas</li>
      <li>Offline Storage</li>
      <li>New semantic tags</li>
    </ul>




                    data-inset="true"


(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   77
TRENNER
•   Trenner:
    <div data-role="content">
    <ul data-role="listview">
      <li data-role="list-divider">Group A</li>
      <li>Argentina</li>
      ...
      <li data-role="list-divider">Group B</li>
      <li>United States</li>
      ...
      <li data-role="list-divider">Group C
      <li>Germany</li>
      ...
    </ul>
    </div>




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   78
INTERAKTIVE LISTEN
•   Interakive Listen:
    <div data-role="content">
       <ul data-role="listview">
          <li><a href="#page2">Interner Link</a>
          <li><a href="other.html">Externer Link</a>
          <li><a href="http://www.typovision.de">Absoluter
    externer Link</a>
          <li><a href="tel:+13051010200">Telefon</a>
          <li><a href="javascript:alert('Hi!')">JavaScript link</
    a>
       </ul>
    </div>




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   79
LISTEN-AUSZEICHNUNG
•   Listen-Auszeichnungen:
    <ul data-role="listview">
       <li data-role="list-divider"
                 data-divider-theme="a">
          Sonntag
          <p class="ui-li-aside">20.Mai 2012</p>
       </li>
       <li>
          <a href="#">18 Uhr
              <span class="ui-li-aside">Meeting</span>
          </a>
       </li>
       <li data-role="list-divider"
              data-divider-theme="a">
          Sonntag
          <p class="ui-li-aside">20.Mai 2012</p>
       </li>
       <li>
          <a href="#">Mails
          <span class="ui-li-count">123</span></a>
       </li>
    </ul>

(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   80
LISTEN DARSTELLUNG
•   Listen-Darstellung mit Thumbnails:
    <ul data-role="listview">
       <li>
           <a href="movies/kung-fu-panda.html">
              <img src="images/kungfupanda2.jpg" />
              <h3>Kung Fu Panda</h3>
              <p>Rated: PG</p>
              <p>Runtime: 95 min.</p>
           </a>
       </li>
       ...
    </ul>



•   Um Icons mit der Größe 16x16 Pixel zu
    verwenden kann man eine Klasse verwenden:

    <img src="images/kungfupanda2.jpg" class="ui-li-icon" />

(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   81
LISTEN - SPLIT BUTTONS

•   Listen-Darstellung mit Split-Buttons:
    <ul data-role="listview" data-split-icon="star"
       data-split-theme="d">
       <li>
          <a href="movies/kung-fu-panda.html">
              <img src="images/kungfupanda2.jpg" />
              <h3>Kung Fu Panda</h3>
              <p>Rated: PG</p>
              <p>Runtime: 95 min.</p>
          </a>
          <a href="tickets.html">Tickets kaufen</a>
       </li>
    </ul>



•   Eignet sich sehr gut um zwei verschiedene
    Aktionen (Links) zu unterstützen

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




•   Numerische Listen mittel <ol>-Tag:
    <ol data-role="listview">
       <li><a href="#TYPO3">TYPO3</a></li>
       <li><a href="#FLOW3">FLOW3</a></li>
       <li><a href="#jQuery">jQuery</a></li>
       <li><a href="#jQueryMobile">jQuery Mobile</a></li>
    </ol>




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   83
LISTEN FILTERN
•   Filtern von Listen
    <ul data-role="listview"
       data-filter="true"
       data-filter-placeholder="Suche…">
       <li><a href="#TYPO3">TYPO3</a></li>
       <li><a href="#FLOW3">FLOW3</a></li>
       <li><a href="#jQuery">jQuery</a>
          </li>
       <li><a href="#jQueryMobile">
          jQuery Mobile</a></li>
    </ul>

•   Suchen in Meta-Daten (findet auch AAPL z.B.)
    <li data-filtertext="NASDAQ:AAPL Apple Inc."><a href="#">Apple</a></li>
    <li data-filtertext="USA U.S.A. United States of America"><a
    href="#">United States</a></li>

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

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

•   Verschachtelte Listen
    <ul data-role="listview">
       <li><a href="#TYPO3">TYPO3</a>
       <ul data-role="listview">
          <li><a href="#TCA">TCA</a></li>
          <li><a href="#TCE">TCE</a></li>
          <li><a href="#TypoScript">
              TypoScript</a></li>
       </ul>
       </li>
       <li><a href="#FLOW3">FLOW3</a></li>
       <li><a href="#jQuery">jQuery</a></li>
    </ul>




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


(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   85
CONTENT
                               Inhalte und deren Auszeichnung



(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   86
GRID-CONTENT
   •   Spalten und Zeilen (gleichmäßige Aufteilung):
       <section class="ui-grid-b">
         <!-- Zeile 1 -->
         <div class="ui-block-a">Zelle                            1.1</div>
         <div class="ui-block-b">Zelle                            1.2</div>
         <div class="ui-block-c">Zelle                            1.3</div>
         <!-- Zeile 2 -->
         <div class="ui-block-a">Zelle                            2.1</div>
         <div class="ui-block-b">Zelle                            2.2</div
         <div class="ui-block-c">Zelle                            2.3</div>
       </section>
   •   ui-grid-a        für     2spaltig
       ui-grid-b        für     3spaltig
       ui-grid-c        für     4spaltig
       ui-grid-d        für     5spaltig
   •   grid-block-a bis grid-block-e für
       Spalte 1 bis 5

(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   87
AUFKLAPP-CONTENT
   •   Aufklapp-Content:
       <div data-role="content">
         <div data-role="collapsible">
            <h2>Überschrift1</h2>
            <p>INHALT1</p>
         </div>
         <div data-role="collapsible"
       data-collapsed="true">
            <h2>Überschrift2</h2>
            <p>INHALT2</p> </div>
       </div>

   •   Kann beliebig verschachtelt werden
       DIV > DIV > H2 > DIV > H3 > p

   •   Styling durch:
       data-theme
       data-content-theme

(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   88
AUFKLAPP-CONTENT + EMOJI

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

    <div data-role="collapsible" data-collapsed="true"
              data-theme="a" data-content-theme="b">
          <h3>Wireless</h3>
          <ul data-role="listview" data-inset="true">
              <li><a href="#">&#xe117; Notifications</a></li>
              <li><a href="#">&#xe01d; Location Services</a></li>
          </ul>
    </div>
    <div data-role="collapsible" data-theme="a"
              data-content-theme="b">
          <h3>Applications</h3>
          <ul data-role="listview" data-inset="true">
              <li><a href="#">&#xe001; Faceoff</a></li>
              <li><a href="#">&#xe428; LinkedOut</a></li>
              <li><a href="#">&#xe03d; Netflicks</a></li>
          </ul>
    </div>


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


(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   89
AKKORDION - COLLAPSIBLE SET
•   Akkordion-Funktion (nur ein ausgeklappter
    Container zur gleichen Zeit):

    <div data-role="collapsible-set" data-theme="a"
          data-content-theme="b">
          <div data-role="collapsible" data-collapsed="true">
              <h3>Wireless</h3>
              <ul data-role="listview" data-inset="true">
                  <li><a href="#">&#xe117; Notifications
                      </a></li>
                  <li><a href="#">&#xe01d; Location Services
                      </a></li>
              </ul>
          </div>
          <div data-role="collapsible">
              <h3>Applications</h3>
              <ul data-role="listview" data-inset="true">
                  <li><a href="#">&#xe001; Faceoff</a></li>
                  <li><a href="#">&#xe428; LinkedOut</a></li>
                  <li><a href="#">&#xe03d; Netflicks</a></li>
              </ul>
          </div>
    </div>

(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   90
THEME-ROLLER
                                            Custom Designs



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




                          http://jquerymobile.com/themeroller/

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


•   Mit dem Theme Roller ist es möglich
    ein individuelles Theme zu erstellen,
    dieses runterzuladen und dann zu verwenden
•   Es ist damit möglich alle Elemente individuell
    zu gestalten
•   In the „Global“-Settings können globale
    Einstellungen getroffen werden, die in allen
    Swatches gelten sollen




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

•   Es können beliebig viele Swatches hinzugefügt werden
•   Man kann entweder den eingebauten Farbwähler (mit Brightness-
    und Saturation-Funktion) verwenden oder Adobe Kuler




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   94
THEME ROLLER
•   Man kann ein „altes“ Theme importieren und umwandeln lassen in
    ein Theme der Version 1.1.0
•   Das fertig Theme kann anschließend heruntergeladen werden
•   Oder man teilt das Theme mit anderen Leuten über einen
    eindeutigen Link




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   95
JAVASCRIPT
                                         Und das Framework



(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   96
EIGENE SKRIPTE
       •   <script src="http://code.jquery.com/
           jquery-1.6.4.min.js"></script>

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

           <script src="http://code.jquery.com/mobile/1.0/
           jquery.mobile-1.0.min.js"></script>




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   97
Quelle Grafik:
                                                                 Pro jQuery Mobile
                                                                 Brad Broulik



EVENTS 1/12
                                                                 Apress
                                                                 ISBN: 978-1430239666




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

•   mobileinit
    Wenn jQuery Mobile initialisiert wird,
    wird ein mobileinit Event auf das
    document Objekt getriggert


(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   98
Quelle Grafik:
                                                                 Pro jQuery Mobile
                                                                 Brad Broulik



EVENTS 2/12
                                                                 Apress
                                                                 ISBN: 978-1430239666




•   pagebeforechange
    Dies ist der erste Event der während
    einem 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();
    });



(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   99
Quelle Grafik:
                                                                 Pro jQuery Mobile
                                                                 Brad Broulik



EVENTS 3/12
                                                                 Apress
                                                                 ISBN: 978-1430239666




•   pagebeforeload
    Dies ist der erste Event der während
    dem Laden der Seite getriggert wird.

    $( document ).bind( "pagebeforeload",
    function( e, data ){
          console.log("Laden der Seite
    startet…");
          // Manuelles Laden triggern
          e.preventDefault();
          // Seite laden + Einfügen 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 );
          }
    });

(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   100
Quelle Grafik:
                                                                 Pro jQuery Mobile
                                                                 Brad Broulik



EVENTS 4/12
                                                                 Apress
                                                                 ISBN: 978-1430239666




•   pagebeforecreate
    Dieser Event tritt auf, nachdem der
    Seiten-Container zum DOM
    hinzugefügt 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" );
    });




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   101
Quelle Grafik:
                                                                 Pro jQuery Mobile
                                                                 Brad Broulik



EVENTS 5/12
                                                                 Apress
                                                                 ISBN: 978-1430239666




•   pagecreate
    Hier 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();
    });




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   102
Quelle Grafik:
                                                                 Pro jQuery Mobile
                                                                 Brad Broulik



EVENTS 6/12
                                                                 Apress
                                                                 ISBN: 978-1430239666




•   pageinit
    Event 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... ");
          ...
    });




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   103
Quelle Grafik:
                                                                 Pro jQuery Mobile
                                                                 Brad Broulik



EVENTS 7/12
                                                                 Apress
                                                                 ISBN: 978-1430239666




•   pageload
    Event nachdem die Seite erfolgreich
    ins DOM geladen wurde.

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


•   pageloadfailed
    Wird aufgerufen, wenn das Laden fehl
    schlägt.


(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   104
Quelle Grafik:
                                                                 Pro jQuery Mobile
                                                                 Brad Broulik



EVENTS 8/12
                                                                 Apress
                                                                 ISBN: 978-1430239666




•   pagebeforehide
    Wird 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 Seitenübergang
    startet jetzt..." );
    });




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   105
Quelle Grafik:
                                                                 Pro jQuery Mobile
                                                                 Brad Broulik



EVENTS 9/12
                                                                 Apress
                                                                 ISBN: 978-1430239666




•   pagebeforeshow
    Wird auf der Seite getriggert zu der
    die Animation führen soll. Wird nur
    abgefeuert, wenn der Seitenwechsel
    eine dedizierte „zu“ Seite besitzt.

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




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   106
Quelle Grafik:
                                                                 Pro jQuery Mobile
                                                                 Brad Broulik



EVENTS 10/12
                                                                 Apress
                                                                 ISBN: 978-1430239666




•   pagehide
    Wird 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 Seitenübergang ist
    fertig..." );
    });




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   107
Quelle Grafik:
                                                                 Pro jQuery Mobile
                                                                 Brad Broulik



EVENTS 11/12
                                                                 Apress
                                                                 ISBN: 978-1430239666




•   pageshow
    Wird auf der Seite getriggert zu der
    die Animation führen soll und die nun
    sichtbar ist.

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




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   108
Quelle Grafik:
                                                                 Pro jQuery Mobile
                                                                 Brad Broulik



EVENTS 12/12
                                                                 Apress
                                                                 ISBN: 978-1430239666




•   pagechange
    Letzter Event eines Seitenwechsels.

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


•   pagechangefailed
    Wird getriggert, falls der
    Seitenwechsel fehl schlägt.


(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   109
WIDGETS
       •   Zugriff auf das jQuery Mobile Objekt:
           $.mobile. bzw. jQuery.mobile

       •   Mögliche Widgets
           page
           dialog                       $.mobile.<widget_name>.prototype.
           collapsible                  $.mobile.<widget_name>.prototype.options.
           fieldcontain
           navbar                       $.mobile.page.prototype.options
           listview
           checkboxradio                gültig für
           button
           slider                       Instanzen: data-role="page"
           textinput
           selectmenu
           controlgroup

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

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

                 // resultiert in <div data-typovision-role="page">
                 $.mobile.ns = "typovision";

                 ...
           });


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




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

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




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   112
PAGE UTILITIES
       •   Seiten-Funktionen

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

           // pageContainer ist das <body>
           $.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
           });

(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   113
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: Vorwärts=false, Rückwärts=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 enthält



(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   114
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 während des Ladens
              •   fromHashChange (boolean, default: false)
                  Zeigt an, dass die Funktion aus einem hashchange Event aufgerufen wurde




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   115
CHANGEPAGE - BEISPIEL 1/2
       •   Beispiel 1

           <script>
           function viewProduct(idProduct) {
              $.mobile.changePage("productdetail.php", {
                 method: "post",
                 data: {
                     action: 'getProduct',‘
                     id: idProduct
                 },
                 transition: "fade"
              });
           }
           </script>
           <!-- ... -->
           <a href="javascript:viewProduct(5200)" data-
           role="button">Produkt-Details</a>

(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   116
CHANGEPAGE - BEISPIEL 2/2

       •   Beispiel 2

           /* Erstellung und Öffnen einer neuer Seite */

           // Erstellung des Markups
           var newPage = $("<div data-role=page data-url=hi><div
           data-role=header><h1>Neuer Header</h1></div><div data-
           role=content>Neuer Inhalt!</div></div>");

           // Füge die Seite zum Seitencontainer hinzu
           newPage.appendTo( $.mobile.pageContainer );

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



(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   117
DYNAMISCHE BUTTONS 1/4

       •   Grundstruktur des Markups
           <div data-role="page" data-theme="b">
               <div data-role="header">
                   <h1>Dynamische Buttons</h1>
               </div>
               <div data-role="content">
                   <a href="#" data-role="button"
                       id="create-button1">Erzeuge Button1</a>


       •   Button ans Ende zufügen
           $( "#create-button1" ).bind( "click", function() {
               $( '<a href="http://jquerymobile.com"
                   id="button1" data-role="button"
                   data-icon="star" data-inline="true"
                   data-theme="a">Button1</a>' )
                   .appendTo( ".ui-content" )
                   .button();
           });



(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   118
DYNAMISCHE BUTTONS 2/4
•   Button nach dem Klick-Button zufügen
    $( "#create-button2" ).bind( "click",
          function() {
          $( '<a href="http://jquerymobile.com"
                  id="button2">Button2</a>' )
              .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]);
                      }
                  }
              })
    });


(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   119
DYNAMISCHE BUTTONS 3/4

•   Input-Type Button zufügen und konfigurieren

    $( "#create-button5" ).bind( "click", function() {
          $( '<input type="submit" id="button5" value="Button5" data-theme="a" /
    >' )
              .insertAfter( "#create-button5" )
              .button();
    });

    $( "#create-button6" ).bind( "click", function() {
          $( '<input type="submit" id="button6" value="Button6" />' )
              .insertAfter( "#create-button6" )
              .button({
                  'icon': "home",
                  'inline': true,
                  'shadow': true,
                  'theme': 'a'
              })
    });



(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   120
DYNAMISCHE BUTTONS 4/4

•   Mehrere Buttons zufügen sowie Aktivierung/Deaktivierung

    $( "#create-multiple-buttons" ).bind( "click", function() {
          $( '<button id="button3" data-theme="a">Button3</
    button>' ).insertAfter( "#create-multiple-buttons" );
          $( '<button id="button4" data-theme="a">Button4</
    button>' ).insertAfter( "#button3" );
          $.mobile.pageContainer.trigger( "create" );
    });

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

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




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


•   Input-Felder dynamisch hinzufügen sowie De-/Aktivierung

•   $( '<input type="text" name="text1" value="" data-theme="c" />' )
          .insertAfter( "#firstName" )
          .textinput();

    $( '<input type="text" name="text2" id="text2" value="" />' )
          .insertAfter( "#text1" )
          .textinput({
              theme: 'c'
          });

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

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




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

•   Selectmenüs erzeugen

•   $( '<select name="select1" id="select1" data-theme="e">...</select>' )
          .insertAfter( "#foo" )
          .selectmenu();

    $( '<select name="select2" id="select2">...</select>' )
          .insertAfter( "#select1" )
          .selectmenu({
              theme: "e",
              overlayTheme: "c",
              disabled: false,
              nativeMenu: false
    });

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

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




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

•   Radiobuttons erzeugen

•   $( '<fieldset data-role="controlgroup">
              <legend>Map view:</legend>
              <input type="radio" name="map" id="map1" value="Map" />
              <label for="map1" data-theme="c">Map</label>...</fieldset>')
          .insertAfter( "#radio1" );
    $.mobile.pageContainer.trigger( "create" );

    $( '<fieldset data-role="controlgroup">
              <legend>Map view:</legend>
              <input type="radio" name="map" id="map1" value="Map" />
              <label for="map1">Map</label>...</fieldset>' )
          .insertAfter( "#radio1" );

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

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



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

•   Checkboxen erzeugen

•   $( '<fieldset data-role="controlgroup">
              <legend>Genre:</legend>
              <input type="checkbox" name="genre" id="c1" />
              <label for="c1" data-theme="c">Action</label>...</fieldset>' )
          .insertAfter( "#element1" );

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

    $( '<fieldset data-role="controlgroup">
              <legend>Genre:</legend>
              <input type="checkbox" name="genre" id="c3" />
              <label for="c3">Action</label>...</fieldset>' )
          .insertAfter( "#create-cb2" );

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

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



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


•   Slider erzeugen

•   $( '<label for="s1">Brightness:</label>
          <input type="range" name="s1" id="s1" min="0" max="9" data-theme="d"/>')
          .insertAfter( "#element1" );
    $( "#s1" ).slider();


•   $( '<label for="s1">Brightness:</label>
          <input type="range" name="s1" id="s1" min="0" max="10" />' )
          .insertAfter( "#create-s2" );
          $( "#s1" ).slider({
              theme: "d",
              trackTheme: "a",
              disabled: false
    });




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


•   Switch erzeugen

•   $( '<select name="switch1" data-role="slider" data-theme="c"></select>' )
          .insertAfter( “#foo” )
          .slider();

    $( '<select name="switch2" id="switch2">...</select>' )
          .insertAfter( “#switch1” )
          .slider({
              theme: "b",
              trackTheme: "c",
              disabled: false
    });




(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012   127
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)

Weitere ähnliche Inhalte

Was ist angesagt?

Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011
Dominik Helleberg
 
Mobile App Entwicklung
Mobile App EntwicklungMobile App Entwicklung
Mobile App Entwicklung
mediaman
 

Was ist angesagt? (20)

Spring - Frühling fürs iPhone - Spring-basierte Backends für iOS-Applikatione...
Spring - Frühling fürs iPhone - Spring-basierte Backends für iOS-Applikatione...Spring - Frühling fürs iPhone - Spring-basierte Backends für iOS-Applikatione...
Spring - Frühling fürs iPhone - Spring-basierte Backends für iOS-Applikatione...
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
ESE Conference: iOS, Android, WP7... Alle nativ auf einen Streich! streich
ESE Conference: iOS, Android, WP7...Alle nativ auf einen Streich! streichESE Conference: iOS, Android, WP7...Alle nativ auf einen Streich! streich
ESE Conference: iOS, Android, WP7... Alle nativ auf einen Streich! streich
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011
 
Spiele entwickeln mit dem Adobe AIR SDK
Spiele entwickeln mit dem Adobe AIR SDKSpiele entwickeln mit dem Adobe AIR SDK
Spiele entwickeln mit dem Adobe AIR SDK
 
Mobile App Entwicklung
Mobile App EntwicklungMobile App Entwicklung
Mobile App Entwicklung
 
Ansätze mobiler App Entwicklung mit Vor- und Nachteilen
Ansätze mobiler App Entwicklung mit Vor- und NachteilenAnsätze mobiler App Entwicklung mit Vor- und Nachteilen
Ansätze mobiler App Entwicklung mit Vor- und Nachteilen
 
Android Entwicklung GTUG München 2009
Android Entwicklung GTUG München 2009Android Entwicklung GTUG München 2009
Android Entwicklung GTUG München 2009
 
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
 
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
 
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhoneWebapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
 
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
 
Entstehung einer mobilen App für mittelständische Unternehmen
Entstehung einer mobilen App für mittelständische UnternehmenEntstehung einer mobilen App für mittelständische Unternehmen
Entstehung einer mobilen App für mittelständische Unternehmen
 
Referat: Architektur und Entwicklung mobiler Anwendungen
Referat: Architektur und Entwicklung mobiler AnwendungenReferat: Architektur und Entwicklung mobiler Anwendungen
Referat: Architektur und Entwicklung mobiler Anwendungen
 
Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!Niemals nach Mitternacht füttern - Grüne Roboter überall!
Niemals nach Mitternacht füttern - Grüne Roboter überall!
 
Mobile Development mit ASP.NET MVC 4
Mobile Development mit ASP.NET MVC 4Mobile Development mit ASP.NET MVC 4
Mobile Development mit ASP.NET MVC 4
 
App - und dann?
App - und dann?App - und dann?
App - und dann?
 
Software Entwicklung im Zeitalter der Kundenorientierung
Software Entwicklung im Zeitalter der KundenorientierungSoftware Entwicklung im Zeitalter der Kundenorientierung
Software Entwicklung im Zeitalter der Kundenorientierung
 
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 SeitenjQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
 
Hybride Entwicklung mit Ionic
Hybride Entwicklung mit IonicHybride Entwicklung mit Ionic
Hybride Entwicklung mit Ionic
 

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

Dominik Helleberg Widgets Wjax
Dominik Helleberg Widgets WjaxDominik Helleberg Widgets Wjax
Dominik Helleberg Widgets Wjax
Dominik Helleberg
 
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT Group
 

Ähnlich wie jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision) (20)

Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
Dominik Helleberg Widgets Wjax
Dominik Helleberg Widgets WjaxDominik Helleberg Widgets Wjax
Dominik Helleberg Widgets Wjax
 
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
 
Html5 - Traum oder Wirklichkeit
Html5 - Traum oder WirklichkeitHtml5 - Traum oder Wirklichkeit
Html5 - Traum oder Wirklichkeit
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
 
Case Study: Produktkonfigurator Web-App
Case Study: Produktkonfigurator Web-AppCase Study: Produktkonfigurator Web-App
Case Study: Produktkonfigurator Web-App
 
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch SalzburgSlides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
 
Hdc2012 cordova-präsi
Hdc2012 cordova-präsiHdc2012 cordova-präsi
Hdc2012 cordova-präsi
 
DACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdfDACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdf
 
Mobile Facts 2013: Apps & Websites
Mobile Facts 2013: Apps & WebsitesMobile Facts 2013: Apps & Websites
Mobile Facts 2013: Apps & Websites
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CKnockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
 
Back to the Frontend – aber nun mit Microservices
Back to the Frontend – aber nun mit MicroservicesBack to the Frontend – aber nun mit Microservices
Back to the Frontend – aber nun mit Microservices
 
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressWP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
 
jQuery Mobile mit TYPO3
jQuery Mobile mit TYPO3jQuery Mobile mit TYPO3
jQuery Mobile mit TYPO3
 

Mehr von die.agilen GmbH

Mehr von die.agilen GmbH (20)

LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
 
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
 
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
 
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
 
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
 
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
 
Roman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKRRoman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKR
 
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
 
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerkTYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
 
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / BerlinAgile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
 
The agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical applicationThe agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical application
 
How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...
 
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
 
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - PluswerkDWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
 
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - PluswerkInnovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
 
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
 
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
 
Innovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerkInnovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerk
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
 
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkTYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
 

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

  • 1. JQUERY MOBILE Kompakt 16.05.2012 Patrick Lobacher (GF typovision GmbH) (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 1
  • 2. EINFÜHRUNG in jQuery Mobile (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 2
  • 3. DAS MOBILE WEB - MYTHEN • Es gibt kein mobiles Web - es gibt nur das Web ansich?! • Man benötigt keine spezielle Anpassung für das mobile Web?! • Eine Website sollte auf allen Zugangsgeräten funktionieren?! • Um eine mobile Website zu erstellen, genügt es mit einer Breite von 240px zu arbeiten?! • => Neue Herausforderungen im mobilen Bereich (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 3
  • 4. MOBILE LÖSUNGEN Mobile Framework Kompatible Website Optimierte Website (Web-Technologie, optimiert für (Keine Anpassung) (Viewport, BuildIn, ...) alle Zugangsgeräte) Web App Hybride App Native App (speziell optimierte Applikation (Web-Technologie eingebettet (eigener Code für alle bestehend aus Web- in nativem Rahmengerüst) Plattformen) Technologie) (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 4
  • 5. MOBILE FRAMEWORKS (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 5
  • 6. WAS IST JQUERY MOBILE • Was ist jQuery Mobile? • jQuery Mobile: Berührungsoptimiertes Web Framework für 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 degradation Progressive Verbesserung <=> würdevolle Herabstufung (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 6
  • 7. JQUERY MOBILE - PROGRESSIVE • Progressive Enhancement? • Basis-Inhalte sind von allen Browsern zugänglich • Basis-Funktionalitäten sind von allen Browsern zugänglich • Der Inhalt wird in semantischem Markup abgebildet • Erweitertes Layout wird über extern verlinkte CSS-Dateien zur Verfügung gestellt • Erweiterte Funktionen werden über extern verlinkte, „unaufdringliche“ JS-Dateien realisiert (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 7
  • 8. WAS IST JQUERY MOBILE NICHT • Was ist jQuery Mobile NICHT? • jQuery Mobile ist keine jQuery-Alternative für 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 natürlich komplette Web-Apps erstellen - die allerdings erst mit Hybrid-Frameworks wie PhoneGap „nativ“ werden • jQuery Mobile ist kein Framework für JavaScript Liebhaber • Ausser für erweiterte Themen, wird kein JavaScript benötigt • jQuery Mobile ist NICHT die Lösung für ALLE mobile Applikationen, Websites oder Spiele • Aber für die meisten :-) (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 8
  • 9. JQUERY MOBILE GESCHICHTE • Erfunden 2010 vom Team rund um Jon Resig ( jQuery Team) • John Resig, JavaScript Tool Entwickler für die Mozilla Corporation (@jeresig auf Twitter) • Dual Lizenz: GPL oder MIT • jquerymobile.com • Aktuelle Version: 1.1.0 (13.04.2012) • Größe: 19 KB (130 KB) • (Größe jQuery: 32 KB / 247 KB - Gesamt: 51 KB / 377 KB) (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 9
  • 10. 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/) (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 10
  • 11. JQUERY MOBILE KOMPATIBILITÄT (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 11
  • 12. JQUERY MOBILE KOMPATIBILITÄT (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 12
  • 13. 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) (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 13
  • 14. 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 Endgerät oder Emulator testen!! (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 14
  • 15. GETTING STARTED Jetzt geht‘s los :-) (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 15
  • 16. JQUERY MOBILE EINBINDEN • Download von http://jquerymobile.com/download/ <link rel="stylesheet" href="http://code.jquery.com/mobile/ 1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></ script> <script src="http://code.jquery.com/mobile/1.1.0/ jquery.mobile-1.1.0.min.js"></script> • Einbindung von LATEST (nur zu Testzwecken): <link href="http://code.jquery.com/mobile/latest/ jquery.mobile.min.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-latest.pack.js"></ script> <script src="http://code.jquery.com/mobile/latest/ jquery.mobile.min.js"></script> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 16
  • 17. HTML5-GRUNDGERÜST • Basis HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Titel</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/ 1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></ script> <script type="text/javascript" src="http://code.jquery.com/ mobile/1.0/jquery.mobile-1.0.min.js"></script> <meta name="viewport" content="width=device-width; initial- scale=1;"> </head> <body> </body> </html> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 17
  • 18. META-DATEN • Angaben für den Viewport <meta name="viewport" content="width=device-width; initial- scale=1.0; maximum-scale=1.0; user-scalable=0;"/> width = Wert in Pixel oder device-width initial-scale = Wert der initialen Skalieren (1.0 für normal) maximum-scale = Wert für die maximal mögliche Skalierung minimum-scale = Wert für die minimal mögliche Skalierung user-scalable = Angabe, ob der User überhaupt skalieren darf • Angaben zum Fullscreen-Modus <meta name="apple-mobile-web-app-capable" content="yes" /> Fullscreen Modus - kein Bottom-Controls und kein URL-Feld mehr - kann per JS über window.navigator.standalone abgefragt werden <meta name="apple-mobile-web-app-status-bar-style" content="black" /> Farbe der Status-Leiste oben - diese kann nicht ausgeblendet werden (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 18
  • 19. WEBCLIPS ICON • Für alle Icon-Größen und/oder Devices müssen eigene Angaben gemacht werden: <link rel="icon" href="icons/icon32.png"> <link rel="shortcut icon" href="icons/icon32.png"> <link rel="apple-touch-icon" href="icons/icon57.png" sizes="57x57"> <link rel="apple-touch-icon" href="icons/icon114.png" sizes="114x114"> <link rel="apple-touch-icon" href="icons/icon72.png" sizes="72x72"> <link rel="apple-touch-icon" sizes="80x80" href="icons/icon80.png"> <link rel="apple-touch-icon-precomposed" sizes="android-only" href="icons/icon57.png"> <link rel="apple-touch-startup-image" href="images/launch-iphone.png" media="(max-device-width: 480px)"> <link rel="apple-touch-startup-image" href="images/launch-iPad-p.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)"> <link rel="apple-touch-startup-image" href="images/launch-iPad-l.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)"> => iPhone/iPod: 320×460 / iPad Portrait: 748×1004 / iPad Landscape: 748×1024(rotated 90 degrees) (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 19
  • 20. RESPONSIVE LAYOUTS MIT JQM • Media-Queries z.B. um die Orientierung zu befragen: @media (orientation: portrait) { /* Code hier für die Orientierung Portrait... */ } @media (orientation: landscape) { /* Code hier für die Orientierung Landscape... */ } => http://www.w3.org/TR/css3-mediaqueries/ • Beim Orientierungswechsel kann es in iOS-Geräten dazu kommen, dass der Zoom nicht mehr stimmt (iOS Bug) - dafür gibt es zwei Lösungen: • Abschalten des Zooms <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"> • Dynamisches Neuberechnen des Zooms http://adactio.com/journal/4470/ (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 20
  • 21. 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 Displays @media 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)"); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 21
  • 22. 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“ • Zugehöriges 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 (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 22
  • 23. ARCHITEKTUR - ROLLEN (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 23
  • 24. SEITENSTRUKTUR • data-role ist NICHT mandatory - aber guter Stil! • <div data-role="page"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> <p>CONTENT</p> </div> <div data-role="footer" data-position="fixed"> <h4>Footer</h4> </div> </div> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 24
  • 25. ABLAUF jQuery Mobile Semantisches page HTML5 Markup anreichern enhancements umwandeln (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 25
  • 26. SEITENSTRUKTUR - JQM • Das macht jQuery Mobile aus der Seite (enhancement) <html class="ui-mobile"> <head> <meta charset="utf-8"> <title>Titel</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/ jquery.mobile-1.0.min.css"> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/ jquery.mobile-1.0.min.js"></script> <meta name="viewport" content="width=device-width; initial-scale=1;"> </head> <body class="ui-mobile-viewport"> <div data-role="page" data-url="/Users/patricklobacher/Desktop/jQuery Mobile/ test.html" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 403px; "> <div data-role="header" class="ui-header ui-bar-a" role="banner"> <h1 class="ui-title" tabindex="0" role="heading" aria- level="1">Header</h1> </div> <div data-role="content" class="ui-content" role="main"> <p>CONTENT</p> </div> <div data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui- footer-fixed fade ui-fixed-overlay" role="contentinfo" style="top: 241px; "> <h4 class="ui-title" tabindex="0" role="heading" aria- level="1">Footer</h4> </div> </div> <div class="ui-loader ui-body-a ui-corner-all" style="top: 354px; "><span class="ui-icon ui-icon-loading spin"></span><h1>loading</h1></div> </body> </html> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 26
  • 27. THEMING • Alle Elemente werden über ein Theme dargestellt • Default ist ein Theme enthalten, weitere müssen über den sogenannten Theme-Roller eingebracht werden: http://jquerymobile.com/themeroller/ • Jedes Theme ist in „Swatches“ unterteilt (unterschiedliche Optionen) • Ansprechen über data-theme="buchstabe" (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 27
  • 28. MULTI-PAGE Mehrere Seiten in einem Dokument (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 28
  • 29. 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". • <!-- Erste Seite --> <div data-role="page" id="home" data-title="Home"> <div data-role="header"> <h1>Willkommen!</h1> </div> <div data-role="content"> <a href="#contact" data-role="button">Kontakt</a> </div> </div> <!-- Zweite Seite --> <div data-role="page" id="contact" data-title="Contact"> <div data-role="header"> <h1>Kontakt</h1> </div> <div data-role="content"> Kontakt Infos... </div> <script type="text/javascript"> /* Seitenspezifisches JavaScript */ </script> </div> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 29
  • 30. SEITENTITEL 1. Wenn ein Wert für data-title existiert, wird dieser für den Titel der internen Seite verwendet. 2. Wenn kein Wert für data-title existiert, wird der Header (data- role="header") verwendet. 3. Existiert weder ein Wert für data-title noch ein Header, wird das <title> Element innerhalb des <head> Elements auf der Seite verwendet. (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 30
  • 31. VERLINKUNG • Wenn man auf HTML-Dokumente verlinkt, die ebenfalls eine Seitenstruktur über data-role="page" beinhalten, wird diese wie eine interne Seite behandelt • Enthält das externe Dokument allerdings mehrere HTML-Seiten, so muss bei Link das Attribut rel="external" oder target="_blank" verwendet werden • Das führt 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) • Zusätzlich ist es nicht möglich, Anker im klassischen Sinn zu verwenden, da diese als Sprungmarken für interne Seite dienen. (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 31
  • 32. NAVIGATIONEN Links Links Links :-) (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 32
  • 33. 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 zurückzukommen (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 33
  • 34. INTERNE LINKS (#ID) Quelle Grafik: jQuery Mobile - Up and running Maximiliano Firtman O‘Reilly ISBN: 978-1-449-39765-4 (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 34
  • 35. EXTERNER JQM REQUEST jQuery Mobile Page Request Hijax-Request Web Server Append to DOM Hijax-Response Enhance Page Transition Hijax: http://en.wikipedia.org/wiki/Hijax (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 35
  • 36. 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 hierfür 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 (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 36
  • 37. EXTERNE JQM REQUEST 1. jQuery Mobile parst das Attribut href lädt die Zielseite mittels eines Ajax- Requests (Hijax). 2. Wenn die Seite erfolgreich geladen wurde, wird sie in das DOM eingehängt 3. 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 führt 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 gleichermaßen nach links raus). 5. Anschließend bekommt die aktive Seite die Klasse ui-page-active zugewiesen 6. Schließlich wir die URL angepasst, sodaß ein Bookmark gesetzt werden kann (pushState Feature von HTML5) 7. Schlägt das Laden fehl, wird ein „Error Loading Page“ Overlay gezeigt (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 37
  • 38. TRANSITIONS (ÜBERGÄNGE) 1. jQuery Mobile verfügt über 9 eingebaute Transitions: 1. fade (Ausblenden/Einbleden) 2. pop (Vergrößern/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. (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 38
  • 39. DIALOGE VS. SEITEN 1. Dialoge sind Seiten mit einem abgeänderten UI 2. Die Seite wird auf dem Hintergrund platziert, mit abgerundeten Ecken dargestellt und mit einem Schließen-Button links oben versehen 3. Eingeleitet wird ein Dialog mit dem Attribut <a href="#terms" data-rel="dialog" data-transition="slidedown">AGB</a> 4. Oder aber bei der Definition der Seite selbst <div data-role="dialog" id="terms"> AGB </a> 5. Dialoge können nicht gebookmarkt werden und tauchen nicht in der History auf. 6. Dialoge können per API geschlossen werden function processAgreement(){ // Dialog schließen $('.ui-dialog').dialog('close'); } (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 39
  • 40. ACTION SHEETS 1. Action Sheets sind Dialoge die von oben animiert hereinfahren 2. Auf diesen wird meist eine User-Interaktion eingefordert 3. Technisch gesehen sind dies Dialoge, denen Header und Footer fehlt 4. Code: <div data-role="page" id="home"> <!-- Öffnen der Seite als Dialog --> <a href="#logout" data-transition="slidedown"> Logout</a> </div> <!-- Action-Sheet durch weglassen des Headers! --> <div data-role="dialog" id="logout"> <div data-role="content"> <span class="title">LOGOUT: Sicher?</span> <a href="#home" data-role="button" data-theme="b">Yepp!</a> <a href="#" data-role="button" data-theme="c" data-rel="back">Niemals!</ a> </div> <style> span.title { display:block; text-align:center; margin-top:10px; margin-bottom:20px; } </style> </div> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 40
  • 41. 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 abschließender Slash angeben werden => href="/clients/" . • Das target-Attribut darf nicht angegeben werden • Alle anderen Fälle führen zu einem „normalen“ Laden der Seite • Vorab laden von Seiten über das Attribut data-prefetch <a href='neueseite' data-prefetch>Lade Seite vorab</a> • DOM-Caching (erzeugtes DOM der Seite wird gecached): <div data-role="page" data-dom-cache="true"> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 41
  • 42. EXTERNE ABSOLUTE LINKS • Externe absolute Links werden wie folgt erzeugt: • Zufügen des Attributs: data-rel="external" <a href="http://www.typovision.de" data-rel="external">typovison</a> • Zufügen eines target Attributs <a href="http://www.typovision.de" target="_blank">typovison</a> • Verweisen auf eine andere Domain <a href="http://www.anderedomain.de">typovison</a> • Verwenden des Attributs: data-ajax="false" <a href="http://www.typovision.de" data-ajax="false">typovison</a> Dieses Attribut kann auch auf die Seite selbst angewendet werden (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 42
  • 43. MOBILE SPEZIAL-LINKS • Es gibt einige spezielle Links: • Starten der Telefon-App <a href="tel:+498945205930">Rufen Sie uns an!</a> • Facetime (nur auf iOS) <a href="facetime:101010">Rufen Sie uns über Facetime an</a> • Skype (nur wenn vorhanden) <a href="skype:skype_user?call">Rufen Sie uns über Skype an</a> • Email <a href="mailto:info@typovision.de?subject=Kontakt&body=Das %20ist%20der%20Inhalt">Schreiben Sie uns!</a> • SMS <a href="sms://+49151547266?body=SMS%20Text">Schreiben Sie uns eine SMS</a> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 43
  • 44. TOOLBARS Header & Footer Toolsbars (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 44
  • 45. HEADER BAR • Normale Header Toolbar: <div data-role="header"> <h1>Seitentitel</h1> </div> • Fixieren der Toolbar mittels: <div data-role="header" data-position="fixed"> • Fullscreen-Mode mittels: <div data-role="page" data-fullscreen="true"> (Toolbars sind verschwunden und tauchen erst bei Touch wieder auf - gut für großflächige Seiten wie Galerien oder ähnlichem) • Die Header Bar hat keinen Backbutton per Default, man muss diesen einschalten (siehe später) (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 45
  • 46. HEADER BAR - TITLE • Auf den Header/Footer wird das CSS-Attribut text-overflow: ellipsis gelegt um den Titel abzuschneiden und mit ... aufzufüllen: <div data-role="header"> <h1>Ziemlich langer Titel</h1> </div> • Dies kann über folgendes CSS verhindert werden: .ui-header .ui-title, .ui-footer .ui-title { margin-right: 0 !important; margin-left: 0 !important; } (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 46
  • 47. 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 unterstützt dafür 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 ausschließlich im Content-Bereich zoomen, so kann man dies mittels touchOverflowZoomEnabled einschalten. (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 47
  • 48. HEADER TOOLBAR - BUTTONS • Toolbar mit einem Button: <div data-role="header"> <a href="logout">Log out</a> <h1>Title</h1> </div> • Toolbar mit zwei Buttons: <div data-role="header"> <a href="logout">Log out</a> <h1>Title</h1> <a href="settings" data-icon="gear" data- theme="b">Settings</a> </div> • Will man den Button rechts positionieren, kann man class="ui-btn-right" verwenden (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 48
  • 49. HEADER TOOLBAR - BUTTONS • Button ohne Text: <div data-role="header"> <h1>Header</h1> <a href="#" data-icon="plus" data- iconpos="notext" data-theme="b"></a> </div> • 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 (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 49
  • 50. BACK-BUTTON • Zufügen eine Back-Buttons über folgenden Code: • <div data-role="page" data-add-back-btn="true" data-back-btn-text="Previous" data-back-btn-theme="e"> 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"; }); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 50
  • 51. TOOLBARS - SEGMENTED • Segmentierte Toolbar: <div data-role="header" data-theme="b" data-position="fixed"> <h1>Filme</h1> <div class="segmented-control ui-bar-d"> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" class="ui-control-active">Im Kino</a> <a href="#" data-role="button" class="ui-control-inactive">In Kürze</a> <a href="#" data-role="button" class="ui-control-inactive">Top-Filme</a> </div> </div> </div> <style> .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; } </style> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 51
  • 52. TOOLBARS - UI-BAR • Toolbar mit einer „UI-Bar“: <div data-role="footer" class="ui-bar"> <a href="refresh">Refresh</a> <a href="filter">Filter</a> <a href="search">Search</a> <a href="add" data-theme="b">New Item</a> </div> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 52
  • 53. TOOLBARS - NAVBAR • Toolbar mit einer „UI-Bar“: <div data-role="header" data-position="fixed"> <h1>Home</h1> <div data-role="navbar"> <ul> <li><a href="#index" data-icon="home">Home</a> <li><a href="#contacts" data- icon="search">Kontakt</a> <li><a href="#events" data-icon="info">Events</a> <li><a href="#news" data-icon="grid">News</a> </ul> </div> </div> • Für Icon-Only einfach Text weglassen (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 53
  • 54. ICONS • Übersicht über die verfügbaren Icons: http://jquerymobile.com/ test/docs/buttons/buttons-icons.html (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 54
  • 55. TOOLBARS - AKTIVER BUTTON • Aktiver Button mittels: <div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#index" class="ui-btn- active">Home</a> <li><a href="#contacts">Contacts</a> <li><a href="#events">Events</a> <li><a href="#news">News</a> </ul> </div> </div> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 55
  • 56. 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 Tab Bar --> <div data-role="footer" class="tabbar" data-id="main-tabbar" data- position="fixed"> <div data-role="navbar" class="tabbar"> <ul> <li><a href="tabbar-movies.html" class="ui-btn-active ui-state- persist">Kino</a></li> <li><a href="tabbar-theatres.html">Theater</a></li> </ul> </div> </div> <!-- Theatres tab bar --> <div data-role="footer" class="tabbar" data-id="main-tabbar" data- position="fixed"> <div data-role="navbar" class="tabbar"> <ul> <li><a href="tabbar-movies.html">Kino</a></li> <li><a href="tabbar-theatres.html" class="ui-btn-active ui-state-persist">Theater</a></li> </ul> </div> </div> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 56
  • 57. TOOLBARS - CUSTOM ICONS • Verwendung von eigenen Icons (beispielsweise von http:// glyphish.com/) <div data-role="footer" class="ui-navbar-custom" data-position="fixed"> <div data-role="navbar" class="ui-navbar-custom"> <ul> <li><a href="#" id="home" data-icon="custom" data-theme="d">Home</a></ li> <li><a href="#" id="movies" data-icon="custom" class="ui-btn- active">Kino</a></li> <li><a href="#" id="theatres" data-icon="custom" data- theme="d">Theater</a></li> </ul> </div> </div> <style> .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; } ... (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 57
  • 58. BUTTONS Klick & Action (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 58
  • 59. BUTTONS - ARTEN • Mögliche Arten: <a href="#" data-role="button">Klick mich!</a> <button data-theme="b">Klick mich auch!</button> <input type="button" value="Und mich erst recht!"> • Inline Buttons über: <a href="#" data-role="button" data-inline="true">B1</a> • Icon-Buttons über: <a href="" data-role="button" data-icon="plus" data-iconpos="notext"></a> <button data-icon="search" data-iconpos="notext">Search</button> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 59
  • 60. 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"; }); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 60
  • 61. BUTTON-ICONS • ICONS: http://jquerymobile.com/test/docs/buttons/buttons-icons.html • Eigene ICONS: data-icon="myapp-tweet" <style> .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; } } </style> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 61
  • 62. ICON-POSITIONIERUNG • Positionierungen: <a href="#" data-role="button" data-icon="help" data- iconpos="right">Help</a> <a href="#" data-role="button" data-icon="help" data- iconpos="left">Help</a> <div data-role="controlgroup"> <a href="#" data-role="button" data-icon="help" data-iconpos="bottom">Help</a> <a href="#" data-role="button" data-icon="help" data-iconpos="top">Help</a> </div> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 62
  • 63. BUTTONS - GRUPPIERUNG • Button-Gruppierung: <div data-role="controlgroup"> <a href="#" data- role="button">Button 1</a> <a href="#" data- role="button">Button 2</a> <a href="#" data- role="button">Button 2</a> </div> • Button-Gruppierung horizontal: <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data- inline="true">Button 1</a> <a href="#" data-role="button" data- inline="true">Button 2</a> <a href="#" data-role="button" data- inline="true">Button 2</a> </div> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 63
  • 64. BUTTONS - EFFEKTE • Button-Effekte: <a href="#" data-role="button" data-shadow="false" data- corners="false">Help</a> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 64
  • 65. FORMULARE Interaktion (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 65
  • 66. FORMULARE - GRUNDLAGEN • <form action="send.php" action="get" data-transition="pop"> <label for="email">Email:</label> <input type="email" name="email" id="email" value="" /> <button type="submit" name="submit">Submit</button> </form> • Animation beim Wegschicken über data-transition="pop" • Ohne AJAX über data-ajax="false" oder target="_blank" (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 66
  • 67. FORMULARE - FIELDCONTAINER • <form action="send.php" action="get" data- transition="pop"> <div data-role="fieldcontainer"> <label for="company">Company Name:</label> <input type="text" id="company" name="company"> </div> <div data-role="fieldcontainer"> <label for="email">Email:</label> <input type="email" id="email" name="email"> </div> </form> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 67
  • 68. FORMULARE - FELDER • Mögliche Feld-Arten: <input type="text"> <input type="password"> <input type="email"> <input type="tel"> <input type="url"> <input type="search"> <input type="number"> <textarea> • Unterstützung siehe http://www.quirksmode.org/html5/inputs_mobile.html (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 68
  • 69. FORMULARE - FELDER • date: Datum Tag, Monat, Jahr datetime: Tag, Monat, Jahr, Stunde, Minute time: Stunde, Minute datetime-local: Datum ohne Zeit-Information month: Monats-Selektor week: Wochen-Selektor <div data-role="field container"> <label for="birth">Your Birthdate:</label> <input type="date" id="birth" name="birth"> <label for="favmonth">Your favorite month:</label> <input type="month" id="favmonth" name="favmonth"> </div> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 69
  • 70. FORMULARE - SELECT 1/2 • Select-Elemente (Mehrfachauswahl mit multiple) <label for="delivery">Technologie:</label> <select name="delivery" id="delivery" multiple="multiple"> <optgroup label="TYPO3"> <option value="extbase">Extbase</option> <option value="pi">pi_base</option> </optgroup> <optgroup label="JavaScript"> <option value="jq">jQuery</option> <option value="jqm">jQuery Mobile</option> <option value="jqui">jQuery UI</option> </optgroup> <optgroup label="HTML5"> <option value="offline">Offline Storage</option> <option value="markup">Markup</option> </optgroup> </select> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 70
  • 71. FORMULARE - SELECT 2/2 • Select-Elemente mit eigener ( jQuery Mobile) UI <label for="genre">Technologie:</label> <select name="genre" id="genre" data-native-menu="false" multiple="multiple"> <option value="">Wählen Sie aus...</option> <option value="action">TYPO3</option> <option value="comedy">FLOW3</option> <option value="drama">jQuery</option> </select> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 71
  • 72. FORMULARE - CHECKBOXEN • Radio-Buttons (name-Attribut muss gleich sein) <fieldset data-role="controlgroup"> <legend>Technologie:</legend> <input type="radio" name="tech" id="tech1" value="TYPO3" checked="checked" /> <label for="tech1" data-theme="b">TYPO3</label> <input type="radio" name="tech" id="tech2" value="FLOW3" /> <label for="tech2" data-theme="b">FLOW3</label> <input type="radio" name="tech" id="tech3" value="jQuery" /> <label for="tech3" data-theme="b">jQuery</label> </fieldset> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>Technologie:</legend> <input type="radio" name="tech" id="tech1" value="TYPO3" checked="checked" /> <label for="tech1">TYPO3</label> <input type="radio" name="tech" id="tech2" value="FLOW3" /> <label for="tech2">FLOW3</label> <input type="radio" name="tech" id="tech3" value="jQuery" /> <label for="tech3">jQuery</label> </fieldset> Wichtig, damit horizontale Radiobuttons nicht umbrechen <style> .ui-controlgroup-horizontal .ui-radio label { font-size: 13px !important; } </style> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 72
  • 73. FORMULARE - CHECKBOXEN • Checkboxen (name-Attribut muss gleich sein) <fieldset data-role="controlgroup"> <legend>Technologie:</legend> <input type="checkbox" name="tech" id="tech1" value="TYPO3" checked="checked" /> <label for="tech1" data-theme="b">TYPO3</label> <input type="checkbox" name="tech" id="tech2" value="FLOW3" /> <label for="tech2" data-theme="b">FLOW3</label> <input type="checkbox" name="tech" id="tech3" value="jQuery" /> <label for="tech3" data-theme="b">jQuery</label> </fieldset> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>Technologie:</legend> <input type="checkbox" name="tech" id="tech1" value="TYPO3" checked="checked" /> <label for="tech1">TYPO3</label> <input type="checkbox" name="tech" id="tech2" value="FLOW3" /> <label for="tech2">FLOW3</label> <input type="checkbox" name="tech" id="tech3" value="jQuery" /> <label for="tech3">jQuery</label> </fieldset> Wichtig, damit horizontale Checkboxen nicht umbrechen <style> .ui-controlgroup-horizontal .ui-checbox label { font-size: 12px !important; } </style> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 73
  • 74. FORMULARE - SLIDER • <div data-role="fieldcontainer"> <label for="qty">Menge:</label> <input type="range" id="qty" name="qty" min="1" max="100" value="5" data-theme="e" data-track-theme="b"> </div> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 74
  • 75. FORMULARE - SWITCH • <label for="alerts">jQuery:</label> <select name="slider" id="alerts" data-role="slider"> <option value="off">Aus</option> <option value="on">An</option> </select> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 75
  • 76. LISTEN Paradigmen (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 76
  • 77. NORMALE LISTEN • Normale Listen: <ul data-role="listview"> <li>Offline Access</li> <li>Geolocation API</li> <li>Canvas</li> <li>Offline Storage</li> <li>New semantic tags</li> </ul> data-inset="true" (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 77
  • 78. TRENNER • Trenner: <div data-role="content"> <ul data-role="listview"> <li data-role="list-divider">Group A</li> <li>Argentina</li> ... <li data-role="list-divider">Group B</li> <li>United States</li> ... <li data-role="list-divider">Group C <li>Germany</li> ... </ul> </div> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 78
  • 79. INTERAKTIVE LISTEN • Interakive Listen: <div data-role="content"> <ul data-role="listview"> <li><a href="#page2">Interner Link</a> <li><a href="other.html">Externer Link</a> <li><a href="http://www.typovision.de">Absoluter externer Link</a> <li><a href="tel:+13051010200">Telefon</a> <li><a href="javascript:alert('Hi!')">JavaScript link</ a> </ul> </div> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 79
  • 80. LISTEN-AUSZEICHNUNG • Listen-Auszeichnungen: <ul data-role="listview"> <li data-role="list-divider" data-divider-theme="a"> Sonntag <p class="ui-li-aside">20.Mai 2012</p> </li> <li> <a href="#">18 Uhr <span class="ui-li-aside">Meeting</span> </a> </li> <li data-role="list-divider" data-divider-theme="a"> Sonntag <p class="ui-li-aside">20.Mai 2012</p> </li> <li> <a href="#">Mails <span class="ui-li-count">123</span></a> </li> </ul> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 80
  • 81. LISTEN DARSTELLUNG • Listen-Darstellung mit Thumbnails: <ul data-role="listview"> <li> <a href="movies/kung-fu-panda.html"> <img src="images/kungfupanda2.jpg" /> <h3>Kung Fu Panda</h3> <p>Rated: PG</p> <p>Runtime: 95 min.</p> </a> </li> ... </ul> • Um Icons mit der Größe 16x16 Pixel zu verwenden kann man eine Klasse verwenden: <img src="images/kungfupanda2.jpg" class="ui-li-icon" /> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 81
  • 82. LISTEN - SPLIT BUTTONS • Listen-Darstellung mit Split-Buttons: <ul data-role="listview" data-split-icon="star" data-split-theme="d"> <li> <a href="movies/kung-fu-panda.html"> <img src="images/kungfupanda2.jpg" /> <h3>Kung Fu Panda</h3> <p>Rated: PG</p> <p>Runtime: 95 min.</p> </a> <a href="tickets.html">Tickets kaufen</a> </li> </ul> • Eignet sich sehr gut um zwei verschiedene Aktionen (Links) zu unterstützen (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 82
  • 83. NUMERISCHE LISTEN • Numerische Listen mittel <ol>-Tag: <ol data-role="listview"> <li><a href="#TYPO3">TYPO3</a></li> <li><a href="#FLOW3">FLOW3</a></li> <li><a href="#jQuery">jQuery</a></li> <li><a href="#jQueryMobile">jQuery Mobile</a></li> </ol> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 83
  • 84. LISTEN FILTERN • Filtern von Listen <ul data-role="listview" data-filter="true" data-filter-placeholder="Suche…"> <li><a href="#TYPO3">TYPO3</a></li> <li><a href="#FLOW3">FLOW3</a></li> <li><a href="#jQuery">jQuery</a> </li> <li><a href="#jQueryMobile"> jQuery Mobile</a></li> </ul> • Suchen in Meta-Daten (findet auch AAPL z.B.) <li data-filtertext="NASDAQ:AAPL Apple Inc."><a href="#">Apple</a></li> <li data-filtertext="USA U.S.A. United States of America"><a href="#">United States</a></li> • Der Platzhalter-Text kann auch global gesetzt werden: $(document).bind('mobileinit',function(){ $.mobile.listview.prototype.options.filterPlaceholder="Suche..."; }); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 84
  • 85. VERSCHACHTELTE LISTEN • Verschachtelte Listen <ul data-role="listview"> <li><a href="#TYPO3">TYPO3</a> <ul data-role="listview"> <li><a href="#TCA">TCA</a></li> <li><a href="#TCE">TCE</a></li> <li><a href="#TypoScript"> TypoScript</a></li> </ul> </li> <li><a href="#FLOW3">FLOW3</a></li> <li><a href="#jQuery">jQuery</a></li> </ul> • Verschachtelte Listen werden automatisch zugeklappt angezeigt. Ein Klick auf eines der Elemente sorgt dafür, dass mittels eine Slide-Animation die Unterliste angezeigt wird. (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 85
  • 86. CONTENT Inhalte und deren Auszeichnung (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 86
  • 87. GRID-CONTENT • Spalten und Zeilen (gleichmäßige Aufteilung): <section class="ui-grid-b"> <!-- Zeile 1 --> <div class="ui-block-a">Zelle 1.1</div> <div class="ui-block-b">Zelle 1.2</div> <div class="ui-block-c">Zelle 1.3</div> <!-- Zeile 2 --> <div class="ui-block-a">Zelle 2.1</div> <div class="ui-block-b">Zelle 2.2</div <div class="ui-block-c">Zelle 2.3</div> </section> • ui-grid-a für 2spaltig ui-grid-b für 3spaltig ui-grid-c für 4spaltig ui-grid-d für 5spaltig • grid-block-a bis grid-block-e für Spalte 1 bis 5 (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 87
  • 88. AUFKLAPP-CONTENT • Aufklapp-Content: <div data-role="content"> <div data-role="collapsible"> <h2>Überschrift1</h2> <p>INHALT1</p> </div> <div data-role="collapsible" data-collapsed="true"> <h2>Überschrift2</h2> <p>INHALT2</p> </div> </div> • Kann beliebig verschachtelt werden DIV > DIV > H2 > DIV > H3 > p • Styling durch: data-theme data-content-theme (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 88
  • 89. AUFKLAPP-CONTENT + EMOJI • Aufklapp-Content mit EMOJI-Icons (nur iOS): <div data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="b"> <h3>Wireless</h3> <ul data-role="listview" data-inset="true"> <li><a href="#">&#xe117; Notifications</a></li> <li><a href="#">&#xe01d; Location Services</a></li> </ul> </div> <div data-role="collapsible" data-theme="a" data-content-theme="b"> <h3>Applications</h3> <ul data-role="listview" data-inset="true"> <li><a href="#">&#xe001; Faceoff</a></li> <li><a href="#">&#xe428; LinkedOut</a></li> <li><a href="#">&#xe03d; Netflicks</a></li> </ul> </div> • http://www.iphone-ticker.de/ios-5-alle-emoji-symbole-auf-einen-blick-22663/ (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 89
  • 90. AKKORDION - COLLAPSIBLE SET • Akkordion-Funktion (nur ein ausgeklappter Container zur gleichen Zeit): <div data-role="collapsible-set" data-theme="a" data-content-theme="b"> <div data-role="collapsible" data-collapsed="true"> <h3>Wireless</h3> <ul data-role="listview" data-inset="true"> <li><a href="#">&#xe117; Notifications </a></li> <li><a href="#">&#xe01d; Location Services </a></li> </ul> </div> <div data-role="collapsible"> <h3>Applications</h3> <ul data-role="listview" data-inset="true"> <li><a href="#">&#xe001; Faceoff</a></li> <li><a href="#">&#xe428; LinkedOut</a></li> <li><a href="#">&#xe03d; Netflicks</a></li> </ul> </div> </div> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 90
  • 91. THEME-ROLLER Custom Designs (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 91
  • 92. EIGENE SKRIPTE http://jquerymobile.com/themeroller/ (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 92
  • 93. THEME ROLLER • Mit dem Theme Roller ist es möglich ein individuelles Theme zu erstellen, dieses runterzuladen und dann zu verwenden • Es ist damit möglich alle Elemente individuell zu gestalten • In the „Global“-Settings können globale Einstellungen getroffen werden, die in allen Swatches gelten sollen (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 93
  • 94. THEME ROLLER • Es können beliebig viele Swatches hinzugefügt werden • Man kann entweder den eingebauten Farbwähler (mit Brightness- und Saturation-Funktion) verwenden oder Adobe Kuler (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 94
  • 95. THEME ROLLER • Man kann ein „altes“ Theme importieren und umwandeln lassen in ein Theme der Version 1.1.0 • Das fertig Theme kann anschließend heruntergeladen werden • Oder man teilt das Theme mit anderen Leuten über einen eindeutigen Link (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 95
  • 96. JAVASCRIPT Und das Framework (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 96
  • 97. EIGENE SKRIPTE • <script src="http://code.jquery.com/ jquery-1.6.4.min.js"></script> <script> $(document).bind("mobileinit", function() { // Eigener Code hier }); </script> <script src="http://code.jquery.com/mobile/1.0/ jquery.mobile-1.0.min.js"></script> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 97
  • 98. Quelle Grafik: Pro jQuery Mobile Brad Broulik EVENTS 1/12 Apress ISBN: 978-1430239666 • Um Events nachzuvollziehen, kann man einen Event Logger als Bookmarklet verwenden: http://code.jquery.com/mobile/latest/ demos/tools/log-page-events.html • mobileinit Wenn jQuery Mobile initialisiert wird, wird ein mobileinit Event auf das document Objekt getriggert (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 98
  • 99. Quelle Grafik: Pro jQuery Mobile Brad Broulik EVENTS 2/12 Apress ISBN: 978-1430239666 • pagebeforechange Dies ist der erste Event der während einem 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(); }); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 99
  • 100. Quelle Grafik: Pro jQuery Mobile Brad Broulik EVENTS 3/12 Apress ISBN: 978-1430239666 • pagebeforeload Dies ist der erste Event der während dem Laden der Seite getriggert wird. $( document ).bind( "pagebeforeload", function( e, data ){ console.log("Laden der Seite startet…"); // Manuelles Laden triggern e.preventDefault(); // Seite laden + Einfügen 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 ); } }); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 100
  • 101. Quelle Grafik: Pro jQuery Mobile Brad Broulik EVENTS 4/12 Apress ISBN: 978-1430239666 • pagebeforecreate Dieser Event tritt auf, nachdem der Seiten-Container zum DOM hinzugefügt 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" ); }); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 101
  • 102. Quelle Grafik: Pro jQuery Mobile Brad Broulik EVENTS 5/12 Apress ISBN: 978-1430239666 • pagecreate Hier 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(); }); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 102
  • 103. Quelle Grafik: Pro jQuery Mobile Brad Broulik EVENTS 6/12 Apress ISBN: 978-1430239666 • pageinit Event 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... "); ... }); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 103
  • 104. Quelle Grafik: Pro jQuery Mobile Brad Broulik EVENTS 7/12 Apress ISBN: 978-1430239666 • pageload Event nachdem die Seite erfolgreich ins DOM geladen wurde. $( document ).bind( "pageload", function( e, data ){ console.log("Seite wurde erfolgreich ins DOM geladen..."); }); • pageloadfailed Wird aufgerufen, wenn das Laden fehl schlägt. (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 104
  • 105. Quelle Grafik: Pro jQuery Mobile Brad Broulik EVENTS 8/12 Apress ISBN: 978-1430239666 • pagebeforehide Wird 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 Seitenübergang startet jetzt..." ); }); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 105
  • 106. Quelle Grafik: Pro jQuery Mobile Brad Broulik EVENTS 9/12 Apress ISBN: 978-1430239666 • pagebeforeshow Wird auf der Seite getriggert zu der die Animation führen soll. Wird nur abgefeuert, wenn der Seitenwechsel eine dedizierte „zu“ Seite besitzt. $( "#from-page- id" ).live( "pagebeforeshow", function( e, data ){ console.log( "Der Seitenübergang startet jetzt..." ); }); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 106
  • 107. Quelle Grafik: Pro jQuery Mobile Brad Broulik EVENTS 10/12 Apress ISBN: 978-1430239666 • pagehide Wird 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 Seitenübergang ist fertig..." ); }); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 107
  • 108. Quelle Grafik: Pro jQuery Mobile Brad Broulik EVENTS 11/12 Apress ISBN: 978-1430239666 • pageshow Wird auf der Seite getriggert zu der die Animation führen soll und die nun sichtbar ist. $( "#from-page-id" ).live( "pageshow", function( e, data ){ console.log( "Der Seitenübergang ist fertig..." ); }); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 108
  • 109. Quelle Grafik: Pro jQuery Mobile Brad Broulik EVENTS 12/12 Apress ISBN: 978-1430239666 • pagechange Letzter Event eines Seitenwechsels. $( document ).bind( "pagechange", function( e, data ){ console.log(“Change page successfully completed...”); var toPage = data.toPage; var options = data.options; }); • pagechangefailed Wird getriggert, falls der Seitenwechsel fehl schlägt. (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 109
  • 110. WIDGETS • Zugriff auf das jQuery Mobile Objekt: $.mobile. bzw. jQuery.mobile • Mögliche Widgets page dialog $.mobile.<widget_name>.prototype. collapsible $.mobile.<widget_name>.prototype.options. fieldcontain navbar $.mobile.page.prototype.options listview checkboxradio gültig für button slider Instanzen: data-role="page" textinput selectmenu controlgroup (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 110
  • 111. DEFAULT CONFIGURATION • Ändern von Default-Werten: $(document).bind("mobileinit", function() { $.mobile.pushStateEnabled = true; $.mobile.loadingMessage = "Lädt..."; $.mobile.pageLoadErrorMessage = "Fehler!"; $.mobile.defaultPageTransition = "fade"; $.mobile.minScrollBack = 150; $.mobile.activeBtnClass = "active-button"; $.mobile.ajaxEnabled = false; $.mobile.allowCrossDomainPages = true; // resultiert in <div data-typovision-role="page"> $.mobile.ns = "typovision"; ... }); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 111
  • 112. DATA UTILITIES • Zugriff auf die Data-Attribute var buttons = $("a[data-role=button"]); var buttons = $("a:jqmData(role='button')"); $("a").jqmRemoveData("transition"); // statt removedata $("#button1").jqmData("theme", "a"); // statt data (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 112
  • 113. PAGE UTILITIES • Seiten-Funktionen // activePage ist das <div> var currentPageId = $.mobile.activePage.id; // pageContainer ist das <body> $.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 }); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 113
  • 114. 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: Vorwärts=false, Rückwärts=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 enthält (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 114
  • 115. 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 während des Ladens • fromHashChange (boolean, default: false) Zeigt an, dass die Funktion aus einem hashchange Event aufgerufen wurde (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 115
  • 116. CHANGEPAGE - BEISPIEL 1/2 • Beispiel 1 <script> function viewProduct(idProduct) { $.mobile.changePage("productdetail.php", { method: "post", data: { action: 'getProduct',‘ id: idProduct }, transition: "fade" }); } </script> <!-- ... --> <a href="javascript:viewProduct(5200)" data- role="button">Produkt-Details</a> (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 116
  • 117. CHANGEPAGE - BEISPIEL 2/2 • Beispiel 2 /* Erstellung und Öffnen einer neuer Seite */ // Erstellung des Markups var newPage = $("<div data-role=page data-url=hi><div data-role=header><h1>Neuer Header</h1></div><div data- role=content>Neuer Inhalt!</div></div>"); // Füge die Seite zum Seitencontainer hinzu newPage.appendTo( $.mobile.pageContainer ); // Übergang zur neuen Seite einleiten $.mobile.changePage( newPage ); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 117
  • 118. DYNAMISCHE BUTTONS 1/4 • Grundstruktur des Markups <div data-role="page" data-theme="b"> <div data-role="header"> <h1>Dynamische Buttons</h1> </div> <div data-role="content"> <a href="#" data-role="button" id="create-button1">Erzeuge Button1</a> • Button ans Ende zufügen $( "#create-button1" ).bind( "click", function() { $( '<a href="http://jquerymobile.com" id="button1" data-role="button" data-icon="star" data-inline="true" data-theme="a">Button1</a>' ) .appendTo( ".ui-content" ) .button(); }); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 118
  • 119. DYNAMISCHE BUTTONS 2/4 • Button nach dem Klick-Button zufügen $( "#create-button2" ).bind( "click", function() { $( '<a href="http://jquerymobile.com" id="button2">Button2</a>' ) .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]); } } }) }); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 119
  • 120. DYNAMISCHE BUTTONS 3/4 • Input-Type Button zufügen und konfigurieren $( "#create-button5" ).bind( "click", function() { $( '<input type="submit" id="button5" value="Button5" data-theme="a" / >' ) .insertAfter( "#create-button5" ) .button(); }); $( "#create-button6" ).bind( "click", function() { $( '<input type="submit" id="button6" value="Button6" />' ) .insertAfter( "#create-button6" ) .button({ 'icon': "home", 'inline': true, 'shadow': true, 'theme': 'a' }) }); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 120
  • 121. DYNAMISCHE BUTTONS 4/4 • Mehrere Buttons zufügen sowie Aktivierung/Deaktivierung $( "#create-multiple-buttons" ).bind( "click", function() { $( '<button id="button3" data-theme="a">Button3</ button>' ).insertAfter( "#create-multiple-buttons" ); $( '<button id="button4" data-theme="a">Button4</ button>' ).insertAfter( "#button3" ); $.mobile.pageContainer.trigger( "create" ); }); $( "#disable-button3" ).bind( "click", function() { $( "#button3" ).button( "disable" ); }); $( "#enable-button3" ).bind( "click", function() { $( "#button3" ).button( "enable" ); }); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 121
  • 122. DYNAMISCHER TEXTINPUT • Input-Felder dynamisch hinzufügen sowie De-/Aktivierung • $( '<input type="text" name="text1" value="" data-theme="c" />' ) .insertAfter( "#firstName" ) .textinput(); $( '<input type="text" name="text2" id="text2" value="" />' ) .insertAfter( "#text1" ) .textinput({ theme: 'c' }); $( "#text1" ).textinput( "disable" ); $( "#text1" ).textinput( "enable" ); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 122
  • 123. DYNAMISCHE SELECTS • Selectmenüs erzeugen • $( '<select name="select1" id="select1" data-theme="e">...</select>' ) .insertAfter( "#foo" ) .selectmenu(); $( '<select name="select2" id="select2">...</select>' ) .insertAfter( "#select1" ) .selectmenu({ theme: "e", overlayTheme: "c", disabled: false, nativeMenu: false }); $( "#select1" ).selectmenu( "disable" ); $( "#select1" ).selectmenu( "enable" ); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 123
  • 124. DYNAMISCHE RADIOBUTTONS • Radiobuttons erzeugen • $( '<fieldset data-role="controlgroup"> <legend>Map view:</legend> <input type="radio" name="map" id="map1" value="Map" /> <label for="map1" data-theme="c">Map</label>...</fieldset>') .insertAfter( "#radio1" ); $.mobile.pageContainer.trigger( "create" ); $( '<fieldset data-role="controlgroup"> <legend>Map view:</legend> <input type="radio" name="map" id="map1" value="Map" /> <label for="map1">Map</label>...</fieldset>' ) .insertAfter( "#radio1" ); $( "#map1" ).checkboxradio({ theme: "e" }); $( "#map2" ).checkboxradio({ theme: "e" }); $.mobile.pageContainer.trigger( "create" ); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 124
  • 125. DYNAMISCHE CHECKBOXEN • Checkboxen erzeugen • $( '<fieldset data-role="controlgroup"> <legend>Genre:</legend> <input type="checkbox" name="genre" id="c1" /> <label for="c1" data-theme="c">Action</label>...</fieldset>' ) .insertAfter( "#element1" ); $.mobile.pageContainer.trigger( "create" ); $( '<fieldset data-role="controlgroup"> <legend>Genre:</legend> <input type="checkbox" name="genre" id="c3" /> <label for="c3">Action</label>...</fieldset>' ) .insertAfter( "#create-cb2" ); $( '#c3' ).checkboxradio({ theme: "e" }); $( '#c4' ).checkboxradio({ theme: "e" }); $.mobile.pageContainer.trigger( "create" ); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 125
  • 126. DYNAMISCHE SLIDER • Slider erzeugen • $( '<label for="s1">Brightness:</label> <input type="range" name="s1" id="s1" min="0" max="9" data-theme="d"/>') .insertAfter( "#element1" ); $( "#s1" ).slider(); • $( '<label for="s1">Brightness:</label> <input type="range" name="s1" id="s1" min="0" max="10" />' ) .insertAfter( "#create-s2" ); $( "#s1" ).slider({ theme: "d", trackTheme: "a", disabled: false }); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 126
  • 127. DYNAMISCHE SWITCHES • Switch erzeugen • $( '<select name="switch1" data-role="slider" data-theme="c"></select>' ) .insertAfter( “#foo” ) .slider(); $( '<select name="switch2" id="switch2">...</select>' ) .insertAfter( “#switch1” ) .slider({ theme: "b", trackTheme: "c", disabled: false }); (c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 127