jQuery Mobile ist das führende Framework zur Erstellung von mobilen Websites. Das über 150 Seiten umfassende Kompendium behandelt alle Elemente der aktuelle Version 1.1.0 und führt mit zahlreichen Beispielen und Code-Examples umfassend in die Verwendung ein.
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
1. JQUERY MOBILE
Kompakt
16.05.2012
Patrick Lobacher (GF typovision GmbH)
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 1
2. EINFÜHRUNG
in jQuery Mobile
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 2
3. DAS MOBILE WEB - MYTHEN
• Es gibt kein mobiles Web - es gibt nur das Web ansich?!
• Man benötigt keine spezielle Anpassung für das mobile Web?!
• Eine Website sollte auf allen Zugangsgeräten funktionieren?!
• Um eine mobile Website zu erstellen, genügt es mit einer Breite von
240px zu arbeiten?!
• => Neue Herausforderungen im mobilen Bereich
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 3
4. MOBILE LÖSUNGEN
Mobile Framework
Kompatible Website Optimierte Website
(Web-Technologie, optimiert für
(Keine Anpassung) (Viewport, BuildIn, ...)
alle Zugangsgeräte)
Web App
Hybride App Native App
(speziell optimierte Applikation
(Web-Technologie eingebettet (eigener Code für alle
bestehend aus Web-
in nativem Rahmengerüst) Plattformen)
Technologie)
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 4
5. MOBILE FRAMEWORKS
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 5
6. WAS IST JQUERY MOBILE
• Was ist jQuery Mobile?
• jQuery Mobile: Berührungsoptimiertes Web Framework für
Smartphones & Tablets
• A unified, HTML5-based user interface system for all popular
mobile device platforms, built on the rock-solid jQuery and
jQuery UI foundation. Its lightweight code is built with
progressive enhancement, and has a flexible, easily themeable
design.
• progressive enhancement <=> graceful degradation
Progressive Verbesserung <=> würdevolle Herabstufung
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 6
7. JQUERY MOBILE - PROGRESSIVE
• Progressive Enhancement?
• Basis-Inhalte sind von allen Browsern zugänglich
• Basis-Funktionalitäten sind von allen Browsern zugänglich
• Der Inhalt wird in semantischem Markup abgebildet
• Erweitertes Layout wird über extern verlinkte CSS-Dateien zur
Verfügung gestellt
• Erweiterte Funktionen werden über extern verlinkte,
„unaufdringliche“ JS-Dateien realisiert
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 7
8. WAS IST JQUERY MOBILE NICHT
• Was ist jQuery Mobile NICHT?
• jQuery Mobile ist keine jQuery-Alternative für mobile Browser
• Um jQuery Mobile zu benutzen, muss das jQuery Framework eingebunden
werden. Es ist kein Ersatz, sondern ein UI-Layer auf Basis von jQuery
• jQuery Mobile ist kein Webapp-SDK
• Man kann damit natürlich komplette Web-Apps erstellen - die allerdings
erst mit Hybrid-Frameworks wie PhoneGap „nativ“ werden
• jQuery Mobile ist kein Framework für JavaScript Liebhaber
• Ausser für erweiterte Themen, wird kein JavaScript benötigt
• jQuery Mobile ist NICHT die Lösung für ALLE mobile Applikationen,
Websites oder Spiele
• Aber für die meisten :-)
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 8
9. JQUERY MOBILE GESCHICHTE
• Erfunden 2010 vom Team rund um Jon Resig ( jQuery Team)
• John Resig, JavaScript Tool Entwickler für die Mozilla Corporation
(@jeresig auf Twitter)
• Dual Lizenz: GPL oder MIT
• jquerymobile.com
• Aktuelle Version: 1.1.0 (13.04.2012)
• Größe: 19 KB (130 KB)
• (Größe jQuery: 32 KB / 247 KB - Gesamt: 51 KB / 377 KB)
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 9
10. JQUERY MOBILE FEATURE
• jQuery Mobile Feature List
• Cross platform, cross device, and cross browser
• UI optimized for touch devices
• Themeable and customizable design
• Usage of nonintrusive semantic HTML5 code only, without the need of any
Java-Script, CSS, or API knowledge
• AJAX calls automatically to load dynamic content
• Built on the well-known and supported jQuery core
• Lightweight size, 12Kb compressed
• Progressive enhancement
• Accessibility support (http://www.w3.org/TR/wai-aria/)
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 10
11. JQUERY MOBILE KOMPATIBILITÄT
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 11
12. JQUERY MOBILE KOMPATIBILITÄT
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 12
13. HTML5
• jQuery Mobile verwendet einige der HTML5/CSS3-Features direkt
und kann mit folgenden gut integriert werden:
• Offline access
• Offline storage
• Web sockets
• Geolocation access
• Accelerometer and gyroscope support
• Animations
• 2D and 3D transformations
• Gradients and visual effects
• Viewport management (for zooming support inside the browser)
• Webapp installation metadata
• Integration with native applications
• Multimedia support
• Graphic drawing (vector and bitmap)
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 13
14. EMULATOREN
• http://www.mobilexweb.com/emulators
• z.B. Android: http://developer.android.com/sdk/index.html
• Download
• Start der Datei „android“
im Verzeichnis „tools“
• Download der Updates
• Tools > Manage AVDs
• NIE ohne Endgerät oder Emulator testen!!
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 14
15. GETTING STARTED
Jetzt geht‘s los :-)
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 15
16. JQUERY MOBILE EINBINDEN
• Download von http://jquerymobile.com/download/
<link rel="stylesheet" href="http://code.jquery.com/mobile/
1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></
script>
<script src="http://code.jquery.com/mobile/1.1.0/
jquery.mobile-1.1.0.min.js"></script>
• Einbindung von LATEST (nur zu Testzwecken):
<link href="http://code.jquery.com/mobile/latest/
jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.pack.js"></
script>
<script src="http://code.jquery.com/mobile/latest/
jquery.mobile.min.js"></script>
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 16
18. META-DATEN
• Angaben für den Viewport
<meta name="viewport" content="width=device-width; initial-
scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
width = Wert in Pixel oder device-width
initial-scale = Wert der initialen Skalieren (1.0 für normal)
maximum-scale = Wert für die maximal mögliche Skalierung
minimum-scale = Wert für die minimal mögliche Skalierung
user-scalable = Angabe, ob der User überhaupt skalieren darf
• Angaben zum Fullscreen-Modus
<meta name="apple-mobile-web-app-capable" content="yes" />
Fullscreen Modus - kein Bottom-Controls und kein URL-Feld mehr - kann per JS über
window.navigator.standalone abgefragt werden
<meta name="apple-mobile-web-app-status-bar-style"
content="black" />
Farbe der Status-Leiste oben - diese kann nicht ausgeblendet werden
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 18
19. WEBCLIPS ICON
• Für alle Icon-Größen und/oder Devices müssen eigene Angaben
gemacht werden:
<link rel="icon" href="icons/icon32.png">
<link rel="shortcut icon" href="icons/icon32.png">
<link rel="apple-touch-icon" href="icons/icon57.png" sizes="57x57">
<link rel="apple-touch-icon" href="icons/icon114.png" sizes="114x114">
<link rel="apple-touch-icon" href="icons/icon72.png" sizes="72x72">
<link rel="apple-touch-icon" sizes="80x80" href="icons/icon80.png">
<link rel="apple-touch-icon-precomposed" sizes="android-only"
href="icons/icon57.png">
<link rel="apple-touch-startup-image" href="images/launch-iphone.png"
media="(max-device-width: 480px)">
<link rel="apple-touch-startup-image" href="images/launch-iPad-p.png"
media="screen and (min-device-width: 481px) and (max-device-width:
1024px) and (orientation:portrait)">
<link rel="apple-touch-startup-image" href="images/launch-iPad-l.png"
media="screen and (min-device-width: 481px) and (max-device-width:
1024px) and (orientation:landscape)">
=> iPhone/iPod: 320×460 / iPad Portrait: 748×1004 / iPad Landscape: 748×1024(rotated 90 degrees)
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 19
20. RESPONSIVE LAYOUTS MIT JQM
• Media-Queries z.B. um die Orientierung zu befragen:
@media (orientation: portrait) {
/* Code hier für die Orientierung Portrait... */
}
@media (orientation: landscape) {
/* Code hier für die Orientierung Landscape... */
}
=> http://www.w3.org/TR/css3-mediaqueries/
• Beim Orientierungswechsel kann es in iOS-Geräten dazu kommen, dass der Zoom nicht mehr
stimmt (iOS Bug) - dafür gibt es zwei Lösungen:
• Abschalten des Zooms
<meta name="viewport" content="width=device-width,
minimum-scale=1.0, maximum-scale=1.0">
• Dynamisches Neuberechnen des Zooms
http://adactio.com/journal/4470/
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 20
21. RESPONSIVE LAYOUTS MIT JQM
• Beispiel: Label neben Formularelemente im Landscape Mode:
@media all and (min-width: 450px){2
label.ui-input-text { display: inline-block; }
}
=> http://www.w3.org/TR/css3-mediaqueries/
• Abfrage von iOS Retina Displays
@media screen and (-webkit-min-device-pixel-ratio: 2){
// iOS Rentina Display
}
• Abfrage der Media Queries über jQuery
// Test auf Screen Media Type
$.mobile.media("screen");
// Test auf min-width
$.mobile.media("screen and (min-width: 480px)");
// Test auf iOS Retina Display
$.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)");
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 21
22. ARCHITEKTUR
• Cards & Roles
• Idee kommt von WML: Eine oder mehrere Zielseiten befinden
sich in einem HTML-Dokument
• Eine Seite ist ein DIV-Element mit einer spezielle „Rolle“
• Zugehöriges Attribut ist data-role
• (In HTML5 gibt es die data-* Attribute um spezielle, eigene
Auszeichnungen zu vergeben - „custom data attributes“)
• Vorteil: Funktioniert auch auf „Non-HTML5“-Browser
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 22
27. THEMING
• Alle Elemente werden über ein Theme dargestellt
• Default ist ein Theme enthalten, weitere müssen über den
sogenannten Theme-Roller eingebracht werden:
http://jquerymobile.com/themeroller/
• Jedes Theme ist in „Swatches“ unterteilt (unterschiedliche Optionen)
• Ansprechen über data-theme="buchstabe"
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 27
28. MULTI-PAGE
Mehrere Seiten in einem Dokument
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 28
29. MULTI-PAGE TEMPLATE
• Weitere Seiten über separate DIVs mit data-role="page" und eindeutiger ID die mittels
Anker-Link angesprungen wird. Seitentitel über data-title="Home".
• <!-- Erste Seite -->
<div data-role="page" id="home" data-title="Home">
<div data-role="header">
<h1>Willkommen!</h1>
</div>
<div data-role="content">
<a href="#contact" data-role="button">Kontakt</a>
</div>
</div>
<!-- Zweite Seite -->
<div data-role="page" id="contact" data-title="Contact">
<div data-role="header">
<h1>Kontakt</h1>
</div>
<div data-role="content">
Kontakt Infos...
</div>
<script type="text/javascript">
/* Seitenspezifisches JavaScript */
</script>
</div>
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 29
30. SEITENTITEL
1. Wenn ein Wert für data-title existiert, wird dieser für den Titel der
internen Seite verwendet.
2. Wenn kein Wert für data-title existiert, wird der Header (data-
role="header") verwendet.
3. Existiert weder ein Wert für data-title noch ein Header, wird das
<title> Element innerhalb des <head> Elements auf der Seite
verwendet.
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 30
31. VERLINKUNG
• Wenn man auf HTML-Dokumente verlinkt, die ebenfalls eine
Seitenstruktur über data-role="page" beinhalten, wird diese wie eine
interne Seite behandelt
• Enthält das externe Dokument allerdings mehrere HTML-Seiten, so
muss bei Link das Attribut rel="external" oder target="_blank"
verwendet werden
• Das führt zu einem kompletten Seiten-Refresh (und nicht einer
Animation und Vorladen per AJAX).
• Dies ist notwendig, da jQuery Mobile keine Multi-Page Dokumente in
das DOM der aktuellen Seite laden kann (Namespace Konflikte)
• Zusätzlich ist es nicht möglich, Anker im klassischen Sinn zu
verwenden, da diese als Sprungmarken für interne Seite dienen.
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 31
33. NAVIGATION
• In jQuery Mobile werden vier Link-Arten unterschieden:
• Interne Links zu einer anderen Seite die im selben Dokument
enthalten ist (Multipage-Dokument)
• Externer JQM Link zu einer anderen Seite in einem anderen
Dokument
• Externer Link zu einer Nicht-jQueryMobile Seite
• Mobile Spezial-Links
• Die ersten beiden Link-Arten verhalten sich dabei wie folgt:
• Vorladen des Inhalts (bei extern)
• Erzeugung einer Animation von der ersten zur zweiten Seite
• Trigger des Back-Buttons um zur ersten Seite zurückzukommen
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 33
34. INTERNE LINKS (#ID)
Quelle Grafik:
jQuery Mobile - Up and running
Maximiliano Firtman
O‘Reilly
ISBN: 978-1-449-39765-4
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 34
35. EXTERNER JQM REQUEST
jQuery Mobile
Page Request
Hijax-Request
Web Server
Append to DOM
Hijax-Response
Enhance Page
Transition
Hijax: http://en.wikipedia.org/wiki/Hijax
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 35
36. DATA-URL
• Das Attribut data-url wird beim „Anreichern“ an die Seite gebunden
• Der Wert entspricht dem eindeutigen Locator (ID) und wird in der
URL-Zeile des Browsers angezeigt
• Per Default verwendet jQuery Mobile hierfür die URL der Seite
• Allerdings kann man diesen Wert gezielt überschreiben indem man
das Attribut selbst setzt.
• Dies ist insbesondere nach einem Redirect sinnvoll
• Oder wenn man den Dateinamen verstecken und nur die URL-Pfad
anzeigen will
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 36
37. EXTERNE JQM REQUEST
1. jQuery Mobile parst das Attribut href lädt die Zielseite mittels eines Ajax-
Requests (Hijax).
2. Wenn die Seite erfolgreich geladen wurde, wird sie in das DOM
eingehängt
3. Ist dies erfolgreich, reichert jQuery Mobile die Seite an -inbesondere wird
das base Element erweitert und das data-url Attribut gesetzt (wenn dies
noch nicht explizit geschehen ist)
4. Nun führt das Framework eine Transition (Übergang) mit dem Typ „slide“
durch (neue Seite wird von rechts nach links animiert „reingeschoben“ und
die alte Seite schiebt sich gleichermaßen nach links raus).
5. Anschließend bekommt die aktive Seite die Klasse ui-page-active
zugewiesen
6. Schließlich wir die URL angepasst, sodaß ein Bookmark gesetzt werden
kann (pushState Feature von HTML5)
7. Schlägt das Laden fehl, wird ein „Error Loading Page“ Overlay gezeigt
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 37
38. TRANSITIONS (ÜBERGÄNGE)
1. jQuery Mobile verfügt über 9 eingebaute Transitions:
1. fade (Ausblenden/Einbleden)
2. pop (Vergrößern/Verkleinern)
3. flip (Umdrehen - wie eine Karte)
4. turn (Rausklappen/Reinklappen nach/von Links)
5. flow (Animationseffekt bekannt vom iPhone Safari beim Wechsel von Seiten)
6. slidefade (Rausfahren/Reinfahren nach/von links bei gleichzeitigem Ausblenden/Einblenden)
7. slide (Rausfahren/Reinfahren nach/von links)
8. slideup (Rausfahren/Reinfahren nach/von oben bei gleichzeitigem Ausblenden/Einblenden)
9. slidedown (Rausfahren/Reinfahren nach/von unten bei gleichzeitigem Ausblenden/Einblenden)
10. none (Keine Animation)
2. Eine Transition kann über das Attribut data-transition="[transition]"
spezifiziert werden, welches auf alle Links, Buttons und Formulare gelegt
werden kann.
3. Um eine umgekehrte Transition zu forcieren kann data-
direction="reverse" verwendet werden.
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 38
39. DIALOGE VS. SEITEN
1. Dialoge sind Seiten mit einem
abgeänderten UI
2. Die Seite wird auf dem Hintergrund platziert,
mit abgerundeten Ecken dargestellt und mit
einem Schließen-Button links oben versehen
3. Eingeleitet wird ein Dialog mit dem Attribut
<a href="#terms" data-rel="dialog"
data-transition="slidedown">AGB</a>
4. Oder aber bei der Definition
der Seite selbst
<div data-role="dialog" id="terms">
AGB
</a>
5. Dialoge können nicht gebookmarkt werden
und tauchen nicht in der History auf.
6. Dialoge können per API geschlossen werden
function processAgreement(){
// Dialog schließen
$('.ui-dialog').dialog('close');
}
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 39
40. ACTION SHEETS
1. Action Sheets sind Dialoge die von
oben animiert hereinfahren
2. Auf diesen wird meist eine User-Interaktion eingefordert
3. Technisch gesehen sind dies Dialoge,
denen Header und Footer fehlt
4. Code:
<div data-role="page" id="home">
<!-- Öffnen der Seite als Dialog -->
<a href="#logout" data-transition="slidedown">
Logout</a>
</div>
<!-- Action-Sheet durch weglassen des Headers! -->
<div data-role="dialog" id="logout">
<div data-role="content">
<span class="title">LOGOUT: Sicher?</span>
<a href="#home" data-role="button" data-theme="b">Yepp!</a>
<a href="#" data-role="button" data-theme="c" data-rel="back">Niemals!</
a>
</div>
<style>
span.title { display:block; text-align:center;
margin-top:10px; margin-bottom:20px; }
</style>
</div>
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 40
41. EXTERNE LINKS
• Damit der jQuery Mobile „Ablauf“ erhalten bleibt:
• Das Ziel muss auch eine jQuery Mobile Seite sein
• Das Ziel muss in der selben Domain liegen.
• Das Ziel darf nur eine Seite enthalten
• Wenn die Ziel-URL ein Verzeichnis ist, muss ein abschließender
Slash angeben werden => href="/clients/" .
• Das target-Attribut darf nicht angegeben werden
• Alle anderen Fälle führen zu einem „normalen“ Laden der Seite
• Vorab laden von Seiten über das Attribut data-prefetch
<a href='neueseite' data-prefetch>Lade Seite vorab</a>
• DOM-Caching (erzeugtes DOM der Seite wird gecached):
<div data-role="page" data-dom-cache="true">
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 41
42. EXTERNE ABSOLUTE LINKS
• Externe absolute Links werden wie folgt erzeugt:
• Zufügen des Attributs: data-rel="external"
<a href="http://www.typovision.de" data-rel="external">typovison</a>
• Zufügen eines target Attributs
<a href="http://www.typovision.de" target="_blank">typovison</a>
• Verweisen auf eine andere Domain
<a href="http://www.anderedomain.de">typovison</a>
• Verwenden des Attributs: data-ajax="false"
<a href="http://www.typovision.de" data-ajax="false">typovison</a>
Dieses Attribut kann auch auf die Seite selbst angewendet werden
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 42
43. MOBILE SPEZIAL-LINKS
• Es gibt einige spezielle Links:
• Starten der Telefon-App
<a href="tel:+498945205930">Rufen Sie uns an!</a>
• Facetime (nur auf iOS)
<a href="facetime:101010">Rufen Sie uns über Facetime an</a>
• Skype (nur wenn vorhanden)
<a href="skype:skype_user?call">Rufen Sie uns über Skype an</a>
• Email
<a href="mailto:info@typovision.de?subject=Kontakt&body=Das
%20ist%20der%20Inhalt">Schreiben Sie uns!</a>
• SMS
<a href="sms://+49151547266?body=SMS%20Text">Schreiben Sie uns
eine SMS</a>
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 43
45. HEADER BAR
• Normale Header Toolbar:
<div data-role="header">
<h1>Seitentitel</h1>
</div>
• Fixieren der Toolbar mittels:
<div data-role="header" data-position="fixed">
• Fullscreen-Mode mittels:
<div data-role="page" data-fullscreen="true">
(Toolbars sind verschwunden und tauchen erst bei Touch wieder auf -
gut für großflächige Seiten wie Galerien oder ähnlichem)
• Die Header Bar hat keinen Backbutton per Default, man muss diesen
einschalten (siehe später)
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 45
46. HEADER BAR - TITLE
• Auf den Header/Footer wird das
CSS-Attribut text-overflow: ellipsis
gelegt um den Titel abzuschneiden und
mit ... aufzufüllen:
<div data-role="header">
<h1>Ziemlich langer Titel</h1>
</div>
• Dies kann über folgendes CSS
verhindert werden:
.ui-header .ui-title,
.ui-footer .ui-title {
margin-right: 0 !important;
margin-left: 0 !important;
}
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 46
47. HEADER BAR - FIXED POSITION
• Über das Attribut data-position="fixed" kann die fixe Position von Header Bar
(und auch Footer Bar) emuliert werden, sodaß sie als fixiert wahrgenommen
wird
• iOS unterstützt dafür seit der Version 5.0 die CSS-Eigenschaften position:fixed,
overflow:auto sowie overflow-scrolling: touch
• Auf Android 3.0, sowie Blackberry PlayBook funktioniert dies auch innerhalb
von Block-Elementen und wurde in jQuery Mobile 1.1 nachgereicht.
• Um auf diesen Systemen richtig fixierte Toolbars zu erhalten, sollte das
Feature in jQuery Mobile eingeschaltet werden - Fallback ist immer das
Default-Verhalten:
$(document).bind('mobileinit', function() {
$.mobile.touchOverflowEnabled=true;
});
• Will man nun ausschließlich im Content-Bereich zoomen, so kann man dies
mittels touchOverflowZoomEnabled einschalten.
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 47
48. HEADER TOOLBAR - BUTTONS
• Toolbar mit einem Button:
<div data-role="header">
<a href="logout">Log out</a>
<h1>Title</h1>
</div>
• Toolbar mit zwei Buttons:
<div data-role="header">
<a href="logout">Log out</a>
<h1>Title</h1>
<a href="settings" data-icon="gear" data-
theme="b">Settings</a>
</div>
• Will man den Button rechts positionieren, kann man
class="ui-btn-right" verwenden
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 48
49. HEADER TOOLBAR - BUTTONS
• Button ohne Text:
<div data-role="header">
<h1>Header</h1>
<a href="#" data-icon="plus" data-
iconpos="notext" data-theme="b"></a>
</div>
• Zur Realisierung eines eigene Back-Buttons:
data-rel="back"
Dies stattet den Button mit einer Back-Funktion aus. Das Linkziel wird dann nicht
mehr beachtet und die Animation findet mit der Richtung „reverse“ statt.
Funktioniert nur in A- und B-Grade Browser. C-Grade Browser ignorieren das Attribut
und folgen dem Link-Ziel
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 49
50. BACK-BUTTON
• Zufügen eine Back-Buttons über folgenden Code:
• <div data-role="page" data-add-back-btn="true"
data-back-btn-text="Previous" data-back-btn-theme="e">
Button aktivieren (default ist false): data-add-back-btn="true"
Button-Text: data-back-btn-text="Previous"
Button-Theme: data-back-btn-theme="e"
• Globales Konfigurieren über JavaScript
• $(document).bind('mobileinit',function(){
$.mobile.page.prototype.options.addBackBtn = true;
$.mobile.page.prototype.options.backBtnText = "Previous";
$.mobile.page.prototype.options.backBtnTheme = "b";
});
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 50
60. BUTTONS - NATIVE BEIBEHALTEN
• Um automatische Button-Umwandlung aufzuheben, muss das Attribut
data-role="none"
verwendet werden.
• Oder über JS global deaktiviert werden:
$(document).bind('mobileinit',function(){
$.mobile.page.prototype.options.keepNative = "input, select";
});
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 60
61. BUTTON-ICONS
• ICONS:
http://jquerymobile.com/test/docs/buttons/buttons-icons.html
• Eigene ICONS:
data-icon="myapp-tweet"
<style>
.ui-icon-myapp-tweet {
background: url(icons/tweet.png)50% 50% no-repeat;
background-size: 14px 14px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.ui-icon-myapp-tweet {
background-image: url(icons-hd/tweet.png) !important;
background-size: 18px 18px;
}
}
</style>
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 61
92. EIGENE SKRIPTE
http://jquerymobile.com/themeroller/
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 92
93. THEME ROLLER
• Mit dem Theme Roller ist es möglich
ein individuelles Theme zu erstellen,
dieses runterzuladen und dann zu verwenden
• Es ist damit möglich alle Elemente individuell
zu gestalten
• In the „Global“-Settings können globale
Einstellungen getroffen werden, die in allen
Swatches gelten sollen
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 93
94. THEME ROLLER
• Es können beliebig viele Swatches hinzugefügt werden
• Man kann entweder den eingebauten Farbwähler (mit Brightness-
und Saturation-Funktion) verwenden oder Adobe Kuler
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 94
95. THEME ROLLER
• Man kann ein „altes“ Theme importieren und umwandeln lassen in
ein Theme der Version 1.1.0
• Das fertig Theme kann anschließend heruntergeladen werden
• Oder man teilt das Theme mit anderen Leuten über einen
eindeutigen Link
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 95
96. JAVASCRIPT
Und das Framework
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 96
97. EIGENE SKRIPTE
• <script src="http://code.jquery.com/
jquery-1.6.4.min.js"></script>
<script>
$(document).bind("mobileinit", function() {
// Eigener Code hier
});
</script>
<script src="http://code.jquery.com/mobile/1.0/
jquery.mobile-1.0.min.js"></script>
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 97
98. Quelle Grafik:
Pro jQuery Mobile
Brad Broulik
EVENTS 1/12
Apress
ISBN: 978-1430239666
• Um Events nachzuvollziehen, kann
man einen Event Logger als
Bookmarklet verwenden:
http://code.jquery.com/mobile/latest/
demos/tools/log-page-events.html
• mobileinit
Wenn jQuery Mobile initialisiert wird,
wird ein mobileinit Event auf das
document Objekt getriggert
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 98
99. Quelle Grafik:
Pro jQuery Mobile
Brad Broulik
EVENTS 2/12
Apress
ISBN: 978-1430239666
• pagebeforechange
Dies ist der erste Event der während
einem Seitenwechsel getriggert wird.
$( document ).bind( "pagebeforechange",
function( e, data ) {
console.log("Seitenwechsel
startet...");
// Hole die Seite
var toPage = data.toPage;
// Hole die Optionen der Seite
var options = data.options;
// Etwas mit der Seite machen
…
// z.B. Seitenwechsel abbrechen
e.preventDefault();
});
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 99
100. Quelle Grafik:
Pro jQuery Mobile
Brad Broulik
EVENTS 3/12
Apress
ISBN: 978-1430239666
• pagebeforeload
Dies ist der erste Event der während
dem Laden der Seite getriggert wird.
$( document ).bind( "pagebeforeload",
function( e, data ){
console.log("Laden der Seite
startet…");
// Manuelles Laden triggern
e.preventDefault();
// Seite laden + Einfügen ins DOM
var response = manuallyLoadPage();
if (response.status = "success") {
data.deferred.resolve( data.absUrl,
data.options,response.page);
} else {
data.deferred.reject( data.absUrl,
data.options );
}
});
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 100
101. Quelle Grafik:
Pro jQuery Mobile
Brad Broulik
EVENTS 4/12
Apress
ISBN: 978-1430239666
• pagebeforecreate
Dieser Event tritt auf, nachdem der
Seiten-Container zum DOM
hinzugefügt wurde und bevor die
Seite „angereichert“ wird.
$( "#to-page-id" ).
live( "pagebeforecreate", function()
{
console.log( "Hier sollte das Markup
geparst werden, bevor es angereichert
wird" );
});
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 101
102. Quelle Grafik:
Pro jQuery Mobile
Brad Broulik
EVENTS 5/12
Apress
ISBN: 978-1430239666
• pagecreate
Hier ist der beste Platz um Seiten-
Plugins zu initialisieren.
$( "#to-page-id" ).live( "pagecreate",
function(){
console.log("Seiten-Plugins werden
initialisiert...”);
// Initialisiere eigene Plugins
( ":jqmData(role='my-plugin') " )
.myPlugin();
});
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 102
103. Quelle Grafik:
Pro jQuery Mobile
Brad Broulik
EVENTS 6/12
Apress
ISBN: 978-1430239666
• pageinit
Event der auftritt, nachdem die
„Anreicherung“ komplett ist. Die Seite
ist nun „DOM-Ready“.
$( "#to-page-id" ).live( "pageinit",
function(){
console.log("Die Seite wurde
angereichert... ");
...
});
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 103
104. Quelle Grafik:
Pro jQuery Mobile
Brad Broulik
EVENTS 7/12
Apress
ISBN: 978-1430239666
• pageload
Event nachdem die Seite erfolgreich
ins DOM geladen wurde.
$( document ).bind( "pageload",
function( e, data ){
console.log("Seite wurde erfolgreich
ins DOM geladen...");
});
• pageloadfailed
Wird aufgerufen, wenn das Laden fehl
schlägt.
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 104
105. Quelle Grafik:
Pro jQuery Mobile
Brad Broulik
EVENTS 8/12
Apress
ISBN: 978-1430239666
• pagebeforehide
Wird auf der Seite getriggert von der
die Animation startet. Wird nur
abgefeuert, wenn der Seitenwechsel
eine dedizierte „von“ Seite besitzt.
$( "#from-page-
id" ).live( "pagebeforehide", function( e,
data ){
console.log( "Der Seitenübergang
startet jetzt..." );
});
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 105
106. Quelle Grafik:
Pro jQuery Mobile
Brad Broulik
EVENTS 9/12
Apress
ISBN: 978-1430239666
• pagebeforeshow
Wird auf der Seite getriggert zu der
die Animation führen soll. Wird nur
abgefeuert, wenn der Seitenwechsel
eine dedizierte „zu“ Seite besitzt.
$( "#from-page-
id" ).live( "pagebeforeshow", function( e,
data ){
console.log( "Der Seitenübergang
startet jetzt..." );
});
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 106
107. Quelle Grafik:
Pro jQuery Mobile
Brad Broulik
EVENTS 10/12
Apress
ISBN: 978-1430239666
• pagehide
Wird auf der Seite getriggert von der
die Animation gestartet ist und die
nun versteckt ist.
$( "#from-page-id" ).live( "pagehide",
function( e, data ){
console.log( "Der Seitenübergang ist
fertig..." );
});
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 107
108. Quelle Grafik:
Pro jQuery Mobile
Brad Broulik
EVENTS 11/12
Apress
ISBN: 978-1430239666
• pageshow
Wird auf der Seite getriggert zu der
die Animation führen soll und die nun
sichtbar ist.
$( "#from-page-id" ).live( "pageshow",
function( e, data ){
console.log( "Der Seitenübergang ist
fertig..." );
});
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 108
109. Quelle Grafik:
Pro jQuery Mobile
Brad Broulik
EVENTS 12/12
Apress
ISBN: 978-1430239666
• pagechange
Letzter Event eines Seitenwechsels.
$( document ).bind( "pagechange",
function( e, data ){
console.log(“Change page
successfully completed...”);
var toPage = data.toPage;
var options = data.options;
});
• pagechangefailed
Wird getriggert, falls der
Seitenwechsel fehl schlägt.
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 109
110. WIDGETS
• Zugriff auf das jQuery Mobile Objekt:
$.mobile. bzw. jQuery.mobile
• Mögliche Widgets
page
dialog $.mobile.<widget_name>.prototype.
collapsible $.mobile.<widget_name>.prototype.options.
fieldcontain
navbar $.mobile.page.prototype.options
listview
checkboxradio gültig für
button
slider Instanzen: data-role="page"
textinput
selectmenu
controlgroup
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 110
112. DATA UTILITIES
• Zugriff auf die Data-Attribute
var buttons = $("a[data-role=button"]);
var buttons = $("a:jqmData(role='button')");
$("a").jqmRemoveData("transition"); // statt removedata
$("#button1").jqmData("theme", "a"); // statt data
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 112
113. PAGE UTILITIES
• Seiten-Funktionen
// activePage ist das <div>
var currentPageId = $.mobile.activePage.id;
// pageContainer ist das <body>
$.mobile.pageContainer...
// Laden einer externen Seite
$.mobile.changePage("external.html");
// Übergang zu einer internen Seite im selben Doc
$.mobile.changePage($("#pageId"));
$.mobile.changePage($("#page2"), {
transition: "slide",
reverse: true
});
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 113
114. API - CHANGEPAGE 1/2
• $.mobile.changePage( toPage, [options] )
• toPage (string oder jQuery collection)
• toPage: URL (contact.html) oder interne ID (#contact)
• toPage: jQuery collection ($("#contact"))
• options (object)
• transition (string, default: $.mobile.defaultTransition, „slide“)
Übergangs-Animations-Funktion
• reverse (boolean, default: false)
Ablauf der Animation: Vorwärts=false, Rückwärts=true
• changeHash (boolean, default: true)
Aktualisierung des Hash in der URL-Zeile
• role (string, default: „page“)
Das data-role Attribut. Kann „page“ oder „dialog“ sein
• pageContainer ( jQuery collection, default: $.mobile.pageContainer)
Spezifiziert das Element, welches die Seite nach dem Laden enthält
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 114
115. API - CHANGEPAGE 2/2
• options (object) (Fortsetzung...)
• type (string, default: „get“)
Spezifiziert die Methode des Ladens („get“ oder „post“)
• data (string oder object, default: undefined)
Daten, die an den AJAX-Request gesendet werden
• reloadPage (boolean, default: false)
Forciert einen Reload der Seite, selbst wenn diese im DOM-Cache ist
• showLoadMsg (boolean, default: true)
Anzeigen einer Loading-Message während des Ladens
• fromHashChange (boolean, default: false)
Zeigt an, dass die Funktion aus einem hashchange Event aufgerufen wurde
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 115
117. CHANGEPAGE - BEISPIEL 2/2
• Beispiel 2
/* Erstellung und Öffnen einer neuer Seite */
// Erstellung des Markups
var newPage = $("<div data-role=page data-url=hi><div
data-role=header><h1>Neuer Header</h1></div><div data-
role=content>Neuer Inhalt!</div></div>");
// Füge die Seite zum Seitencontainer hinzu
newPage.appendTo( $.mobile.pageContainer );
// Übergang zur neuen Seite einleiten
$.mobile.changePage( newPage );
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 117