jQuery Mobile 1.3  Kompendium              22.03.2013Patrick Lobacher (GF typovision GmbH)
EinführungIn jQuery Mobile(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de...
jQuery Mobile 1.3 Kompendium Einführung - Das Mobile Web          Das mobile Web - Mythen             • Es gibt kein mobil...
jQuery Mobile 1.3 Kompendium Einführung - Mobile Lösungen          Mobile Lösungen                                        ...
jQuery Mobile 1.3 Kompendium Einführung - Mobile Frameworks          Mobile Frameworks(c) 2013 - typovision GmbH | jQuery ...
jQuery Mobile 1.3 Kompendium Einführung - Was ist jQuery Mobile?          Was ist jQuery Mobile?             • jQuery Mobi...
jQuery Mobile 1.3 Kompendium Einführung - Progressive Enhancement?          Progressive enhancement?             • Basis-I...
jQuery Mobile 1.3 Kompendium Einführung - Was ist jQuery Mobile NICHT?          Was ist jQuery Mobile NICHT?             •...
jQuery Mobile 1.3 Kompendium Einführung - jQuery Mobile Shortfacts          jQuery Mobile Shortfact             • Erfunden...
jQuery Mobile 1.3 Kompendium Einführung - jQuery Mobile Überblick          jQuery Mobile Überblick             • jQuery Mo...
jQuery Mobile 1.3 Kompendium Einführung - jQuery Mobile Kompatibilität          jQuery Mobile Kompatibilität(c) 2013 - typ...
jQuery Mobile 1.3 Kompendium Einführung - jQuery Mobile Kompatibilität          jQuery Mobile Kompatibilität(c) 2013 - typ...
jQuery Mobile 1.3 Kompendium Einführung - HTML5/CSS3          HTML5/CSS3             • jQuery Mobile verwendet einige     ...
jQuery Mobile 1.3 Kompendium Einführung - Emulatoren          Emulatoren                 • Für Mac OS X gibt es mit Xcode ...
jQuery Mobile 1.3 Kompendium Einführung - Emulatoren          Emulatoren                 •   http://www.mobilexweb.com/emu...
Getting startedJetzt geht‘s los :-)(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typo...
jQuery Mobile 1.3 Kompendium Getting started - Einbindung          jQuery Mobile einbinden             • Entweder über den...
jQuery Mobile 1.3 Kompendium Getting started - Einbindung          jQuery Mobile einbinden             • (Bevorzugt ist di...
jQuery Mobile 1.3 Kompendium Getting started - HTML5 Grundgerüst          HTML5 Grundgerüst          <!DOCTYPE html>      ...
jQuery Mobile 1.3 Kompendium Getting started - Meta-Daten / Viewport          Meta-Daten             • Angaben für den Vie...
jQuery Mobile 1.3 Kompendium Getting started - Meta-Daten / Fullscreen-Modus          Meta-Daten             • Angaben zum...
jQuery Mobile 1.3 Kompendium Getting started - Webclips Icons          Webclips Icons          Für alle Icon-Größen und/od...
jQuery Mobile 1.3 Kompendium Getting started - Architektur          Architektur             • Cards & Roles               ...
jQuery Mobile 1.3 Kompendium Getting started - Rollen          Rollen in jQuery Mobile 1.3                             Defi...
jQuery Mobile 1.3 Kompendium Getting started - Seitenstruktur          Seitenstruktur          data-role ist NICHT mandato...
jQuery Mobile 1.3 Kompendium Getting started - Ablauf          Ablauf                                                     ...
jQuery Mobile 1.3 Kompendium Getting started - jQuery Mobile Enhancement          Das macht jQuery Mobile aus der Seite (E...
jQuery Mobile 1.3 Kompendium Getting started - Theming          Theming             • Alle Elemente werden über ein Theme ...
Multi-PageMehrere Seiten ineinem Dokument(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | ww...
jQuery Mobile 1.3 Kompendium Multi-Page - Template          Multi-Page Template          Weitere Seiten über separate DIVs...
jQuery Mobile 1.3 Kompendium Multi-Page - Seitentitel          Seitentitel             • Wenn ein Wert für data-title exis...
jQuery Mobile 1.3 Kompendium Multi-Page - Verlinkung          Verlinkung             • Wenn man auf HTML-Dokumente verlink...
NavigationenLinks, Links, Links :-)(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typo...
jQuery Mobile 1.3 Kompendium Navigationen - Link-Arten          Link-Arten             • In jQuery Mobile werden vier Link...
jQuery Mobile 1.3 Kompendium Navigationen - Interne Links          Interne Links                                          ...
jQuery Mobile 1.3 Kompendium Navigationen - Interne Links                                                                 ...
jQuery Mobile 1.3 Kompendium Navigationen - data-url          data-url             • Das Attribut data-url wird beim „Anre...
jQuery Mobile 1.3 Kompendium Navigationen - Externe jQm Request          Externer jQm Request             • jQuery Mobile ...
jQuery Mobile 1.3 Kompendium Navigationen - Transitions          Transitions (Übergänge)             • jQuery Mobile verfü...
jQuery Mobile 1.3 Kompendium Navigationen - Transitions          Transitions (Übergänge)             • Eine Transition kan...
jQuery Mobile 1.3 Kompendium Navigationen - Dialoge vs. Seiten          Dialoge vs. Seiten             • Dialoge sind Seit...
jQuery Mobile 1.3 Kompendium Navigationen - ActionSheets          Action Sheets             • Action Sheets sind Dialoge d...
jQuery Mobile 1.3 Kompendium Navigationen - Externe Links          Externe Links             • Damit der jQuery Mobile „Ab...
jQuery Mobile 1.3 Kompendium Navigationen - Externe absolute Links          Externe absolute Links werden wie folgt erzeug...
jQuery Mobile 1.3 Kompendium Navigationen - Mobile Spezial-Links          Mobile Spezial-Links             • Starten der T...
PopupsSeiten als Fenster(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de |...
jQuery Mobile 1.3 Kompendium Navigationen - Popup Allgemein (v1.2)          Popup - Allgemein          Um ein Popup zu ers...
jQuery Mobile 1.3 Kompendium Navigationen - Popup Tip (v1.2)          Popup - Tooltip          Über entsprechende Paramete...
jQuery Mobile 1.3 Kompendium Navigationen - Popup Lightbox (v1.2)          Popup - Lightbox          Lightboxes lassen sic...
jQuery Mobile 1.3 Kompendium Navigationen - Popup Menü (v1.2)          Popup - Menü          Popup-Menüs werden in listvie...
jQuery Mobile 1.3 Kompendium Navigationen - Popup Formulare (v1.2)          Popup - Formulare          Es sind auch Formul...
jQuery Mobile 1.3 Kompendium Navigationen - Popup Dialoge (v1.2)          Popup - Dialoge          Will man Dialoge „erzwi...
jQuery Mobile 1.3 Kompendium Navigationen - Popup Dialoge - Close (v1.2)          Popup - Dialoge - Close          Um eine...
jQuery Mobile 1.3 Kompendium Navigationen - Popup - Beispiel Skalierung (v1.2)          Popup - Beispiel Skalierung       ...
jQuery Mobile 1.3 Kompendium Navigationen - Popup - History Tracking (v1.2)          Popup - History Tracking             ...
jQuery Mobile 1.3 Kompendium Navigationen - Popup - API (v1.2)          Popup - API             • Die vollständige Popup-A...
PanelsBereiche(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.201...
jQuery Mobile 1.3 Kompendium Panels - Markup 1 (v1.3)          Panels Markup 1             • Panels werden parallel zu hea...
jQuery Mobile 1.3 Kompendium Panels - Markup 2 (v1.3)          Panels Markup 2             • Über data-position="left" (od...
jQuery Mobile 1.3 Kompendium Panels - Eigenschaften 1 (v1.3)          Panels - Eigenschaften 1             • Um ein Panel ...
jQuery Mobile 1.3 Kompendium Panels - Eigenschaften 2 (v1.3)          Panels - Eigenschaften 2             • Sobald man dy...
jQuery Mobile 1.3 Kompendium Panels - Responsive (v1.3)          Panels - Responsive             •   @media (min-width:35e...
jQuery Mobile 1.3 Kompendium Panels - Öffnen per Swipe - HTML (v1.3)          Panels - Öffnen per Swipe - HTML          <d...
jQuery Mobile 1.3 Kompendium Panels - Öffnen per Swipe - JavaScript (v1.3)          Panels - Öffnen per Swipe - JavaScript...
jQuery Mobile 1.3 Kompendium Panels - Öffnen per Swipe - CSS (v1.3)          Panels - Öffnen per Swipe - CSS          /* S...
ToolbarsHeader und FooterToolbars(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovi...
jQuery Mobile 1.3 Kompendium Toolbars - Header Bar          Header Bar             • Normale Header Toolbar:              ...
jQuery Mobile 1.3 Kompendium Toolbars - Header Bar - Title          Header Bar - Title             • Auf den Header/Footer...
jQuery Mobile 1.3 Kompendium Toolbars - Header Bar - Fixed Position          Header Bar - Fixed Position             • Übe...
jQuery Mobile 1.3 Kompendium Toolbars - Header Toolbar - Buttons          Header Toolbar - Buttons             • Toolbar m...
jQuery Mobile 1.3 Kompendium Toolbars - Header Toolbar - Buttons          Header Toolbar - Buttons             • Button oh...
jQuery Mobile 1.3 Kompendium Toolbars - Header Toolbar - Buttons          Header Toolbar - Back-Button             • Zufüg...
jQuery Mobile 1.3 Kompendium Toolbars - Segmentierte Toolbar          Segmentierte Toolbar          <div data-role="header...
jQuery Mobile 1.3 Kompendium Toolbars - UI Bar          UI Bar          Toolbar mit einer „UI-Bar“:          <div data-rol...
jQuery Mobile 1.3 Kompendium Toolbars - Navbar          Navbar             • Toolbar mit einer „Navbar“:                 <...
jQuery Mobile 1.3 Kompendium Toolbars - Icons          Icons          Übersicht über die          verfügbaren Icons:      ...
jQuery Mobile 1.3 Kompendium Toolbars - Aktiver Button          Aktiver Button             • Aktiver Button mittels:      ...
jQuery Mobile 1.3 Kompendium Toolbars - Custom Icons          Custom Icons             • Verwendung von eigenen Icons (bei...
ButtonsKlick & Action(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22...
jQuery Mobile 1.3 Kompendium Buttons - Arten          Button - Arten             • Mögliche Arten:                 <a href...
jQuery Mobile 1.3 Kompendium Buttons - Automatische Umwandlung stoppen          Button - Automatische Umwandlung stoppen  ...
jQuery Mobile 1.3 Kompendium Buttons - Icons          Icons             • http://view.jquerymobile.com/master/docs/widgets...
jQuery Mobile 1.3 Kompendium Buttons - Icon Positionierung          Icon Positionierung          <a href="#" data-role="bu...
jQuery Mobile 1.3 Kompendium Buttons - Gruppierung          Button Gruppierung             • Button-Gruppierung:          ...
jQuery Mobile 1.3 Kompendium Buttons - Effekte          Button Effekte             • Button-Effekte:                 <a hr...
FormulareInteraktion(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22....
jQuery Mobile 1.3 Kompendium Formulare - Grundlagen          Grundlagen             • Basis-Markup                 <form a...
jQuery Mobile 1.3 Kompendium Formulare - Fieldcontainer          Fieldcontainer             • Markup                 <form...
jQuery Mobile 1.3 Kompendium Formulare - Felder          Formular Felder             • Mögliche Feld-Arten:               ...
jQuery Mobile 1.3 Kompendium Formulare - Felder          Formular Felder             • Datum-Optionen:                 dat...
jQuery Mobile 1.3 Kompendium Formulare - Select          Select             • Select-Elemente (Mehrfachauswahl mit multipl...
jQuery Mobile 1.3 Kompendium Formulare - Select          Select             • Select-Elemente mit eigener ( jQuery Mobile)...
jQuery Mobile 1.3 Kompendium Formulare - Radio-Buttons          Radio-Buttons             • Radio-Buttons vertikal        ...
jQuery Mobile 1.3 Kompendium Formulare - Radio-Buttons          Radio-Buttons             • Radio-Buttons horizontal      ...
jQuery Mobile 1.3 Kompendium Formulare - Checkboxen          Checkboxen             • Checkboxen vertikal                 ...
jQuery Mobile 1.3 Kompendium Formulare - Checkboxen          Checkboxen             • Checkboxen horizontal               ...
jQuery Mobile 1.3 Kompendium Formulare - Slider          Slider             • Slider Markup                 <div data-role...
jQuery Mobile 1.3 Kompendium Formulare - Range-Slider (v1.3)          Range-Slider             • Range - Slider Markup    ...
jQuery Mobile 1.3 Kompendium Formulare - Switch          Switch             • Switch Markup                 <label for="al...
ListenParadigmen(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2...
jQuery Mobile 1.3 Kompendium Listen - Normale Listen          Normale Listen             • Normale Listen:                ...
jQuery Mobile 1.3 Kompendium Listen - Trenner          Trenner             • Trenner über data-role:                 <div ...
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
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
Nächste SlideShare
Wird geladen in …5
×

jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten

7.201 Aufrufe

Veröffentlicht am

jQuery Mobile 1.3 - Das ausführliche und hochaktuelle Kompendium mit 200 Seiten von Patrick Lobacher (CEO typovision GmbH)

Veröffentlicht in: Technologie
1 Kommentar
4 Gefällt mir
Statistik
Notizen
  • Klasse,wie immer, danke!
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
Keine Downloads
Aufrufe
Aufrufe insgesamt
7.201
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
40
Aktionen
Geteilt
0
Downloads
151
Kommentare
1
Gefällt mir
4
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten

  1. 1. jQuery Mobile 1.3 Kompendium 22.03.2013Patrick Lobacher (GF typovision GmbH)
  2. 2. EinführungIn jQuery Mobile(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 2
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 16. Getting startedJetzt geht‘s los :-)(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 16
  17. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 29. Multi-PageMehrere Seiten ineinem Dokument(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 29
  30. 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. 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. 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. 33. NavigationenLinks, Links, Links :-)(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 33
  34. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 46. PopupsSeiten als Fenster(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 46
  47. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 57. PanelsBereiche(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 57
  58. 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. 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. 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. 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. 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. 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. 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. 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. 66. ToolbarsHeader und FooterToolbars(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 66
  67. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 79. ButtonsKlick & Action(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 79
  80. 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. 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. 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. 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. 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. 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. 86. FormulareInteraktion(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 86
  87. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 100. ListenParadigmen(c) 2013 - typovision GmbH | jQuery Mobile 1.3 Kompendium | Patrick Lobacher | www.typovision.de | 22.03.2013 100
  101. 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. 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

×