SlideShare ist ein Scribd-Unternehmen logo
1 von 200
Downloaden Sie, um offline zu lesen
jQuery Mobile 1.3
  Kompendium




              22.03.2013

Patrick Lobacher (GF typovision GmbH)
Einführung
In jQuery Mobile




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   2
jQuery Mobile 1.3 Kompendium
 Einführung - Das Mobile Web




          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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   3
jQuery Mobile 1.3 Kompendium
 Einführung - Mobile Lösungen




          Mobile Lösungen

                                                                                                                    Mobile Framework
               Kompatible Website                                   Optimierte Website

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



                        Web App                                          Hybride App                                      Native App

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




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013                                    4
jQuery Mobile 1.3 Kompendium
 Einführung - Mobile Frameworks




          Mobile Frameworks




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   5
jQuery Mobile 1.3 Kompendium
 Einführung - 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   6
jQuery Mobile 1.3 Kompendium
 Einführung - Progressive Enhancement?




          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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   7
jQuery Mobile 1.3 Kompendium
 Einführung - 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013              8
jQuery Mobile 1.3 Kompendium
 Einführung - jQuery Mobile Shortfacts




          jQuery Mobile Shortfact
             • Erfunden im Oktober 2010 vom Team rund um Jon Resig ( jQuery Team)
                 • John Resig, JavaScript Tool Entwickler für die Mozilla Corporation (@jeresig auf Twitter)
                 • Lizenz: MIT (Dual-Lizent: MIT & GPL bis 10.09.2012)
                 • Sprache: JavaScript + basiert auf jQuery
                 • Website: jquerymobile.com
                 • Aktuelle Version: 1.3.0 (20.02.2013)
                 • Größe: 24 KB
                     (Größe jQuery: 32 KB | Gesamt: 56 KB)

                 • Benötigt die jeweiligen JS-Dateien von: jQuery und jQuery Mobile sowie ein CSS




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   9
jQuery Mobile 1.3 Kompendium
 Einführung - jQuery Mobile Überblick




          jQuery Mobile Überblick
             • jQuery Mobile ist ein UI Framework welches auf jQuery bassiert
             • jQuery Mobile ist optimiert auf allen populären Smartphones, Tables, E-
                 Reader, und Desktop-Plattformen
             • Erstellt in Hinblick auf Zugänglichkeit und universellem Zugang
             • Das Projekt folgt den Paradigmen von „Progressive Enhancement“ und
                 “Responsive Web Design (RWD)“
             • Das Markup basiert dabei auf HTML5, was es einfach zum Erlernen macht
             • Über eine umfangreiche API kann das Verhalten von jQuery leicht manipuliert
                 werden




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   10
jQuery Mobile 1.3 Kompendium
 Einführung - jQuery Mobile Kompatibilität




          jQuery Mobile Kompatibilität




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   11
jQuery Mobile 1.3 Kompendium
 Einführung - jQuery Mobile Kompatibilität




          jQuery Mobile Kompatibilität




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   12
jQuery Mobile 1.3 Kompendium
 Einführung - HTML5/CSS3




          HTML5/CSS3
             • jQuery Mobile verwendet einige                                                  •
                                                                                               •
                                                                                                   Animations
                                                                                                   2D and 3D transformations
                 der HTML5/CSS3-Features direkt                                                •   Gradients and visual effects

                 und kann mit folgenden gut                                                    •   Viewport management (for zooming support
                                                                                                   inside the browser)
                 integriert werden:                                                            •   Webapp installation metadata
                                                                                               •   Integration with native applications
                                                                                               •   Multimedia support
                 •   Offline access
                                                                                               •   Graphic drawing (vector and bitmap)
                 •   Offline storage
                                                                                               •   Custom font support
                 •   Web sockets
                 •   Geolocation access
                 •   Accelerometer and gyroscope support




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013                            13
jQuery Mobile 1.3 Kompendium
 Einführung - Emulatoren




          Emulatoren
                 • Für Mac OS X gibt es mit Xcode
                     einen iOS-Simulator (iPhone, iPad)
                 • Codiqua ermöglicht WYSIWYG-Editing mit
                     anschließender Erzeugung von
                     HTML5/CSS-Code auf Basis von jQuery Mobile
                     http://www.codiqa.com/




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   14
jQuery Mobile 1.3 Kompendium
 Einführung - Emulatoren




          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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   15
Getting started
Jetzt geht‘s los :-)




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   16
jQuery Mobile 1.3 Kompendium
 Getting started - Einbindung




          jQuery Mobile einbinden
             • Entweder über den neuen Download-Builder:
                 http://jquerymobile.com/download-builder/
                 Hier können individuell all jene Module und Funktionen zusammengestellt
                 werden, die benötigt werden - dies sorgt für eine kleinere Dateigröße
             • Oder direkt per Download (dort auch als ZIP möglich) von
                 http://jquerymobile.com/download/
                 Hier sind enthalten: jQuery Mobile Dateien, Grafiken, CSS, Docs
             • Es wird zudem jQuery 1.8.2 (aktuell 1.9.1) oder höher benötigt




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   17
jQuery Mobile 1.3 Kompendium
 Getting started - Einbindung




          jQuery Mobile einbinden
             • (Bevorzugt ist die) Verlinkung vom CDN
                 <link rel="stylesheet" href="http://code.jquery.com/
                 mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
                 <script src="http://code.jquery.com/
                 jquery-1.9.1.min.js"></script>
                 <script src="http://code.jquery.com/mobile/1.3.0/
                 jquery.mobile-1.3.0.min.js"></script>
             •   Zu Testzwecken (nicht Live gehen damit!) kann auch di jeweils letzte Version
                 über „latest“ einbinden (im nachfolgenden Beispiel nur für das CSS zu sehen):
                 <link href="http://code.jquery.com/mobile/latest/
                 jquery.mobile.min.css" rel="stylesheet" type="text/css" /




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   18
jQuery Mobile 1.3 Kompendium
 Getting started - HTML5 Grundgerüst




          HTML5 Grundgerüst
          <!DOCTYPE html>
          <html>
          <head>
             <title>Page Title</title>
             <meta name="viewport" content="width=device-width, initial-scale=1">
             <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/
          jquery.mobile-1.3.0.min.css" />
             <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
             <script src="http://code.jquery.com/mobile/1.3.0/
          jquery.mobile-1.3.0.min.js"></script>
          </head>

          <body>
             ... Hier folgt der Inhalt ...
          </body>
          </html>




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   19
jQuery Mobile 1.3 Kompendium
 Getting started - Meta-Daten / Viewport




          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




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   20
jQuery Mobile 1.3 Kompendium
 Getting started - Meta-Daten / Fullscreen-Modus




          Meta-Daten
             • 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   21
jQuery Mobile 1.3 Kompendium
 Getting started - Webclips Icons




          Webclips Icons
          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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   22
jQuery Mobile 1.3 Kompendium
 Getting started - Architektur




          Architektur
             • Cards & Roles
                 • Die Idee zur Architektur kommt initial von WML (Wireless Markup Language):
                     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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013              23
jQuery Mobile 1.3 Kompendium
 Getting started - Rollen




          Rollen in jQuery Mobile 1.3
                             Definiert eine Seite - die Einheit, die jQm verwendet
                page                                                                       panel                               Panels
                                            um Inhalt anzuzeigen

               header                       Kopfbereich der Seite                      collapsible-set   Gruppe zusammenklappbarer Panels (Akkordion)


               content                     Inhaltsbereich der Seite                    fieldcontainer              Container für Formular-Elemente


               footer                       Fußbereich der Seite                          listview              Darstellung mehrerer Intems als Liste

                              Definiert eine Navigation-Bar - typischerweise im
               navbar                                                                      dialog                              Dialog
                                                  Header

               button                       Rendert einen Button                           slider                              Slider

                                                                                                         Der enthaltene Bereich wird von jQm kompatiblen
            controlgroup                 Rendert eine Komponente                            nojs
                                                                                                                     Browsern nicht angezeigt

             collapsible        Zusammenklappbares Panel im Inhaltsbereich                 popup                     Rendert ein Popup-Widget




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013                                              24
jQuery Mobile 1.3 Kompendium
 Getting started - Seitenstruktur




          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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   25
jQuery Mobile 1.3 Kompendium
 Getting started - Ablauf




          Ablauf


                                                                  jQuery Mobile
             Semantisches
                                                                         page
            HTML5 Markup
                                            anreichern           enhancements                    umwandeln




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   26
jQuery Mobile 1.3 Kompendium
 Getting started - jQuery Mobile Enhancement




          Das macht jQuery Mobile aus der Seite (Enhancement)
          <html class="ui-mobile"><head><base href="file://localhost/Users/patricklobacher/Desktop/jquery.mobile-1.3.0/
          test.html">
               <title>jQuery Mobile Beispiel</title>
               <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
               <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
               <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
               <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
          </head>

          <body class="ui-mobile-viewport ui-overlay-c">
          <div data-role="page" data-url="/Users/patricklobacher/Desktop/jquery.mobile-1.3.0/test.html" tabindex="0"
          class="ui-page ui-body-c ui-page-footer-fixed ui-page-active" style="padding-bottom: 42px; min-height: 528px;">
               <div data-role="header" class="ui-header ui-bar-a" role="banner">
                    <h1 class="ui-title" role="heading" aria-level="1">Header1</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 slideup"
          role="contentinfo">
                    <h4 class="ui-title" role="heading" aria-level="1">Footer</h4>
               </div>
          </div>
          <div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon ui-icon-loading"></
          span><h1>loading</h1></div></body></html>




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013       27
jQuery Mobile 1.3 Kompendium
 Getting started - Theming




          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"
              Buchstabe                    Beschreibung                          Farbe

                   a       Höchstes visuelles Level (Default bei Toolbars)     Schwarz

                   b                  Zweites visuelles Level                    Blau

                   c                  Visuelles Baseline-Level                   Silber

                   d            Alternatives zweites visuelles Level             Grau

                   e                       Akkzent-Farbe                         Gelb




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   28
Multi-Page
Mehrere Seiten in
einem Dokument



(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   29
jQuery Mobile 1.3 Kompendium
 Multi-Page - Template




          Multi-Page Template
          Weitere Seiten über separate DIVs mit data-role="page" und eindeutiger ID die mittels Anker-Link angesprungen wird.
          Seitentitel wird über data-title="Home" gesetzt.
          <!-- 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013                   30
jQuery Mobile 1.3 Kompendium
 Multi-Page - Seitentitel




          Seitentitel
             • Wenn ein Wert für data-title existiert, wird dieser für den Titel der
                 internen Seite verwendet.
             • Wenn kein Wert für data-title existiert, wird der Inhalt des Headers
                 (data-role="header") verwendet.
             • Existiert weder ein Wert für data-title noch ein Header, wird der Inhalt des
                 <title> Elements innerhalb des <head> Elements auf der Seite verwendet.




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   31
jQuery Mobile 1.3 Kompendium
 Multi-Page - Verlinkung




          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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   32
Navigationen
Links, Links, Links :-)




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   33
jQuery Mobile 1.3 Kompendium
 Navigationen - Link-Arten




          Link-Arten
             • 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013         34
jQuery Mobile 1.3 Kompendium
 Navigationen - Interne Links




          Interne Links




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




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   35
jQuery Mobile 1.3 Kompendium
 Navigationen - Interne Links




                                                                                                                jQuery Mobile

          Externer jQm Request                                                                                   Page Request
                                                                                             st
                                                                                      -Reque
                                                                                 Hijax

                                                                                                                Append to DOM

                                                                                         spo  nse
                                                                                Hijax-Re

                                Web Server
                                                                                                                 Enhance Page




                                                                                                                  Transition




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


(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013                   36
jQuery Mobile 1.3 Kompendium
 Navigationen - data-url




          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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   37
jQuery Mobile 1.3 Kompendium
 Navigationen - Externe jQm Request




          Externer jQm Request
             • jQuery Mobile parst das Attribut href lädt die Zielseite mittels eines Ajax-Requests (Hijax).
             • Wenn die Seite erfolgreich geladen wurde, wird sie in das DOM eingehängt
             • 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)
             •   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).
             •   Anschließend bekommt die aktive Seite die Klasse ui-page-active zugewiesen
             •   Schließlich wir die URL angepasst, sodaß ein Bookmark gesetzt werden kann (pushState Feature
                 von HTML5)
             •   Schlägt das Laden fehl, wird ein „Error Loading Page“ Overlay gezeigt




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   38
jQuery Mobile 1.3 Kompendium
 Navigationen - Transitions




          Transitions (Übergänge)
             • jQuery Mobile verfügt über 9 eingebaute Transitions:
                 •   fade (Ausblenden/Einblenden)
                 •   pop (Vergrößern/Verkleinern)
                 •   flip (Umdrehen - wie eine Karte)
                 •   turn (Rausklappen/Reinklappen nach/von Links)
                 •   flow (Animationseffekt bekannt vom iPhone Safari beim Wechsel von Seiten)
                 •   slidefade (Rausfahren/Reinfahren nach/von links bei gleichzeitigem Ausblenden/Einblenden)
                 •   slide (Rausfahren/Reinfahren nach/von links)
                 •   slideup (Rausfahren/Reinfahren nach/von oben bei gleichzeitigem Ausblenden/Einblenden)
                 •   slidedown (Rausfahren/Reinfahren nach/von unten bei gleichzeitigem Ausblenden/Einblenden)
                 •   none (Keine Animation)




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013    39
jQuery Mobile 1.3 Kompendium
 Navigationen - Transitions




          Transitions (Übergänge)
             • Eine Transition kann über das Attribut
                 data-transition="[transition]"
                 spezifiziert werden, welches auf alle Links, Buttons und Formulare gelegt
                 werden kann
             • Um eine umgekehrte Transition zu forcieren kann
                 data-direction="reverse"
                 verwendet werden




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   40
jQuery Mobile 1.3 Kompendium
 Navigationen - Dialoge vs. Seiten




          Dialoge vs. Seiten
             • Dialoge sind Seiten mit einem abgeänderten UI
             • Die Seite wird auf dem Hintergrund platziert, mit
                 abgerundeten Ecken dargestellt und mit einem
                 Schließen-Button links oben versehen
             •   Eingeleitet wird ein Dialog mit dem Attribut
                 <a href="#terms" data-rel="dialog"
                 data-transition="slidedown">AGB</a>
             •   Oder aber bei der Definition der Seite selbst
                 <div data-role="dialog" id="terms">AGB</a>
             •   Dialoge können nicht gebookmarkt werden
                 und tauchen nicht in der History auf.
             •   Dialoge können per API geschlossen werden
                 function processAgreement(){
                     // Dialog schließen
                     $('.ui-dialog').dialog('close');
                 }




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   41
jQuery Mobile 1.3 Kompendium
 Navigationen - ActionSheets




          Action Sheets
             • Action Sheets sind Dialoge die von oben animiert hereinfahren
             • Auf diesen wird meist eine User-Interaktion eingefordert
             • Technisch gesehen sind dies Dialoge, denen Header und Footer fehlt
          <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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   42
jQuery Mobile 1.3 Kompendium
 Navigationen - Externe Links




          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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013                  43
jQuery Mobile 1.3 Kompendium
 Navigationen - 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   44
jQuery Mobile 1.3 Kompendium
 Navigationen - Mobile Spezial-Links




          Mobile Spezial-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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   45
Popups
Seiten als Fenster




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   46
jQuery Mobile 1.3 Kompendium
 Navigationen - Popup Allgemein (v1.2)




          Popup - Allgemein
          Um ein Popup zu erstellen, muss man das Attribut data-role="popup" zu dem
          DIV hinzufügen, welches den Inhalt des Popups enthält. Anschließend erzeugt
          man einen Link mit der ID des Popups als Linkziel und dem Attribut data-
          rel="popup".
          <a href="#popupBasic" data-rel="popup">Popup öffnen</a>

          <div data-role="popup" id="popupBasic">
             <p>Das ist ein rudimentäres Popup ohne weitere Optionen<p>
          </div>




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   47
jQuery Mobile 1.3 Kompendium
 Navigationen - Popup Tip (v1.2)




          Popup - Tooltip
          Über entsprechende Parameter erscheint das Popup als Tooltip:
          <p class="ui-body-d" style="padding:2em;">
             Ein Absatz mit Tooltip
             <a href="#popupInfo" data-rel="popup" data-role="button"
                class="ui-icon-alt" data-inline="true"
                data-transition="pop" data-icon="info"
                data-theme="e" data-iconpos="notext">Hinweis</a>
          </p>
          <div data-role="popup" id="popupInfo" class="ui-content"
             data-theme="e" style="max-width:350px;">
          <p>Hier sehen Sie <strong>kleines Popup</strong> welches als Tooltip eingesetzt wird.
          Sollte der Text länger werden, wird dies sogar mehrzeilig anzeigt.</p></div>




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   48
jQuery Mobile 1.3 Kompendium
 Navigationen - Popup Lightbox (v1.2)




          Popup - Lightbox
          Lightboxes lassen sich leicht (inkl. Close-
          Button) realisieren:
          <a href="#popupPhoto" data-rel="popup" data-position-to="window"
             data-transition="fade">
             <img class="popphoto" src="photo.jpg" alt="Office typovision"
                style="width:50%; padding-left:10px;"></a>

          <div data-role="popup" id="popupPhoto" data-overlay-theme="a"
             data-theme="d" data-corners="false">
             <a href="#" data-rel="back" data-role="button" data-theme="a"
                 data-icon="delete" data-iconpos="notext"
                 class="ui-btn-right">Close</a>
                 <img class="popphoto" src="photo.jpg"
                    style="max-height:512px;" alt="Office typovision">
          </div>




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   49
jQuery Mobile 1.3 Kompendium
 Navigationen - Popup Menü (v1.2)




          Popup - Menü
          Popup-Menüs werden in listviews platziert:
          <a href="#popupMenu" data-rel="popup" data-role="button"
             data-inline="true" data-transition="slideup"
             data-icon="gear" data-theme="e">Aktionen...</a>

          <div data-role="popup" id="popupMenu" data-theme="d">
              <ul data-role="listview" data-inset="true"
                 style="min-width:210px;" data-theme="d">
                   <li data-role="divider" data-theme="e">
                       Aktionen w&auml;hlen</li>
                   <li><a href="#">Details ansehen</a></li>
                   <li><a href="#">Editieren</a></li>
                   ...
              </ul>
          </div>
          Für ein verschachteltes Menü wird ein Akkordio-Widgetn in einem listview platziert.




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   50
jQuery Mobile 1.3 Kompendium
 Navigationen - Popup Formulare (v1.2)




          Popup - Formulare
          Es sind auch Formulare möglich, die als Popup aufgehen:
          <a href="#popupLogin" data-rel="popup" data-position-to="window"
             data-role="button" data-inline="true" data-icon="check"
             data-theme="a" data-transition="pop">Anmelden</a>

          <div data-role="popup" id="popupMenu" data-theme="a"><div data-
          role="popup" id="popupLogin" data-theme="a" class="ui-corner-
          all"><form><div style="padding:10px 20px;"><h3>Bitte
          ausf&uuml;llen</h3><label for="un" class="ui-hidden-
          accessible">Username:</label> <input type="text" name="user"
          id="un" value="" placeholder="username" data-theme="a"> <label
          for="pw" class="ui-hidden-accessible">Password:</label> <input
          type="password" name="pass" id="pw" value=""
          placeholder="password" data-theme="a"> <button type="submit"
          data-theme="b" data-icon="check">Anmelden</button></div></
          form></div></div>




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   51
jQuery Mobile 1.3 Kompendium
 Navigationen - Popup Dialoge (v1.2)




          Popup - Dialoge
          Will man Dialoge „erzwingen“, muss man das Attribut
          data-dismissible einsetzen:
          <a href="#popupDialog" data-rel="popup" data-position-
          to="window" data-role="button" data-inline="true" data-
          transition="pop" data-icon="delete" data-theme="b">Seite
          löschen...</a>

          <div data-role="popup" id="popupDialog" data-overlay-theme="a"
          data-theme="c" data-dismissible="false" style="max-width:400px;"
          class="ui-corner-all"><div data-role="header" data-theme="a"
          class="ui-corner-top"><h1>Seite löschen?</h1></div><div data-
          role="content" data-theme="d" class="ui-corner-bottom ui-
          content"><h3 class="ui-title">Sind Sie wirklich sicher, dass Sie
          die Seite löschen wollen?</h3><p>Dies kann nicht rückgängig
          gemacht werden.</p><a href="#" data-role="button" data-
          inline="true" data-rel="back" data-theme="c">Cancel</a> <a
          href="#" data-role="button" data-inline="true" data-rel="back"
          data-transition="flow" data-theme="b">Löschen</a></div></div>




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   52
jQuery Mobile 1.3 Kompendium
 Navigationen - Popup Dialoge - Close (v1.2)




          Popup - Dialoge - Close
          Um einen Schließen-Button einzusetzen, benötigt man
          das Attribut data-rel und eine entsprechende Klasse:
          <a href="#popupCloseRight" data-rel="popup" data-role="button" data-
          inline="true">Rechter Schließen-Button</a>
          <a href="#popupCloseLeft" data-rel="popup" data-role="button" data-
          inline="true">Linker Schließen-Button</a>

          <div data-role="popup" id="popupCloseRight" class="ui-content"
          style="max-width:280px">
              <a href="#" data-rel="back" data-role="button" data-theme="a"
          data-icon="delete" data-iconpos="notext" class="ui-btn-
          right">Schließen</a>
              <p>Hier ist der Schließen-Button rechts oben.</p>
          </div>
          <div data-role="popup" id="popupCloseLeft" class="ui-content"
          style="max-width:280px">
              <a href="#" data-rel="back" data-role="button" data-theme="a"
          data-icon="delete" data-iconpos="notext" class="ui-btn-
          left">Schließen</a>
              <p>Hier ist der Schließen-Button rechts links.</p>
          </div>



(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   53
jQuery Mobile 1.3 Kompendium
 Navigationen - Popup - Beispiel Skalierung (v1.2)




          Popup - Beispiel Skalierung
             • Gegeben ist ein DIV mit data-role="popup"
                 und class="photopopup". Der Handler wird an den popupbeforeposition
                 Event gebunden, welcher dafür sorgt, dass das Bild vor dem Anzeigen
                 sklaiert wird, sondern auch bei einem Resize. Zusätzlich wird das Bild so
                 verkleinert, dass es einen 30px Rand rundherum hat.
                 $( document ).on( "pageinit", function() {
                     $( ".photopopup" ).on({
                         popupbeforeposition: function() {
                            var maxHeight = $( window ).height() - 60 + "px";
                            $( ".photopopup img" ).css( "max-height", maxHeight );
                         }
                     });
                 });




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   54
jQuery Mobile 1.3 Kompendium
 Navigationen - Popup - History Tracking (v1.2)




          Popup - History Tracking
             • Grundsätzlich verändert ein Popup die History, da eine neue Seite
                 aufgerufen wird. Will man das nicht, kann man das History Tracking gezielt
                 abschalten:

                 /* Data-Attribut */
                 data-history="false"

                 /* oder direkt per API */
                 $( ".selector" ).popup({ history: false });




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   55
jQuery Mobile 1.3 Kompendium
 Navigationen - Popup - API (v1.2)




          Popup - API
             • Die vollständige Popup-API befindet sich unter der folgenden URL:
                 http://api.jquerymobile.com/popup/




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   56
Panels
Bereiche




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   57
jQuery Mobile 1.3 Kompendium
 Panels - Markup 1 (v1.3)




          Panels Markup 1
             • Panels werden parallel zu header, content und footer notiert. Und zwar
                 immer vor oder nach (nie zwischen) diesen.
                 <div data-role="page">

                    <div data-role="panel" id="leftpanel1" data-position="left" data-
                 display="overlay" data-theme="a">
                       <h3>Left Panel: Overlay</h3>
                       <a href="#demo-links" data-rel="close" data-role="button" data-
                 theme="a" data-icon="delete" data-inline="true">Close</a>
                    </div>

                    <div data-role="header">...</div>
                    <div data-role="content">
                        <a href="#leftpanel1" data-role="button" data-inline="true" data-
                 mini="true">Overlay</a>
                    </div>
                    <div data-role="footer">...</div>
                 </div>




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   58
jQuery Mobile 1.3 Kompendium
 Panels - Markup 2 (v1.3)




          Panels Markup 2
             • Über data-position="left" (oder "right")
                 wird die Seite definiert, an der das
                 Panel eingeblendet wird.
             • Mit data-display="overlay" wird das
                 Panel über den Content gelegt.
             • Über data-display="reveal" lässt den
                 Content „wegschieben“.
             • Mit data-display="push" drückt das
                 Panel den Content weg.




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   59
jQuery Mobile 1.3 Kompendium
 Panels - Eigenschaften 1 (v1.3)




          Panels - Eigenschaften 1
             • Um ein Panel zu schließen kann man ausserhalb des Panels Klicken oder
                 Tappen oder eine Swipe-Geste ausführen. Will man das nicht, kann man
                 das Attribut data-swipe-close="false" bzw. data-
                 dismissible="false" auf das Panel anwenden
             • Schließen kann man das Panel entweder per HTML oder per JS:
                 <a href="#my-header" data-rel="close">Close panel</a>
                 $( "#idofpanel" ).panel( "close" );




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   60
jQuery Mobile 1.3 Kompendium
 Panels - Eigenschaften 2 (v1.3)




          Panels - Eigenschaften 2
             • Sobald man dynamisch Content zum Panel hinzugefügt oder versteckten
                 Content sichbar machen will, wenn das Panel offen ist, muss man den
                 „updatelayout“ Event trigger
                 $( "#mypanel" ).trigger( "updatelayout" );
             •   Öffnen kann man ein Panel entweder per HTML oder JS:
                 <a href="#leftpanel1" data-role="button" data-
                 inline="true" data-mini="true">Overlay</a>
                 $( "#idofpanel" ).panel( "open" , optionsHash );
             •   Die Panel-API befindet sich hier:
                 http://api.jquerymobile.com/panel/




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   61
jQuery Mobile 1.3 Kompendium
 Panels - Responsive (v1.3)




          Panels - Responsive
             •   @media (min-width:35em){
                    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-
                 fixed-toolbar-position-left,
                    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-
                 fixed-toolbar-position-left,
                    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-
                 position-left,
                    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-
                 position-left { margin-right: 17em;}
                    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-
                 fixed-toolbar-position-right,
                    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-
                 fixed-toolbar-position-right,
                    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-
                 position-right,
                    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-
                 position-right { margin-left: 17em; }
                    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push,
                    .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal { width: auto; }
                    .ui-responsive-panel .ui-panel-dismiss-display-push { display: none;}
                 }




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013                  62
jQuery Mobile 1.3 Kompendium
 Panels - Öffnen per Swipe - HTML (v1.3)




          Panels - Öffnen per Swipe - HTML
          <div data-role="page" id="demo-page" data-theme="d" data-url="demo-page">
              <div data-role="header" data-theme="b">
                  <h1>Nach rechts oder links swipen</h1>
                  <a href="#left-panel" data-theme="d" data-icon="arrow-r" data-iconpos="notext" data-
          shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Linkes Panel oeffnen</a>
                  <a href="#right-panel" data-theme="d" data-icon="arrow-l" data-iconpos="notext" data-
          shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Rechtes Panel oeffnen</a>
              </div><!-- /header -->
              <div data-role="content">
                  Nach rechts oder links swipen
              </div><!-- /content -->
              <div data-role="panel" id="left-panel" data-theme="b">
                  <p>Linkes Panel mit reveal</p>
                  <a href="#" data-rel="close" data-role="button" data-mini="true" data-inline="true" data-
          icon="delete" data-iconpos="right">Close</a>
              </div><!-- /panel -->
              <div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="c">
                  <p>Rechtes Panel mit push.</p>
                  <a href="#" data-rel="close" data-role="button" data-mini="true" data-inline="true" data-
          icon="delete" data-iconpos="right">Close</a>
              </div><!-- /panel -->
          </div>




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013     63
jQuery Mobile 1.3 Kompendium
 Panels - Öffnen per Swipe - JavaScript (v1.3)




          Panels - Öffnen per Swipe - JavaScript
          $( document ).on( "pageinit", "#demo-page", function() {
              $( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
                  // Überprüfung, ob auf der Seite bereits ein Panel offen ist
                  // Ansonsten würde das Schließen des einen Panels das andere öffnen

                      if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
                          if ( e.type === "swipeleft" ) {
                              $( "#right-panel" ).panel( "open" );
                          } else if ( e.type === "swiperight" ) {
                              $( "#left-panel" ).panel( "open" );
                          }
                      }
                });
          });




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   64
jQuery Mobile 1.3 Kompendium
 Panels - Öffnen per Swipe - CSS (v1.3)




          Panels - Öffnen per Swipe - CSS
          /* Swipe funktioniert ebenfalls mit der Maus -
          daher muss die Selektion des Textes ausgeschaltet
          werden */
          #demo-page * {
              -webkit-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              -o-user-select: none;
              user-select: none;
          }
          /* Pfeile im Header */
          #demo-page .ui-header .ui-btn {
              background: none;
              border: none;
              top: 9px;
          }
          #demo-page .ui-header .ui-btn-inner {
              border: none;
          }

          .back-btn { float: right; margin: 0 2em 1em 0; }




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   65
Toolbars
Header und Footer
Toolbars



(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   66
jQuery Mobile 1.3 Kompendium
 Toolbars - Header Bar




          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 Default-Backbutton, muss erst einschalten weden (s.u.)




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013               67
jQuery Mobile 1.3 Kompendium
 Toolbars - Header Bar - Title




          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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   68
jQuery Mobile 1.3 Kompendium
 Toolbars - Header Bar - Fixed Position




          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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   69
jQuery Mobile 1.3 Kompendium
 Toolbars - Header Toolbar - Buttons




          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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   70
jQuery Mobile 1.3 Kompendium
 Toolbars - Header Toolbar - Buttons




          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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013      71
jQuery Mobile 1.3 Kompendium
 Toolbars - Header Toolbar - Buttons




          Header Toolbar - 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   72
jQuery Mobile 1.3 Kompendium
 Toolbars - Segmentierte Toolbar




          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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   73
jQuery Mobile 1.3 Kompendium
 Toolbars - UI Bar




          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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   74
jQuery Mobile 1.3 Kompendium
 Toolbars - Navbar




          Navbar
             • Toolbar mit einer „Navbar“:
                 <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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   75
jQuery Mobile 1.3 Kompendium
 Toolbars - Icons




          Icons
          Übersicht über die
          verfügbaren Icons:




          http://view.jquerymobile.com/master/docs/widgets/icons/




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   76
jQuery Mobile 1.3 Kompendium
 Toolbars - Aktiver Button




          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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   77
jQuery Mobile 1.3 Kompendium
 Toolbars - Custom Icons




          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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013       78
Buttons
Klick & Action




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   79
jQuery Mobile 1.3 Kompendium
 Buttons - Arten




          Button - 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   80
jQuery Mobile 1.3 Kompendium
 Buttons - Automatische Umwandlung stoppen




          Button - Automatische Umwandlung stoppen
             • 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   81
jQuery Mobile 1.3 Kompendium
 Buttons - Icons




          Icons
             • http://view.jquerymobile.com/master/docs/widgets/icons/
             • 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   82
jQuery Mobile 1.3 Kompendium
 Buttons - Icon Positionierung




          Icon Positionierung
          <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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   83
jQuery Mobile 1.3 Kompendium
 Buttons - Gruppierung




          Button 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   84
jQuery Mobile 1.3 Kompendium
 Buttons - Effekte




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




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   85
Formulare
Interaktion




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   86
jQuery Mobile 1.3 Kompendium
 Formulare - Grundlagen




          Grundlagen
             • Basis-Markup
                 <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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   87
jQuery Mobile 1.3 Kompendium
 Formulare - Fieldcontainer




          Fieldcontainer
             • Markup
                 <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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   88
jQuery Mobile 1.3 Kompendium
 Formulare - Felder




          Formular 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   89
jQuery Mobile 1.3 Kompendium
 Formulare - Felder




          Formular Felder
             • Datum-Optionen:
                 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="fieldcontainer">
                    <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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   90
jQuery Mobile 1.3 Kompendium
 Formulare - Select




          Select
             • 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   91
jQuery Mobile 1.3 Kompendium
 Formulare - Select




          Select
             • 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   92
jQuery Mobile 1.3 Kompendium
 Formulare - Radio-Buttons




          Radio-Buttons
             • Radio-Buttons vertikal
                 (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>




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   93
jQuery Mobile 1.3 Kompendium
 Formulare - Radio-Buttons




          Radio-Buttons
             • Radio-Buttons horizontal
                 <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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   94
jQuery Mobile 1.3 Kompendium
 Formulare - Checkboxen




          Checkboxen
             • Checkboxen vertikal
                 (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>




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   95
jQuery Mobile 1.3 Kompendium
 Formulare - Checkboxen




          Checkboxen
             • Checkboxen horizontal
                 <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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   96
jQuery Mobile 1.3 Kompendium
 Formulare - Slider




          Slider
             • Slider Markup
                 <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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   97
jQuery Mobile 1.3 Kompendium
 Formulare - Range-Slider (v1.3)




          Range-Slider
             • Range - Slider Markup
                 <form>
                    <div data-role="rangeslider">
                        <label for="range-1a">Rangeslider:</label>
                        <input type="range" name="range-1a" id="range-1a"
                 min="0" max="100" value="40">
                        <label for="range-1b">Rangeslider:</label>
                        <input type="range" name="range-1b" id="range-1b"
                 min="0" max="100" value="80">
                     </div>
                 </form>

             • Zahlreiche weitere Optionen:
                 http://view.jquerymobile.com/1.3.0/docs/widgets/
                 sliders/rangeslider.php




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   98
jQuery Mobile 1.3 Kompendium
 Formulare - Switch




          Switch
             • Switch Markup
                 <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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   99
Listen
Paradigmen




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   100
jQuery Mobile 1.3 Kompendium
 Listen - Normale Listen




          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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   101
jQuery Mobile 1.3 Kompendium
 Listen - Trenner




          Trenner
             • Trenner über data-role:
                 <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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   102
jQuery Mobile 1.3 Kompendium
 Listen - Autodivider (v1.2)




          Autodivider
             • Automatische Trenner über data-autodividers
                 (es erfolgt aber keine Sortierung):
                 <div data-role="content">
                    <ul data-role="listview" data-autodividers="true">
                        <li>jQuery</li>
                        <li>jQuery Mobile</li>
                        <li>Flow</li>
                        <li>Neos</li>
                        <li>TYPO3</li>
                    </ul>
                 </div>




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   103
jQuery Mobile 1.3 Kompendium
 Listen - Interaktive Listen




          Interaktive Listen
             • Interaktivität durch Verlinkung:
                 <div data-role="content">
                    <ul data-role="listview">
                        <li><a href="#page2">Interner Link</a></li>
                        <li><a href="other.html">Externer Link</a></li>
                        <li><a href="http://www.typovision.de">Absoluter externer Link</a></li>
                        <li><a href="tel:+13051010200">Telefon</a></li>
                        <li><a href="javascript:alert('Hi!')">JavaScript link</a></li>
                    </ul>
                 </div>




(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013   104
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten

Weitere ähnliche Inhalte

Andere mochten auch

HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...Karionis
 
Mein Blog als digitales Tagebuch - Streifzug durch die Blogosphäre – Installa...
Mein Blog als digitales Tagebuch - Streifzug durch die Blogosphäre – Installa...Mein Blog als digitales Tagebuch - Streifzug durch die Blogosphäre – Installa...
Mein Blog als digitales Tagebuch - Streifzug durch die Blogosphäre – Installa...Karionis
 
PowerPoint Tutorial Presentation - Tips & Tricks
PowerPoint Tutorial Presentation - Tips & TricksPowerPoint Tutorial Presentation - Tips & Tricks
PowerPoint Tutorial Presentation - Tips & TricksNiezette -
 
HTML5 für Einsteiger, Designer und Projektmanager
HTML5 für Einsteiger, Designer und ProjektmanagerHTML5 für Einsteiger, Designer und Projektmanager
HTML5 für Einsteiger, Designer und ProjektmanagerDaniel Haller
 
Powerpoint. Präsentieren in Wissenschaft & Wirtschaft
Powerpoint. Präsentieren in Wissenschaft & WirtschaftPowerpoint. Präsentieren in Wissenschaft & Wirtschaft
Powerpoint. Präsentieren in Wissenschaft & WirtschaftMatthias Mueller-Prove
 
2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShare2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShareSlideShare
 
What to Upload to SlideShare
What to Upload to SlideShareWhat to Upload to SlideShare
What to Upload to SlideShareSlideShare
 
Getting Started With SlideShare
Getting Started With SlideShareGetting Started With SlideShare
Getting Started With SlideShareSlideShare
 

Andere mochten auch (8)

HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
 
Mein Blog als digitales Tagebuch - Streifzug durch die Blogosphäre – Installa...
Mein Blog als digitales Tagebuch - Streifzug durch die Blogosphäre – Installa...Mein Blog als digitales Tagebuch - Streifzug durch die Blogosphäre – Installa...
Mein Blog als digitales Tagebuch - Streifzug durch die Blogosphäre – Installa...
 
PowerPoint Tutorial Presentation - Tips & Tricks
PowerPoint Tutorial Presentation - Tips & TricksPowerPoint Tutorial Presentation - Tips & Tricks
PowerPoint Tutorial Presentation - Tips & Tricks
 
HTML5 für Einsteiger, Designer und Projektmanager
HTML5 für Einsteiger, Designer und ProjektmanagerHTML5 für Einsteiger, Designer und Projektmanager
HTML5 für Einsteiger, Designer und Projektmanager
 
Powerpoint. Präsentieren in Wissenschaft & Wirtschaft
Powerpoint. Präsentieren in Wissenschaft & WirtschaftPowerpoint. Präsentieren in Wissenschaft & Wirtschaft
Powerpoint. Präsentieren in Wissenschaft & Wirtschaft
 
2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShare2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShare
 
What to Upload to SlideShare
What to Upload to SlideShareWhat to Upload to SlideShare
What to Upload to SlideShare
 
Getting Started With SlideShare
Getting Started With SlideShareGetting Started With SlideShare
Getting Started With SlideShare
 

Ähnlich wie jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten

Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft AG
 
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.Peter Hecker
 
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
 
Case Study: Produktkonfigurator Web-App
Case Study: Produktkonfigurator Web-AppCase Study: Produktkonfigurator Web-App
Case Study: Produktkonfigurator Web-AppFLYACTS GmbH
 
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)Jens Küsters
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5kkramhoeft
 
Portale 2.0 mit Liferay
Portale 2.0 mit LiferayPortale 2.0 mit Liferay
Portale 2.0 mit Liferayinovex GmbH
 
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)Christian Heindel
 
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 NachteilenCrowdArchitects GmbH
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGapStefan Kolb
 
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery MobileTrittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery MobileBenjamin Schmid
 
Die besten 10 JavaScript Frameworks für moderne Web-Apps
Die besten 10 JavaScript Frameworks für moderne Web-AppsDie besten 10 JavaScript Frameworks für moderne Web-Apps
Die besten 10 JavaScript Frameworks für moderne Web-AppsDieter Ziegler
 
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressWP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressKirstenSchelper
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGapIndiginox
 
Herbert schwerzmann byod integration_von_modernen_endgeräten
Herbert schwerzmann byod integration_von_modernen_endgerätenHerbert schwerzmann byod integration_von_modernen_endgeräten
Herbert schwerzmann byod integration_von_modernen_endgerätenDigicomp Academy AG
 

Ähnlich wie jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten (20)

Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
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.
 
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
 
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 
Html5 - Traum oder Wirklichkeit
Html5 - Traum oder WirklichkeitHtml5 - Traum oder Wirklichkeit
Html5 - Traum oder Wirklichkeit
 
Portale 2.0 mit Liferay
Portale 2.0 mit LiferayPortale 2.0 mit Liferay
Portale 2.0 mit Liferay
 
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)
 
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
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery MobileTrittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Die besten 10 JavaScript Frameworks für moderne Web-Apps
Die besten 10 JavaScript Frameworks für moderne Web-AppsDie besten 10 JavaScript Frameworks für moderne Web-Apps
Die besten 10 JavaScript Frameworks für moderne Web-Apps
 
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressWP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
 
Nefos: Nefos Mobile iPad App
Nefos: Nefos Mobile iPad AppNefos: Nefos Mobile iPad App
Nefos: Nefos Mobile iPad App
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
Herbert schwerzmann byod integration_von_modernen_endgeräten
Herbert schwerzmann byod integration_von_modernen_endgerätenHerbert schwerzmann byod integration_von_modernen_endgeräten
Herbert schwerzmann byod integration_von_modernen_endgeräten
 
Mobile und Trends.
Mobile und Trends.Mobile und Trends.
Mobile und Trends.
 

Mehr von die.agilen GmbH

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)die.agilen GmbH
 
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 ...die.agilen GmbH
 
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 ...die.agilen GmbH
 
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 2017die.agilen GmbH
 
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.agilen GmbH
 
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...die.agilen GmbH
 
Roman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKRRoman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKRdie.agilen GmbH
 
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...die.agilen GmbH
 
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 - pluswerkdie.agilen GmbH
 
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 / Berlindie.agilen GmbH
 
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 applicationdie.agilen GmbH
 
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...die.agilen GmbH
 
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...die.agilen GmbH
 
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 - Pluswerkdie.agilen GmbH
 
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 - Pluswerkdie.agilen GmbH
 
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...die.agilen GmbH
 
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...die.agilen GmbH
 
Innovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerkInnovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerkdie.agilen GmbH
 
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...die.agilen GmbH
 
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 - pluswerkdie.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 1.3 - Das Kompendium mit 200 Seiten

  • 1. jQuery Mobile 1.3 Kompendium 22.03.2013 Patrick Lobacher (GF typovision GmbH)
  • 2. Einführung In jQuery Mobile (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 2
  • 3. jQuery Mobile 1.3 Kompendium Einführung - Das Mobile Web 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 3
  • 4. jQuery Mobile 1.3 Kompendium Einführung - Mobile Lösungen Mobile Lösungen Mobile Framework Kompatible Website Optimierte Website (Web-Technologie, optimiert für alle (Keine Anpassung) (Viewport, BuildIn, RWD, ...) Zugangsgeräte) Web App Hybride App Native App (speziell optimierte Applikation (Web-Technologie eingebettet in (eigener Code für alle Plattformen) bestehend aus Web-Technologie) nativem Rahmengerüst) (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 4
  • 5. jQuery Mobile 1.3 Kompendium Einführung - Mobile Frameworks Mobile Frameworks (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 5
  • 6. jQuery Mobile 1.3 Kompendium Einführung - 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 6
  • 7. jQuery Mobile 1.3 Kompendium Einführung - Progressive Enhancement? 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 7
  • 8. jQuery Mobile 1.3 Kompendium Einführung - 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 8
  • 9. jQuery Mobile 1.3 Kompendium Einführung - jQuery Mobile Shortfacts jQuery Mobile Shortfact • Erfunden im Oktober 2010 vom Team rund um Jon Resig ( jQuery Team) • John Resig, JavaScript Tool Entwickler für die Mozilla Corporation (@jeresig auf Twitter) • Lizenz: MIT (Dual-Lizent: MIT & GPL bis 10.09.2012) • Sprache: JavaScript + basiert auf jQuery • Website: jquerymobile.com • Aktuelle Version: 1.3.0 (20.02.2013) • Größe: 24 KB (Größe jQuery: 32 KB | Gesamt: 56 KB) • Benötigt die jeweiligen JS-Dateien von: jQuery und jQuery Mobile sowie ein CSS (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 9
  • 10. jQuery Mobile 1.3 Kompendium Einführung - jQuery Mobile Überblick jQuery Mobile Überblick • jQuery Mobile ist ein UI Framework welches auf jQuery bassiert • jQuery Mobile ist optimiert auf allen populären Smartphones, Tables, E- Reader, und Desktop-Plattformen • Erstellt in Hinblick auf Zugänglichkeit und universellem Zugang • Das Projekt folgt den Paradigmen von „Progressive Enhancement“ und “Responsive Web Design (RWD)“ • Das Markup basiert dabei auf HTML5, was es einfach zum Erlernen macht • Über eine umfangreiche API kann das Verhalten von jQuery leicht manipuliert werden (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 10
  • 11. jQuery Mobile 1.3 Kompendium Einführung - jQuery Mobile Kompatibilität jQuery Mobile Kompatibilität (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 11
  • 12. jQuery Mobile 1.3 Kompendium Einführung - jQuery Mobile Kompatibilität jQuery Mobile Kompatibilität (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 12
  • 13. jQuery Mobile 1.3 Kompendium Einführung - HTML5/CSS3 HTML5/CSS3 • jQuery Mobile verwendet einige • • Animations 2D and 3D transformations der HTML5/CSS3-Features direkt • Gradients and visual effects und kann mit folgenden gut • Viewport management (for zooming support inside the browser) integriert werden: • Webapp installation metadata • Integration with native applications • Multimedia support • Offline access • Graphic drawing (vector and bitmap) • Offline storage • Custom font support • Web sockets • Geolocation access • Accelerometer and gyroscope support (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 13
  • 14. jQuery Mobile 1.3 Kompendium Einführung - Emulatoren Emulatoren • Für Mac OS X gibt es mit Xcode einen iOS-Simulator (iPhone, iPad) • Codiqua ermöglicht WYSIWYG-Editing mit anschließender Erzeugung von HTML5/CSS-Code auf Basis von jQuery Mobile http://www.codiqa.com/ (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 14
  • 15. jQuery Mobile 1.3 Kompendium Einführung - Emulatoren 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 15
  • 16. Getting started Jetzt geht‘s los :-) (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 16
  • 17. jQuery Mobile 1.3 Kompendium Getting started - Einbindung jQuery Mobile einbinden • Entweder über den neuen Download-Builder: http://jquerymobile.com/download-builder/ Hier können individuell all jene Module und Funktionen zusammengestellt werden, die benötigt werden - dies sorgt für eine kleinere Dateigröße • Oder direkt per Download (dort auch als ZIP möglich) von http://jquerymobile.com/download/ Hier sind enthalten: jQuery Mobile Dateien, Grafiken, CSS, Docs • Es wird zudem jQuery 1.8.2 (aktuell 1.9.1) oder höher benötigt (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 17
  • 18. jQuery Mobile 1.3 Kompendium Getting started - Einbindung jQuery Mobile einbinden • (Bevorzugt ist die) Verlinkung vom CDN <link rel="stylesheet" href="http://code.jquery.com/ mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> <script src="http://code.jquery.com/ jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/ jquery.mobile-1.3.0.min.js"></script> • Zu Testzwecken (nicht Live gehen damit!) kann auch di jeweils letzte Version über „latest“ einbinden (im nachfolgenden Beispiel nur für das CSS zu sehen): <link href="http://code.jquery.com/mobile/latest/ jquery.mobile.min.css" rel="stylesheet" type="text/css" / (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 18
  • 19. jQuery Mobile 1.3 Kompendium Getting started - HTML5 Grundgerüst HTML5 Grundgerüst <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/ jquery.mobile-1.3.0.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/ jquery.mobile-1.3.0.min.js"></script> </head> <body> ... Hier folgt der Inhalt ... </body> </html> (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 19
  • 20. jQuery Mobile 1.3 Kompendium Getting started - Meta-Daten / Viewport 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 (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 20
  • 21. jQuery Mobile 1.3 Kompendium Getting started - Meta-Daten / Fullscreen-Modus Meta-Daten • 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 21
  • 22. jQuery Mobile 1.3 Kompendium Getting started - Webclips Icons Webclips Icons 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 22
  • 23. jQuery Mobile 1.3 Kompendium Getting started - Architektur Architektur • Cards & Roles • Die Idee zur Architektur kommt initial von WML (Wireless Markup Language): 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 23
  • 24. jQuery Mobile 1.3 Kompendium Getting started - Rollen Rollen in jQuery Mobile 1.3 Definiert eine Seite - die Einheit, die jQm verwendet page panel Panels um Inhalt anzuzeigen header Kopfbereich der Seite collapsible-set Gruppe zusammenklappbarer Panels (Akkordion) content Inhaltsbereich der Seite fieldcontainer Container für Formular-Elemente footer Fußbereich der Seite listview Darstellung mehrerer Intems als Liste Definiert eine Navigation-Bar - typischerweise im navbar dialog Dialog Header button Rendert einen Button slider Slider Der enthaltene Bereich wird von jQm kompatiblen controlgroup Rendert eine Komponente nojs Browsern nicht angezeigt collapsible Zusammenklappbares Panel im Inhaltsbereich popup Rendert ein Popup-Widget (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 24
  • 25. jQuery Mobile 1.3 Kompendium Getting started - Seitenstruktur 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 25
  • 26. jQuery Mobile 1.3 Kompendium Getting started - Ablauf Ablauf jQuery Mobile Semantisches page HTML5 Markup anreichern enhancements umwandeln (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 26
  • 27. jQuery Mobile 1.3 Kompendium Getting started - jQuery Mobile Enhancement Das macht jQuery Mobile aus der Seite (Enhancement) <html class="ui-mobile"><head><base href="file://localhost/Users/patricklobacher/Desktop/jquery.mobile-1.3.0/ test.html"> <title>jQuery Mobile Beispiel</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> </head> <body class="ui-mobile-viewport ui-overlay-c"> <div data-role="page" data-url="/Users/patricklobacher/Desktop/jquery.mobile-1.3.0/test.html" tabindex="0" class="ui-page ui-body-c ui-page-footer-fixed ui-page-active" style="padding-bottom: 42px; min-height: 528px;"> <div data-role="header" class="ui-header ui-bar-a" role="banner"> <h1 class="ui-title" role="heading" aria-level="1">Header1</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 slideup" role="contentinfo"> <h4 class="ui-title" role="heading" aria-level="1">Footer</h4> </div> </div> <div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon ui-icon-loading"></ span><h1>loading</h1></div></body></html> (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 27
  • 28. jQuery Mobile 1.3 Kompendium Getting started - Theming 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" Buchstabe Beschreibung Farbe a Höchstes visuelles Level (Default bei Toolbars) Schwarz b Zweites visuelles Level Blau c Visuelles Baseline-Level Silber d Alternatives zweites visuelles Level Grau e Akkzent-Farbe Gelb (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 28
  • 29. Multi-Page Mehrere Seiten in einem Dokument (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 29
  • 30. jQuery Mobile 1.3 Kompendium Multi-Page - Template Multi-Page Template Weitere Seiten über separate DIVs mit data-role="page" und eindeutiger ID die mittels Anker-Link angesprungen wird. Seitentitel wird über data-title="Home" gesetzt. <!-- 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 30
  • 31. jQuery Mobile 1.3 Kompendium Multi-Page - Seitentitel Seitentitel • Wenn ein Wert für data-title existiert, wird dieser für den Titel der internen Seite verwendet. • Wenn kein Wert für data-title existiert, wird der Inhalt des Headers (data-role="header") verwendet. • Existiert weder ein Wert für data-title noch ein Header, wird der Inhalt des <title> Elements innerhalb des <head> Elements auf der Seite verwendet. (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 31
  • 32. jQuery Mobile 1.3 Kompendium Multi-Page - Verlinkung 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 32
  • 33. Navigationen Links, Links, Links :-) (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 33
  • 34. jQuery Mobile 1.3 Kompendium Navigationen - Link-Arten Link-Arten • 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 34
  • 35. jQuery Mobile 1.3 Kompendium Navigationen - Interne Links Interne Links Quelle Grafik: jQuery Mobile - Up and running Maximiliano Firtman O‘Reilly ISBN: 978-1-449-39765-4 (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 35
  • 36. jQuery Mobile 1.3 Kompendium Navigationen - Interne Links jQuery Mobile Externer jQm Request Page Request st -Reque Hijax Append to DOM spo nse Hijax-Re Web Server Enhance Page Transition Hijax: http://en.wikipedia.org/wiki/Hijax (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 36
  • 37. jQuery Mobile 1.3 Kompendium Navigationen - data-url 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 37
  • 38. jQuery Mobile 1.3 Kompendium Navigationen - Externe jQm Request Externer jQm Request • jQuery Mobile parst das Attribut href lädt die Zielseite mittels eines Ajax-Requests (Hijax). • Wenn die Seite erfolgreich geladen wurde, wird sie in das DOM eingehängt • 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) • 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). • Anschließend bekommt die aktive Seite die Klasse ui-page-active zugewiesen • Schließlich wir die URL angepasst, sodaß ein Bookmark gesetzt werden kann (pushState Feature von HTML5) • Schlägt das Laden fehl, wird ein „Error Loading Page“ Overlay gezeigt (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 38
  • 39. jQuery Mobile 1.3 Kompendium Navigationen - Transitions Transitions (Übergänge) • jQuery Mobile verfügt über 9 eingebaute Transitions: • fade (Ausblenden/Einblenden) • pop (Vergrößern/Verkleinern) • flip (Umdrehen - wie eine Karte) • turn (Rausklappen/Reinklappen nach/von Links) • flow (Animationseffekt bekannt vom iPhone Safari beim Wechsel von Seiten) • slidefade (Rausfahren/Reinfahren nach/von links bei gleichzeitigem Ausblenden/Einblenden) • slide (Rausfahren/Reinfahren nach/von links) • slideup (Rausfahren/Reinfahren nach/von oben bei gleichzeitigem Ausblenden/Einblenden) • slidedown (Rausfahren/Reinfahren nach/von unten bei gleichzeitigem Ausblenden/Einblenden) • none (Keine Animation) (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 39
  • 40. jQuery Mobile 1.3 Kompendium Navigationen - Transitions Transitions (Übergänge) • Eine Transition kann über das Attribut data-transition="[transition]" spezifiziert werden, welches auf alle Links, Buttons und Formulare gelegt werden kann • Um eine umgekehrte Transition zu forcieren kann data-direction="reverse" verwendet werden (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 40
  • 41. jQuery Mobile 1.3 Kompendium Navigationen - Dialoge vs. Seiten Dialoge vs. Seiten • Dialoge sind Seiten mit einem abgeänderten UI • Die Seite wird auf dem Hintergrund platziert, mit abgerundeten Ecken dargestellt und mit einem Schließen-Button links oben versehen • Eingeleitet wird ein Dialog mit dem Attribut <a href="#terms" data-rel="dialog" data-transition="slidedown">AGB</a> • Oder aber bei der Definition der Seite selbst <div data-role="dialog" id="terms">AGB</a> • Dialoge können nicht gebookmarkt werden und tauchen nicht in der History auf. • Dialoge können per API geschlossen werden function processAgreement(){ // Dialog schließen $('.ui-dialog').dialog('close'); } (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 41
  • 42. jQuery Mobile 1.3 Kompendium Navigationen - ActionSheets Action Sheets • Action Sheets sind Dialoge die von oben animiert hereinfahren • Auf diesen wird meist eine User-Interaktion eingefordert • Technisch gesehen sind dies Dialoge, denen Header und Footer fehlt <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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 42
  • 43. jQuery Mobile 1.3 Kompendium Navigationen - Externe Links 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 43
  • 44. jQuery Mobile 1.3 Kompendium Navigationen - 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 44
  • 45. jQuery Mobile 1.3 Kompendium Navigationen - Mobile Spezial-Links Mobile Spezial-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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 45
  • 46. Popups Seiten als Fenster (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 46
  • 47. jQuery Mobile 1.3 Kompendium Navigationen - Popup Allgemein (v1.2) Popup - Allgemein Um ein Popup zu erstellen, muss man das Attribut data-role="popup" zu dem DIV hinzufügen, welches den Inhalt des Popups enthält. Anschließend erzeugt man einen Link mit der ID des Popups als Linkziel und dem Attribut data- rel="popup". <a href="#popupBasic" data-rel="popup">Popup öffnen</a> <div data-role="popup" id="popupBasic"> <p>Das ist ein rudimentäres Popup ohne weitere Optionen<p> </div> (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 47
  • 48. jQuery Mobile 1.3 Kompendium Navigationen - Popup Tip (v1.2) Popup - Tooltip Über entsprechende Parameter erscheint das Popup als Tooltip: <p class="ui-body-d" style="padding:2em;"> Ein Absatz mit Tooltip <a href="#popupInfo" data-rel="popup" data-role="button" class="ui-icon-alt" data-inline="true" data-transition="pop" data-icon="info" data-theme="e" data-iconpos="notext">Hinweis</a> </p> <div data-role="popup" id="popupInfo" class="ui-content" data-theme="e" style="max-width:350px;"> <p>Hier sehen Sie <strong>kleines Popup</strong> welches als Tooltip eingesetzt wird. Sollte der Text länger werden, wird dies sogar mehrzeilig anzeigt.</p></div> (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 48
  • 49. jQuery Mobile 1.3 Kompendium Navigationen - Popup Lightbox (v1.2) Popup - Lightbox Lightboxes lassen sich leicht (inkl. Close- Button) realisieren: <a href="#popupPhoto" data-rel="popup" data-position-to="window" data-transition="fade"> <img class="popphoto" src="photo.jpg" alt="Office typovision" style="width:50%; padding-left:10px;"></a> <div data-role="popup" id="popupPhoto" data-overlay-theme="a" data-theme="d" data-corners="false"> <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a> <img class="popphoto" src="photo.jpg" style="max-height:512px;" alt="Office typovision"> </div> (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 49
  • 50. jQuery Mobile 1.3 Kompendium Navigationen - Popup Menü (v1.2) Popup - Menü Popup-Menüs werden in listviews platziert: <a href="#popupMenu" data-rel="popup" data-role="button" data-inline="true" data-transition="slideup" data-icon="gear" data-theme="e">Aktionen...</a> <div data-role="popup" id="popupMenu" data-theme="d"> <ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="d"> <li data-role="divider" data-theme="e"> Aktionen w&auml;hlen</li> <li><a href="#">Details ansehen</a></li> <li><a href="#">Editieren</a></li> ... </ul> </div> Für ein verschachteltes Menü wird ein Akkordio-Widgetn in einem listview platziert. (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 50
  • 51. jQuery Mobile 1.3 Kompendium Navigationen - Popup Formulare (v1.2) Popup - Formulare Es sind auch Formulare möglich, die als Popup aufgehen: <a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="check" data-theme="a" data-transition="pop">Anmelden</a> <div data-role="popup" id="popupMenu" data-theme="a"><div data- role="popup" id="popupLogin" data-theme="a" class="ui-corner- all"><form><div style="padding:10px 20px;"><h3>Bitte ausf&uuml;llen</h3><label for="un" class="ui-hidden- accessible">Username:</label> <input type="text" name="user" id="un" value="" placeholder="username" data-theme="a"> <label for="pw" class="ui-hidden-accessible">Password:</label> <input type="password" name="pass" id="pw" value="" placeholder="password" data-theme="a"> <button type="submit" data-theme="b" data-icon="check">Anmelden</button></div></ form></div></div> (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 51
  • 52. jQuery Mobile 1.3 Kompendium Navigationen - Popup Dialoge (v1.2) Popup - Dialoge Will man Dialoge „erzwingen“, muss man das Attribut data-dismissible einsetzen: <a href="#popupDialog" data-rel="popup" data-position- to="window" data-role="button" data-inline="true" data- transition="pop" data-icon="delete" data-theme="b">Seite löschen...</a> <div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all"><div data-role="header" data-theme="a" class="ui-corner-top"><h1>Seite löschen?</h1></div><div data- role="content" data-theme="d" class="ui-corner-bottom ui- content"><h3 class="ui-title">Sind Sie wirklich sicher, dass Sie die Seite löschen wollen?</h3><p>Dies kann nicht rückgängig gemacht werden.</p><a href="#" data-role="button" data- inline="true" data-rel="back" data-theme="c">Cancel</a> <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">Löschen</a></div></div> (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 52
  • 53. jQuery Mobile 1.3 Kompendium Navigationen - Popup Dialoge - Close (v1.2) Popup - Dialoge - Close Um einen Schließen-Button einzusetzen, benötigt man das Attribut data-rel und eine entsprechende Klasse: <a href="#popupCloseRight" data-rel="popup" data-role="button" data- inline="true">Rechter Schließen-Button</a> <a href="#popupCloseLeft" data-rel="popup" data-role="button" data- inline="true">Linker Schließen-Button</a> <div data-role="popup" id="popupCloseRight" class="ui-content" style="max-width:280px"> <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn- right">Schließen</a> <p>Hier ist der Schließen-Button rechts oben.</p> </div> <div data-role="popup" id="popupCloseLeft" class="ui-content" style="max-width:280px"> <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn- left">Schließen</a> <p>Hier ist der Schließen-Button rechts links.</p> </div> (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 53
  • 54. jQuery Mobile 1.3 Kompendium Navigationen - Popup - Beispiel Skalierung (v1.2) Popup - Beispiel Skalierung • Gegeben ist ein DIV mit data-role="popup" und class="photopopup". Der Handler wird an den popupbeforeposition Event gebunden, welcher dafür sorgt, dass das Bild vor dem Anzeigen sklaiert wird, sondern auch bei einem Resize. Zusätzlich wird das Bild so verkleinert, dass es einen 30px Rand rundherum hat. $( document ).on( "pageinit", function() { $( ".photopopup" ).on({ popupbeforeposition: function() { var maxHeight = $( window ).height() - 60 + "px"; $( ".photopopup img" ).css( "max-height", maxHeight ); } }); }); (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 54
  • 55. jQuery Mobile 1.3 Kompendium Navigationen - Popup - History Tracking (v1.2) Popup - History Tracking • Grundsätzlich verändert ein Popup die History, da eine neue Seite aufgerufen wird. Will man das nicht, kann man das History Tracking gezielt abschalten: /* Data-Attribut */ data-history="false" /* oder direkt per API */ $( ".selector" ).popup({ history: false }); (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 55
  • 56. jQuery Mobile 1.3 Kompendium Navigationen - Popup - API (v1.2) Popup - API • Die vollständige Popup-API befindet sich unter der folgenden URL: http://api.jquerymobile.com/popup/ (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 56
  • 57. Panels Bereiche (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 57
  • 58. jQuery Mobile 1.3 Kompendium Panels - Markup 1 (v1.3) Panels Markup 1 • Panels werden parallel zu header, content und footer notiert. Und zwar immer vor oder nach (nie zwischen) diesen. <div data-role="page"> <div data-role="panel" id="leftpanel1" data-position="left" data- display="overlay" data-theme="a"> <h3>Left Panel: Overlay</h3> <a href="#demo-links" data-rel="close" data-role="button" data- theme="a" data-icon="delete" data-inline="true">Close</a> </div> <div data-role="header">...</div> <div data-role="content"> <a href="#leftpanel1" data-role="button" data-inline="true" data- mini="true">Overlay</a> </div> <div data-role="footer">...</div> </div> (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 58
  • 59. jQuery Mobile 1.3 Kompendium Panels - Markup 2 (v1.3) Panels Markup 2 • Über data-position="left" (oder "right") wird die Seite definiert, an der das Panel eingeblendet wird. • Mit data-display="overlay" wird das Panel über den Content gelegt. • Über data-display="reveal" lässt den Content „wegschieben“. • Mit data-display="push" drückt das Panel den Content weg. (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 59
  • 60. jQuery Mobile 1.3 Kompendium Panels - Eigenschaften 1 (v1.3) Panels - Eigenschaften 1 • Um ein Panel zu schließen kann man ausserhalb des Panels Klicken oder Tappen oder eine Swipe-Geste ausführen. Will man das nicht, kann man das Attribut data-swipe-close="false" bzw. data- dismissible="false" auf das Panel anwenden • Schließen kann man das Panel entweder per HTML oder per JS: <a href="#my-header" data-rel="close">Close panel</a> $( "#idofpanel" ).panel( "close" ); (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 60
  • 61. jQuery Mobile 1.3 Kompendium Panels - Eigenschaften 2 (v1.3) Panels - Eigenschaften 2 • Sobald man dynamisch Content zum Panel hinzugefügt oder versteckten Content sichbar machen will, wenn das Panel offen ist, muss man den „updatelayout“ Event trigger $( "#mypanel" ).trigger( "updatelayout" ); • Öffnen kann man ein Panel entweder per HTML oder JS: <a href="#leftpanel1" data-role="button" data- inline="true" data-mini="true">Overlay</a> $( "#idofpanel" ).panel( "open" , optionsHash ); • Die Panel-API befindet sich hier: http://api.jquerymobile.com/panel/ (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 61
  • 62. jQuery Mobile 1.3 Kompendium Panels - Responsive (v1.3) Panels - Responsive • @media (min-width:35em){ .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content- fixed-toolbar-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content- fixed-toolbar-position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap- position-left, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap- position-left { margin-right: 17em;} .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content- fixed-toolbar-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content- fixed-toolbar-position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap- position-right, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap- position-right { margin-left: 17em; } .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push, .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal { width: auto; } .ui-responsive-panel .ui-panel-dismiss-display-push { display: none;} } (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 62
  • 63. jQuery Mobile 1.3 Kompendium Panels - Öffnen per Swipe - HTML (v1.3) Panels - Öffnen per Swipe - HTML <div data-role="page" id="demo-page" data-theme="d" data-url="demo-page"> <div data-role="header" data-theme="b"> <h1>Nach rechts oder links swipen</h1> <a href="#left-panel" data-theme="d" data-icon="arrow-r" data-iconpos="notext" data- shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Linkes Panel oeffnen</a> <a href="#right-panel" data-theme="d" data-icon="arrow-l" data-iconpos="notext" data- shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Rechtes Panel oeffnen</a> </div><!-- /header --> <div data-role="content"> Nach rechts oder links swipen </div><!-- /content --> <div data-role="panel" id="left-panel" data-theme="b"> <p>Linkes Panel mit reveal</p> <a href="#" data-rel="close" data-role="button" data-mini="true" data-inline="true" data- icon="delete" data-iconpos="right">Close</a> </div><!-- /panel --> <div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="c"> <p>Rechtes Panel mit push.</p> <a href="#" data-rel="close" data-role="button" data-mini="true" data-inline="true" data- icon="delete" data-iconpos="right">Close</a> </div><!-- /panel --> </div> (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 63
  • 64. jQuery Mobile 1.3 Kompendium Panels - Öffnen per Swipe - JavaScript (v1.3) Panels - Öffnen per Swipe - JavaScript $( document ).on( "pageinit", "#demo-page", function() { $( document ).on( "swipeleft swiperight", "#demo-page", function( e ) { // Überprüfung, ob auf der Seite bereits ein Panel offen ist // Ansonsten würde das Schließen des einen Panels das andere öffnen if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) { if ( e.type === "swipeleft" ) { $( "#right-panel" ).panel( "open" ); } else if ( e.type === "swiperight" ) { $( "#left-panel" ).panel( "open" ); } } }); }); (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 64
  • 65. jQuery Mobile 1.3 Kompendium Panels - Öffnen per Swipe - CSS (v1.3) Panels - Öffnen per Swipe - CSS /* Swipe funktioniert ebenfalls mit der Maus - daher muss die Selektion des Textes ausgeschaltet werden */ #demo-page * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } /* Pfeile im Header */ #demo-page .ui-header .ui-btn { background: none; border: none; top: 9px; } #demo-page .ui-header .ui-btn-inner { border: none; } .back-btn { float: right; margin: 0 2em 1em 0; } (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 65
  • 66. Toolbars Header und Footer Toolbars (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 66
  • 67. jQuery Mobile 1.3 Kompendium Toolbars - Header Bar 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 Default-Backbutton, muss erst einschalten weden (s.u.) (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 67
  • 68. jQuery Mobile 1.3 Kompendium Toolbars - Header Bar - Title 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 68
  • 69. jQuery Mobile 1.3 Kompendium Toolbars - Header Bar - Fixed Position 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 69
  • 70. jQuery Mobile 1.3 Kompendium Toolbars - Header Toolbar - Buttons 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 70
  • 71. jQuery Mobile 1.3 Kompendium Toolbars - Header Toolbar - Buttons 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 71
  • 72. jQuery Mobile 1.3 Kompendium Toolbars - Header Toolbar - Buttons Header Toolbar - 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 72
  • 73. jQuery Mobile 1.3 Kompendium Toolbars - Segmentierte Toolbar 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 73
  • 74. jQuery Mobile 1.3 Kompendium Toolbars - UI Bar 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 74
  • 75. jQuery Mobile 1.3 Kompendium Toolbars - Navbar Navbar • Toolbar mit einer „Navbar“: <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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 75
  • 76. jQuery Mobile 1.3 Kompendium Toolbars - Icons Icons Übersicht über die verfügbaren Icons: http://view.jquerymobile.com/master/docs/widgets/icons/ (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 76
  • 77. jQuery Mobile 1.3 Kompendium Toolbars - Aktiver Button 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 77
  • 78. jQuery Mobile 1.3 Kompendium Toolbars - Custom Icons 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 78
  • 79. Buttons Klick & Action (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 79
  • 80. jQuery Mobile 1.3 Kompendium Buttons - Arten Button - 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 80
  • 81. jQuery Mobile 1.3 Kompendium Buttons - Automatische Umwandlung stoppen Button - Automatische Umwandlung stoppen • 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 81
  • 82. jQuery Mobile 1.3 Kompendium Buttons - Icons Icons • http://view.jquerymobile.com/master/docs/widgets/icons/ • 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 82
  • 83. jQuery Mobile 1.3 Kompendium Buttons - Icon Positionierung Icon Positionierung <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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 83
  • 84. jQuery Mobile 1.3 Kompendium Buttons - Gruppierung Button 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 84
  • 85. jQuery Mobile 1.3 Kompendium Buttons - Effekte Button Effekte • Button-Effekte: <a href="#" data-role="button" data-shadow="false" data-corners="false">Help</a> (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 85
  • 86. Formulare Interaktion (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 86
  • 87. jQuery Mobile 1.3 Kompendium Formulare - Grundlagen Grundlagen • Basis-Markup <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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 87
  • 88. jQuery Mobile 1.3 Kompendium Formulare - Fieldcontainer Fieldcontainer • Markup <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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 88
  • 89. jQuery Mobile 1.3 Kompendium Formulare - Felder Formular 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 89
  • 90. jQuery Mobile 1.3 Kompendium Formulare - Felder Formular Felder • Datum-Optionen: 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="fieldcontainer"> <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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 90
  • 91. jQuery Mobile 1.3 Kompendium Formulare - Select Select • 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 91
  • 92. jQuery Mobile 1.3 Kompendium Formulare - Select Select • 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 92
  • 93. jQuery Mobile 1.3 Kompendium Formulare - Radio-Buttons Radio-Buttons • Radio-Buttons vertikal (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> (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 93
  • 94. jQuery Mobile 1.3 Kompendium Formulare - Radio-Buttons Radio-Buttons • Radio-Buttons horizontal <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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 94
  • 95. jQuery Mobile 1.3 Kompendium Formulare - Checkboxen Checkboxen • Checkboxen vertikal (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> (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 95
  • 96. jQuery Mobile 1.3 Kompendium Formulare - Checkboxen Checkboxen • Checkboxen horizontal <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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 96
  • 97. jQuery Mobile 1.3 Kompendium Formulare - Slider Slider • Slider Markup <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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 97
  • 98. jQuery Mobile 1.3 Kompendium Formulare - Range-Slider (v1.3) Range-Slider • Range - Slider Markup <form> <div data-role="rangeslider"> <label for="range-1a">Rangeslider:</label> <input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40"> <label for="range-1b">Rangeslider:</label> <input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80"> </div> </form> • Zahlreiche weitere Optionen: http://view.jquerymobile.com/1.3.0/docs/widgets/ sliders/rangeslider.php (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 98
  • 99. jQuery Mobile 1.3 Kompendium Formulare - Switch Switch • Switch Markup <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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 99
  • 100. Listen Paradigmen (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 100
  • 101. jQuery Mobile 1.3 Kompendium Listen - Normale Listen 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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 101
  • 102. jQuery Mobile 1.3 Kompendium Listen - Trenner Trenner • Trenner über data-role: <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) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 102
  • 103. jQuery Mobile 1.3 Kompendium Listen - Autodivider (v1.2) Autodivider • Automatische Trenner über data-autodividers (es erfolgt aber keine Sortierung): <div data-role="content"> <ul data-role="listview" data-autodividers="true"> <li>jQuery</li> <li>jQuery Mobile</li> <li>Flow</li> <li>Neos</li> <li>TYPO3</li> </ul> </div> (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 103
  • 104. jQuery Mobile 1.3 Kompendium Listen - Interaktive Listen Interaktive Listen • Interaktivität durch Verlinkung: <div data-role="content"> <ul data-role="listview"> <li><a href="#page2">Interner Link</a></li> <li><a href="other.html">Externer Link</a></li> <li><a href="http://www.typovision.de">Absoluter externer Link</a></li> <li><a href="tel:+13051010200">Telefon</a></li> <li><a href="javascript:alert('Hi!')">JavaScript link</a></li> </ul> </div> (c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 104