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
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
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
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
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