jquery mobile kompakt - das kompendium - über 150 seiten (typovision)
DESCRIPTION
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.TRANSCRIPT
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
JQUERY MOBILEKompakt
16.05.2012
Patrick Lobacher (GF typovision GmbH)
1
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
EINFÜHRUNGin jQuery Mobile
2
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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
3
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
MOBILE LÖSUNGEN
4
Native App
(eigener Code für alle Plattformen)
Hybride App
(Web-Technologie eingebettet in nativem Rahmengerüst)
Web App
(speziell optimierte Applikation bestehend aus Web-
Technologie)
Kompatible Website
(Keine Anpassung)
Optimierte Website
(Viewport, BuildIn, ...)
Mobile Framework
(Web-Technologie, optimiert für alle Zugangsgeräte)
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
MOBILE FRAMEWORKS
5
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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 degradationProgressive Verbesserung <=> würdevolle Herabstufung
6
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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
7
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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 :-)
8
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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)9
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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/)
10
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
JQUERY MOBILE KOMPATIBILITÄT
11
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
JQUERY MOBILE KOMPATIBILITÄT
12
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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)
13
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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!!14
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
GETTING STARTEDJetzt geht‘s los :-)
15
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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>
16
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
HTML5-GRUNDGERÜST
• Basis HTML
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>Titel</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> <meta name="viewport" content="width=device-width; initial-scale=1;"></head><body>
</body></html>
17
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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-widthinitial-scale = Wert der initialen Skalieren (1.0 für normal)maximum-scale = Wert für die maximal mögliche Skalierungminimum-scale = Wert für die minimal mögliche Skalierunguser-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
18
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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)
19
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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 Zoomshttp://adactio.com/journal/4470/
20
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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)");
21
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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
22
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
ARCHITEKTUR - ROLLEN
23
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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>
24
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
ABLAUF
25
Semantisches HTML5 Markup
jQuery Mobilepage
enhancementsanreichern umwandeln
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
SEITENSTRUKTUR - JQM• Das macht jQuery Mobile aus der Seite (enhancement)
<html class="ui-mobile"><head> <meta charset="utf-8"> <title>Titel</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> <meta name="viewport" content="width=device-width; initial-scale=1;"></head><body class="ui-mobile-viewport"> <div data-role="page" data-url="/Users/patricklobacher/Desktop/jQuery Mobile/test.html" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 403px; "> <div data-role="header" class="ui-header ui-bar-a" role="banner"> <h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Header</h1> </div> <div data-role="content" class="ui-content" role="main"> <p>CONTENT</p> </div> <div data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed fade ui-fixed-overlay" role="contentinfo" style="top: 241px; "> <h4 class="ui-title" tabindex="0" role="heading" aria-level="1">Footer</h4> </div> </div> <div class="ui-loader ui-body-a ui-corner-all" style="top: 354px; "><span class="ui-icon ui-icon-loading spin"></span><h1>loading</h1></div></body></html>
26
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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"
27
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
MULTI-PAGEMehrere Seiten in einem Dokument
28
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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>
29
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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.
30
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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.
31
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
NAVIGATIONENLinks Links Links :-)
32
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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
33
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
INTERNE LINKS (#ID)
34
Quelle Grafik:jQuery Mobile - Up and running
Maximiliano FirtmanO‘Reilly
ISBN: 978-1-449-39765-4
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
EXTERNER JQM REQUEST
35
jQuery Mobile
Page RequestHijax-Request
Web Server
Hijax: http://en.wikipedia.org/wiki/Hijax
Append to DOM
Enhance Page
Transition
Hijax-Response
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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
36
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
EXTERNE JQM REQUEST1. 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ängt3. 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
37
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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.
38
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
DIALOGE VS. SEITEN1. Dialoge sind Seiten mit einem
abgeänderten UI2. 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 Definitionder 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 werdenfunction processAgreement(){ // Dialog schließen $('.ui-dialog').dialog('close');}
39
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
ACTION SHEETS1. Action Sheets sind Dialoge die von
oben animiert hereinfahren2. Auf diesen wird meist eine User-Interaktion eingefordert3. 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>
40
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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">
41
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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
42
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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:[email protected]?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>
43
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
TOOLBARSHeader & Footer Toolsbars
44
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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)
45
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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;}
46
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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.
47
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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 manclass="ui-btn-right" verwenden
48
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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
49
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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";});
50
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
TOOLBARS - SEGMENTED
• Segmentierte Toolbar:<div data-role="header" data-theme="b" data-position="fixed"> <h1>Filme</h1> <div class="segmented-control ui-bar-d"> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" class="ui-control-active">Im Kino</a> <a href="#" data-role="button" class="ui-control-inactive">In Kürze</a> <a href="#" data-role="button" class="ui-control-inactive">Top-Filme</a> </div> </div> </div> <style> .segmented-control { text-align:center;} .segmented-control .ui-controlgroup { margin: 0.2em; } .ui-control-active, .ui-control-inactive { border-style: solid; border-color: gray; } .ui-control-active { background: #BBB; } .ui-control-inactive { background: #DDD; } </style>
51
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
TOOLBARS - UI-BAR
• Toolbar mit einer „UI-Bar“:
<div data-role="footer" class="ui-bar"> <a href="refresh">Refresh</a> <a href="filter">Filter</a> <a href="search">Search</a> <a href="add" data-theme="b">New Item</a></div>
52
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
TOOLBARS - NAVBAR
• Toolbar mit einer „UI-Bar“:<div data-role="header" data-position="fixed"> <h1>Home</h1> <div data-role="navbar"> <ul> <li><a href="#index" data-icon="home">Home</a> <li><a href="#contacts" data-icon="search">Kontakt</a> <li><a href="#events" data-icon="info">Events</a> <li><a href="#news" data-icon="grid">News</a> </ul> </div></div>
• Für Icon-Only einfach Text weglassen
53
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
ICONS
• Übersicht über die verfügbaren Icons:
http://jquerymobile.com/test/docs/buttons/buttons-icons.html
54
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
TOOLBARS - AKTIVER BUTTON
• Aktiver Button mittels:
<div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#index" class="ui-btn-active">Home</a> <li><a href="#contacts">Contacts</a> <li><a href="#events">Events</a> <li><a href="#news">News</a> </ul> </div></div>
55
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
TOOLBARS - PERSISTENZ
• Nach jedem Ladevorgang wird auch die Footer-Toolbar neu geladen. Will man diese persistieren (kein Neuladen), so muss man folgenden Code verwenden:<!-- Kino Tab Bar --><div data-role="footer" class="tabbar" data-id="main-tabbar" data-position="fixed"> <div data-role="navbar" class="tabbar"> <ul> <li><a href="tabbar-movies.html" class="ui-btn-active ui-state-persist">Kino</a></li> <li><a href="tabbar-theatres.html">Theater</a></li> </ul> </div></div><!-- Theatres tab bar --><div data-role="footer" class="tabbar" data-id="main-tabbar" data-position="fixed"> <div data-role="navbar" class="tabbar"> <ul> <li><a href="tabbar-movies.html">Kino</a></li> <li><a href="tabbar-theatres.html"class="ui-btn-active ui-state-persist">Theater</a></li> </ul> </div></div>
56
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
TOOLBARS - CUSTOM ICONS• Verwendung von eigenen Icons (beispielsweise von http://
glyphish.com/)<div data-role="footer" class="ui-navbar-custom" data-position="fixed"> <div data-role="navbar" class="ui-navbar-custom"> <ul> <li><a href="#" id="home" data-icon="custom" data-theme="d">Home</a></li> <li><a href="#" id="movies" data-icon="custom" class="ui-btn-active">Kino</a></li> <li><a href="#" id="theatres" data-icon="custom" data-theme="d">Theater</a></li> </ul> </div></div><style>.ui-navbar-custom .ui-btn .ui-btn-inner { font-size: 11px!important; padding-top: 24px!important; padding-bottom: 0px!important;}.ui-navbar-custom .ui-btn .ui-icon { width: 30px!important; height: 20px!important; margin-left: -15px!important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important;}#home .ui-icon { background: url(icons/53-house.png) 50% 50% no-repeat; background-size: 22px 20px;}...
57
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
BUTTONSKlick & Action
58
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
BUTTONS - ARTEN• Mögliche Arten:<a href="#" data-role="button">Klick mich!</a><button data-theme="b">Klick mich auch!</button><input type="button" value="Und mich erst recht!">
• Inline Buttons über:<a href="#" data-role="button" data-inline="true">B1</a>
• Icon-Buttons über:<a href="" data-role="button" data-icon="plus" data-iconpos="notext"></a><button data-icon="search" data-iconpos="notext">Search</button>
59
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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";});
60
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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>
61
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
ICON-POSITIONIERUNG
• Positionierungen:<a href="#" data-role="button" data-icon="help" data-iconpos="right">Help</a>
<a href="#" data-role="button" data-icon="help" data-iconpos="left">Help</a>
<div data-role="controlgroup">
<a href="#" data-role="button" data-icon="help" data-iconpos="bottom">Help</a>
<a href="#" data-role="button" data-icon="help" data-iconpos="top">Help</a>
</div>
62
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
BUTTONS - GRUPPIERUNG• Button-Gruppierung:<div data-role="controlgroup"> <a href="#" data-role="button">Button 1</a> <a href="#" data-role="button">Button 2</a> <a href="#" data-role="button">Button 2</a></div>
• Button-Gruppierung horizontal:<div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-inline="true">Button 1</a> <a href="#" data-role="button" data-inline="true">Button 2</a> <a href="#" data-role="button" data-inline="true">Button 2</a></div>
63
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
BUTTONS - EFFEKTE
• Button-Effekte:<a href="#" data-role="button" data-shadow="false" data-corners="false">Help</a>
64
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
FORMULAREInteraktion
65
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
FORMULARE - GRUNDLAGEN
• <form action="send.php" action="get" data-transition="pop"> <label for="email">Email:</label> <input type="email" name="email" id="email" value="" /> <button type="submit" name="submit">Submit</button></form>
• Animation beim Wegschicken über data-transition="pop"
• Ohne AJAX über data-ajax="false" oder target="_blank"
66
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
FORMULARE - FIELDCONTAINER• <form action="send.php" action="get" data-transition="pop"> <div data-role="fieldcontainer"> <label for="company">Company Name:</label> <input type="text" id="company" name="company"> </div> <div data-role="fieldcontainer"> <label for="email">Email:</label> <input type="email" id="email" name="email"> </div></form>
67
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
FORMULARE - FELDER
• Mögliche Feld-Arten:<input type="text"><input type="password"><input type="email"><input type="tel"><input type="url"><input type="search"><input type="number"><textarea>
• Unterstützung siehehttp://www.quirksmode.org/html5/inputs_mobile.html
68
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
FORMULARE - FELDER
• date: Datum Tag, Monat, Jahrdatetime: Tag, Monat, Jahr, Stunde, Minutetime: Stunde, Minutedatetime-local: Datum ohne Zeit-Informationmonth: Monats-Selektorweek: Wochen-Selektor
<div data-role="field container"><label for="birth">Your Birthdate:</label><input type="date" id="birth" name="birth"><label for="favmonth">Your favorite month:</label><input type="month" id="favmonth" name="favmonth"></div>
69
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
FORMULARE - SELECT 1/2• Select-Elemente (Mehrfachauswahl mit multiple)
<label for="delivery">Technologie:</label><select name="delivery" id="delivery" multiple="multiple"> <optgroup label="TYPO3"> <option value="extbase">Extbase</option> <option value="pi">pi_base</option> </optgroup> <optgroup label="JavaScript"> <option value="jq">jQuery</option> <option value="jqm">jQuery Mobile</option> <option value="jqui">jQuery UI</option> </optgroup> <optgroup label="HTML5"> <option value="offline">Offline Storage</option> <option value="markup">Markup</option> </optgroup> </select>
70
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
FORMULARE - SELECT 2/2• Select-Elemente mit eigener ( jQuery Mobile) UI
<label for="genre">Technologie:</label><select name="genre" id="genre" data-native-menu="false" multiple="multiple"> <option value="">Wählen Sie aus...</option> <option value="action">TYPO3</option> <option value="comedy">FLOW3</option> <option value="drama">jQuery</option></select>
71
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
FORMULARE - CHECKBOXEN• Radio-Buttons (name-Attribut muss gleich sein)
<fieldset data-role="controlgroup"> <legend>Technologie:</legend> <input type="radio" name="tech" id="tech1" value="TYPO3" checked="checked" /> <label for="tech1" data-theme="b">TYPO3</label> <input type="radio" name="tech" id="tech2" value="FLOW3" /> <label for="tech2" data-theme="b">FLOW3</label> <input type="radio" name="tech" id="tech3" value="jQuery" /> <label for="tech3" data-theme="b">jQuery</label></fieldset><fieldset data-role="controlgroup" data-type="horizontal"> <legend>Technologie:</legend> <input type="radio" name="tech" id="tech1" value="TYPO3" checked="checked" /> <label for="tech1">TYPO3</label> <input type="radio" name="tech" id="tech2" value="FLOW3" /> <label for="tech2">FLOW3</label> <input type="radio" name="tech" id="tech3" value="jQuery" /> <label for="tech3">jQuery</label></fieldset>
Wichtig, damit horizontale Radiobuttons nicht umbrechen<style> .ui-controlgroup-horizontal .ui-radio label { font-size: 13px !important; }</style>
72
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
FORMULARE - CHECKBOXEN• Checkboxen (name-Attribut muss gleich sein)
<fieldset data-role="controlgroup"> <legend>Technologie:</legend> <input type="checkbox" name="tech" id="tech1" value="TYPO3" checked="checked" /> <label for="tech1" data-theme="b">TYPO3</label> <input type="checkbox" name="tech" id="tech2" value="FLOW3" /> <label for="tech2" data-theme="b">FLOW3</label> <input type="checkbox" name="tech" id="tech3" value="jQuery" /> <label for="tech3" data-theme="b">jQuery</label></fieldset><fieldset data-role="controlgroup" data-type="horizontal"> <legend>Technologie:</legend> <input type="checkbox" name="tech" id="tech1" value="TYPO3" checked="checked" /> <label for="tech1">TYPO3</label> <input type="checkbox" name="tech" id="tech2" value="FLOW3" /> <label for="tech2">FLOW3</label> <input type="checkbox" name="tech" id="tech3" value="jQuery" /> <label for="tech3">jQuery</label></fieldset>
Wichtig, damit horizontale Checkboxen nicht umbrechen<style> .ui-controlgroup-horizontal .ui-checbox label { font-size: 12px !important; }</style>
73
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
FORMULARE - SLIDER• <div data-role="fieldcontainer"> <label for="qty">Menge:</label> <input type="range" id="qty" name="qty" min="1" max="100" value="5" data-theme="e" data-track-theme="b"></div>
74
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
FORMULARE - SWITCH• <label for="alerts">jQuery:</label><select name="slider" id="alerts" data-role="slider"> <option value="off">Aus</option> <option value="on">An</option></select>
75
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
LISTENParadigmen
76
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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>
77
data-inset="true"
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
TRENNER
• Trenner:<div data-role="content"><ul data-role="listview"> <li data-role="list-divider">Group A</li> <li>Argentina</li> ... <li data-role="list-divider">Group B</li> <li>United States</li> ... <li data-role="list-divider">Group C <li>Germany</li> ...</ul></div>
78
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
INTERAKTIVE LISTEN
• Interakive Listen:<div data-role="content"> <ul data-role="listview"> <li><a href="#page2">Interner Link</a> <li><a href="other.html">Externer Link</a> <li><a href="http://www.typovision.de">Absoluter externer Link</a> <li><a href="tel:+13051010200">Telefon</a> <li><a href="javascript:alert('Hi!')">JavaScript link</a> </ul></div>
79
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
LISTEN-AUSZEICHNUNG
• Listen-Auszeichnungen: <ul data-role="listview"> <li data-role="list-divider" data-divider-theme="a"> Sonntag <p class="ui-li-aside">20.Mai 2012</p> </li> <li> <a href="#">18 Uhr <span class="ui-li-aside">Meeting</span> </a> </li> <li data-role="list-divider" data-divider-theme="a"> Sonntag <p class="ui-li-aside">20.Mai 2012</p> </li> <li> <a href="#">Mails <span class="ui-li-count">123</span></a> </li></ul>
80
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
LISTEN DARSTELLUNG
• Listen-Darstellung mit Thumbnails: <ul data-role="listview"> <li> <a href="movies/kung-fu-panda.html"> <img src="images/kungfupanda2.jpg" /> <h3>Kung Fu Panda</h3> <p>Rated: PG</p> <p>Runtime: 95 min.</p> </a> </li> ...</ul>
• Um Icons mit der Größe 16x16 Pixel zuverwenden kann man eine Klasse verwenden:
<img src="images/kungfupanda2.jpg" class="ui-li-icon" />
81
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
LISTEN - SPLIT BUTTONS
• Listen-Darstellung mit Split-Buttons: <ul data-role="listview" data-split-icon="star" data-split-theme="d"> <li> <a href="movies/kung-fu-panda.html"> <img src="images/kungfupanda2.jpg" /> <h3>Kung Fu Panda</h3> <p>Rated: PG</p> <p>Runtime: 95 min.</p> </a> <a href="tickets.html">Tickets kaufen</a> </li></ul>
• Eignet sich sehr gut um zwei verschiedeneAktionen (Links) zu unterstützen
82
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
NUMERISCHE LISTEN
• Numerische Listen mittel <ol>-Tag: <ol data-role="listview"> <li><a href="#TYPO3">TYPO3</a></li> <li><a href="#FLOW3">FLOW3</a></li> <li><a href="#jQuery">jQuery</a></li> <li><a href="#jQueryMobile">jQuery Mobile</a></li></ol>
83
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
LISTEN FILTERN
• Filtern von Listen
<ul data-role="listview" data-filter="true" data-filter-placeholder="Suche…"> <li><a href="#TYPO3">TYPO3</a></li> <li><a href="#FLOW3">FLOW3</a></li> <li><a href="#jQuery">jQuery</a> </li> <li><a href="#jQueryMobile"> jQuery Mobile</a></li></ul>
• Suchen in Meta-Daten (findet auch AAPL z.B.)<li data-filtertext="NASDAQ:AAPL Apple Inc."><a href="#">Apple</a></li><li data-filtertext="USA U.S.A. United States of America"><a href="#">United States</a></li>
• Der Platzhalter-Text kann auch global gesetzt werden:$(document).bind('mobileinit',function(){ $.mobile.listview.prototype.options.filterPlaceholder="Suche...";});
84
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
VERSCHACHTELTE LISTEN
• Verschachtelte Listen
<ul data-role="listview"> <li><a href="#TYPO3">TYPO3</a> <ul data-role="listview"> <li><a href="#TCA">TCA</a></li> <li><a href="#TCE">TCE</a></li> <li><a href="#TypoScript"> TypoScript</a></li> </ul> </li> <li><a href="#FLOW3">FLOW3</a></li> <li><a href="#jQuery">jQuery</a></li></ul>
• Verschachtelte Listen werden automatisch zugeklappt angezeigt. Ein Klick auf eines der Elemente sorgt dafür, dass mittels eine Slide-Animation die Unterliste angezeigt wird.
85
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
CONTENTInhalte und deren Auszeichnung
86
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
GRID-CONTENT
• Spalten und Zeilen (gleichmäßige Aufteilung):<section class="ui-grid-b"> <!-- Zeile 1 --> <div class="ui-block-a">Zelle 1.1</div> <div class="ui-block-b">Zelle 1.2</div> <div class="ui-block-c">Zelle 1.3</div> <!-- Zeile 2 --> <div class="ui-block-a">Zelle 2.1</div> <div class="ui-block-b">Zelle 2.2</div <div class="ui-block-c">Zelle 2.3</div></section>
• ui-grid-a für 2spaltigui-grid-b für 3spaltigui-grid-c für 4spaltigui-grid-d für 5spaltig
• grid-block-a bis grid-block-e fürSpalte 1 bis 5
87
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
AUFKLAPP-CONTENT• Aufklapp-Content:<div data-role="content"> <div data-role="collapsible"> <h2>Überschrift1</h2> <p>INHALT1</p> </div> <div data-role="collapsible" data-collapsed="true"> <h2>Überschrift2</h2> <p>INHALT2</p> </div></div>
• Kann beliebig verschachtelt werdenDIV > DIV > H2 > DIV > H3 > p
• Styling durch:data-themedata-content-theme
88
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
AUFKLAPP-CONTENT + EMOJI
• Aufklapp-Content mit EMOJI-Icons (nur iOS):
<div data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="b"> <h3>Wireless</h3> <ul data-role="listview" data-inset="true"> <li><a href="#"> Notifications</a></li> <li><a href="#"> Location Services</a></li> </ul></div><div data-role="collapsible" data-theme="a" data-content-theme="b"> <h3>Applications</h3> <ul data-role="listview" data-inset="true"> <li><a href="#"> Faceoff</a></li> <li><a href="#"> LinkedOut</a></li> <li><a href="#"> Netflicks</a></li> </ul></div>
• http://www.iphone-ticker.de/ios-5-alle-emoji-symbole-auf-einen-blick-22663/
89
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
AKKORDION - COLLAPSIBLE SET• Akkordion-Funktion (nur ein ausgeklappter
Container zur gleichen Zeit):
<div data-role="collapsible-set" data-theme="a" data-content-theme="b"> <div data-role="collapsible" data-collapsed="true"> <h3>Wireless</h3> <ul data-role="listview" data-inset="true"> <li><a href="#"> Notifications </a></li> <li><a href="#"> Location Services </a></li> </ul> </div> <div data-role="collapsible"> <h3>Applications</h3> <ul data-role="listview" data-inset="true"> <li><a href="#"> Faceoff</a></li> <li><a href="#"> LinkedOut</a></li> <li><a href="#"> Netflicks</a></li> </ul> </div></div>
90
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
THEME-ROLLERCustom Designs
91
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
EIGENE SKRIPTE
92
http://jquerymobile.com/themeroller/
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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 individuellzu gestalten
• In the „Global“-Settings können globale Einstellungen getroffen werden, die in allenSwatches gelten sollen
93
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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
94
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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
95
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
JAVASCRIPTUnd das Framework
96
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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>
97
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
EVENTS 1/12
• Um Events nachzuvollziehen, kann man einen Event Logger als Bookmarklet verwenden:http://code.jquery.com/mobile/latest/demos/tools/log-page-events.html
• mobileinitWenn jQuery Mobile initialisiert wird,wird ein mobileinit Event auf dasdocument Objekt getriggert
98
Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
EVENTS 2/12
• pagebeforechangeDies ist der erste Event der währendeinem 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();});
99
Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
EVENTS 3/12
• pagebeforeloadDies ist der erste Event der währenddem 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 ); }});
100
Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
EVENTS 4/12
• pagebeforecreateDieser 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" );});
101
Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
EVENTS 5/12
• pagecreateHier 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();});
102
Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
EVENTS 6/12
• pageinitEvent 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... "); ...});
103
Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
EVENTS 7/12
• pageloadEvent nachdem die Seite erfolgreichins DOM geladen wurde.
$( document ).bind( "pageload", function( e, data ){ console.log("Seite wurde erfolgreich ins DOM geladen...");});
• pageloadfailedWird aufgerufen, wenn das Laden fehl schlägt.
104
Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
EVENTS 8/12
• pagebeforehideWird 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..." );});
105
Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
EVENTS 9/12
• pagebeforeshowWird 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..." );});
106
Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
EVENTS 10/12
• pagehideWird 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..." );});
107
Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
EVENTS 11/12
• pageshowWird 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..." );});
108
Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
EVENTS 12/12
• pagechangeLetzter Event eines Seitenwechsels.
$( document ).bind( "pagechange", function( e, data ){ console.log(“Change page successfully completed...”); var toPage = data.toPage; var options = data.options;});
• pagechangefailedWird getriggert, falls der Seitenwechsel fehl schlägt.
109
Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
WIDGETS
• Zugriff auf das jQuery Mobile Objekt:$.mobile. bzw. jQuery.mobile
• Mögliche Widgetspagedialogcollapsiblefieldcontainnavbarlistviewcheckboxradiobuttonslidertextinputselectmenucontrolgroup
110
$.mobile.<widget_name>.prototype.$.mobile.<widget_name>.prototype.options.
$.mobile.page.prototype.options
gültig für
Instanzen: data-role="page"
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
DEFAULT CONFIGURATION
• Ändern von Default-Werten:$(document).bind("mobileinit", function() { $.mobile.pushStateEnabled = true; $.mobile.loadingMessage = "Lädt..."; $.mobile.pageLoadErrorMessage = "Fehler!"; $.mobile.defaultPageTransition = "fade"; $.mobile.minScrollBack = 150; $.mobile.activeBtnClass = "active-button"; $.mobile.ajaxEnabled = false; $.mobile.allowCrossDomainPages = true;
// resultiert in <div data-typovision-role="page"> $.mobile.ns = "typovision";
...});
111
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
DATA UTILITIES
• Zugriff auf die Data-Attributevar buttons = $("a[data-role=button"]);var buttons = $("a:jqmData(role='button')");
$("a").jqmRemoveData("transition"); // statt removedata$("#button1").jqmData("theme", "a"); // statt data
112
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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});
113
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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
114
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
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
115
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
CHANGEPAGE - BEISPIEL 1/2• Beispiel 1
<script>function viewProduct(idProduct) { $.mobile.changePage("productdetail.php", { method: "post", data: { action: 'getProduct',‘ id: idProduct }, transition: "fade" });}</script><!-- ... --><a href="javascript:viewProduct(5200)" data-role="button">Produkt-Details</a>
116
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
CHANGEPAGE - BEISPIEL 2/2
• Beispiel 2
/* Erstellung und Öffnen einer neuer Seite */
// Erstellung des Markupsvar 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 hinzunewPage.appendTo( $.mobile.pageContainer );
// Übergang zur neuen Seite einleiten$.mobile.changePage( newPage );
117
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
DYNAMISCHE BUTTONS 1/4
• Grundstruktur des Markups<div data-role="page" data-theme="b"> <div data-role="header"> <h1>Dynamische Buttons</h1> </div> <div data-role="content"> <a href="#" data-role="button" id="create-button1">Erzeuge Button1</a>
• Button ans Ende zufügen$( "#create-button1" ).bind( "click", function() { $( '<a href="http://jquerymobile.com" id="button1" data-role="button" data-icon="star" data-inline="true" data-theme="a">Button1</a>' ) .appendTo( ".ui-content" ) .button();});
118
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
DYNAMISCHE BUTTONS 2/4• Button nach dem Klick-Button zufügen
$( "#create-button2" ).bind( "click", function() { $( '<a href="http://jquerymobile.com" id="button2">Button2</a>' ) .insertAfter( "#create-button2" ) .button({ corners: true, icon: "home", inline: true, shadow: true, theme: 'a', create: function(event) { console.log( "Creating button..." ); for (prop in event) { console.log(prop + ' = ' + event[prop]); } } })});
119
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
DYNAMISCHE BUTTONS 3/4
• Input-Type Button zufügen und konfigurieren
$( "#create-button5" ).bind( "click", function() { $( '<input type="submit" id="button5" value="Button5" data-theme="a" />' ) .insertAfter( "#create-button5" ) .button();});
$( "#create-button6" ).bind( "click", function() { $( '<input type="submit" id="button6" value="Button6" />' ) .insertAfter( "#create-button6" ) .button({ 'icon': "home", 'inline': true, 'shadow': true, 'theme': 'a' })});
120
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
DYNAMISCHE BUTTONS 4/4
• Mehrere Buttons zufügen sowie Aktivierung/Deaktivierung
$( "#create-multiple-buttons" ).bind( "click", function() { $( '<button id="button3" data-theme="a">Button3</button>' ).insertAfter( "#create-multiple-buttons" ); $( '<button id="button4" data-theme="a">Button4</button>' ).insertAfter( "#button3" ); $.mobile.pageContainer.trigger( "create" );});
$( "#disable-button3" ).bind( "click", function() { $( "#button3" ).button( "disable" );});
$( "#enable-button3" ).bind( "click", function() { $( "#button3" ).button( "enable" );});
121
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
DYNAMISCHER TEXTINPUT
• Input-Felder dynamisch hinzufügen sowie De-/Aktivierung
• $( '<input type="text" name="text1" value="" data-theme="c" />' ) .insertAfter( "#firstName" ) .textinput();
$( '<input type="text" name="text2" id="text2" value="" />' ) .insertAfter( "#text1" ) .textinput({ theme: 'c' });
$( "#text1" ).textinput( "disable" );
$( "#text1" ).textinput( "enable" );
122
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
DYNAMISCHE SELECTS
• Selectmenüs erzeugen
• $( '<select name="select1" id="select1" data-theme="e">...</select>' ) .insertAfter( "#foo" ) .selectmenu();
$( '<select name="select2" id="select2">...</select>' ) .insertAfter( "#select1" ) .selectmenu({ theme: "e", overlayTheme: "c", disabled: false, nativeMenu: false});
$( "#select1" ).selectmenu( "disable" );
$( "#select1" ).selectmenu( "enable" );
123
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
DYNAMISCHE RADIOBUTTONS
• Radiobuttons erzeugen
• $( '<fieldset data-role="controlgroup"> <legend>Map view:</legend> <input type="radio" name="map" id="map1" value="Map" /> <label for="map1" data-theme="c">Map</label>...</fieldset>') .insertAfter( "#radio1" );$.mobile.pageContainer.trigger( "create" );
$( '<fieldset data-role="controlgroup"> <legend>Map view:</legend> <input type="radio" name="map" id="map1" value="Map" /> <label for="map1">Map</label>...</fieldset>' ) .insertAfter( "#radio1" );
$( "#map1" ).checkboxradio({ theme: "e" });$( "#map2" ).checkboxradio({ theme: "e" });
$.mobile.pageContainer.trigger( "create" );
124
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
DYNAMISCHE CHECKBOXEN
• Checkboxen erzeugen
• $( '<fieldset data-role="controlgroup"> <legend>Genre:</legend> <input type="checkbox" name="genre" id="c1" /> <label for="c1" data-theme="c">Action</label>...</fieldset>' ) .insertAfter( "#element1" );
$.mobile.pageContainer.trigger( "create" );
$( '<fieldset data-role="controlgroup"> <legend>Genre:</legend> <input type="checkbox" name="genre" id="c3" /> <label for="c3">Action</label>...</fieldset>' ) .insertAfter( "#create-cb2" );
$( '#c3' ).checkboxradio({ theme: "e" });$( '#c4' ).checkboxradio({ theme: "e" });
$.mobile.pageContainer.trigger( "create" );
125
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
DYNAMISCHE SLIDER
• Slider erzeugen
• $( '<label for="s1">Brightness:</label> <input type="range" name="s1" id="s1" min="0" max="9" data-theme="d"/>') .insertAfter( "#element1" );$( "#s1" ).slider();
• $( '<label for="s1">Brightness:</label> <input type="range" name="s1" id="s1" min="0" max="10" />' ) .insertAfter( "#create-s2" ); $( "#s1" ).slider({ theme: "d", trackTheme: "a", disabled: false});
126
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
DYNAMISCHE SWITCHES
• Switch erzeugen
• $( '<select name="switch1" data-role="slider" data-theme="c"></select>' ) .insertAfter( “#foo” ) .slider();
$( '<select name="switch2" id="switch2">...</select>' ) .insertAfter( “#switch1” ) .slider({ theme: "b", trackTheme: "c", disabled: false});
127
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
DYNAMISCHE LISTEN
• Listen erzeugen$( '<ul data-inset="true" id="list1"> <li data-role="list-divider">Genres</li> <li><a href="#">Action</a></li> <li><a href="#">Comedy</a></li></ul>' ) .insertAfter( "#list0" ) .listview();
$( '<ul><li data-role="list-divider">Genres</li> <li><a href="#">Action</a></li> <li><a href="#">Comedy</a></li></ul>' ) .insertAfter( "#list1" ) .listview({ theme: "d", dividerTheme: "a", inset: true,});
$( "#list1" ) .append('<li><a href="#">Drama</a></li>') .listview("refresh");
128
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
LISTEN FILTERN
• Das Listen-Filtern Feature ( data-filter="true") sucht in den Listen nach irgendeinem Auftreten der eingetippten Buchstaben. Will man beispielsweise nur am Anfang suchen, so muss man die „Suchfunktion“ selbst programmieren.
• text enthält den Text der ListesearchValue enthält den eingetippten Suchstring
• $(document).bind('mobileinit',function(){ $.mobile.listview.prototype.options.filterCallback = function( text, searchValue ){ // Verwenden eine „Suche am Anfang“-Funktion return !(text.toLowerCase().indexOf( searchValue ) === 0); };});
• Die Default-Suche ist wie folgt definiert:return text.toLowerCase().indexOf( searchValue ) === -1;
129
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
PLATTFORM-UTILITIES
130
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
PFAD-UTILITIES
131
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
ORIENTATION CHANGE
• Orientierung feststellen
$(document).bind("orientationchange", function(orientation) { if (orientation=="landscape") {
// Landscape-Mode
} else {
// Portrait-Mode
}
});
132
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
GESTEN
• Swipe-Right triggern
$(document).bind("mobileinit", function() { $("#page2").live("swiperight", goBackToPage1);});function goBackToPage1() { $.mobile.changePage("#page1", { reverse: true }); $("#page2").unbind("swiperight", goBackToPage1);}
133
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
BEISPIELE: SEITEN ZUFÜGEN 1/2
• HTML-Markup
<div data-role="page"> <div data-role="header"> <h1>Dynamic page</h1> </div> <div data-role="content"> <a id="button1" href="javascript:addPages()" data-role="button">Add Pages</a> <ul id="list1"> </ul> </div></div>
134
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
BEISPIELE: SEITEN ZUFÜGEN 2/2
• JavaScript (ausserhalb mobileinit platzieren)
function addPages() { for (var i=1; i<5; i++) { var page = $("<div>").jqmData("role", "page").attr("id", "page" + i); // header $("<div>").attr("data-role", "header").append($("<h1>") .html("Page " + i)).appendTo(page); // content $("<div>").attr("data-role", "content").append($("<p>") .html("Contents for page " + i)) .appendTo(page); $("body").append(page); $("<li>").append($("<a>").attr("href", "#page"+i).html("Go to page " + i)) .appendTo("#list1"); } $("#button1").hide();};
135
Quelle Grafik:jQuery Mobile - Up and running
Maximiliano FirtmanO‘Reilly
ISBN: 978-1-449-39765-4
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
BEISPIELE: SEITEN ERZEUGEN 1/2
• HTML-Markup
<div data-role="page"> <div data-role="header"> <h1>Dynamic pages</h1> </div> <div data-role="content"> <a id="button1" href="#page1" data-role="button">Page 1</a> <a id="button1" href="#page2" data-role="button">Page 2</a> <a id="button1" href="#page3" data-role="button">Page 3</a> <a id="button1" href="#page4" data-role="button">Page 4</a> </div></div><div data-role="page" id="pageTemplate"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content">Content</div> <div data-role="footer"> <h4>Footer</h4> </div></div>
136
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
BEISPIELE: SEITEN ERZEUGEN 2/2
• JavaScript (ausserhalb mobileinit platzieren)
$(document).bind('pagebeforechange', function(event, data) { // We receive the destination page in data.toPage and we normalize it var url = $.mobile.path.parseUrl(data.toPage).hash; if (url!=undefined && url.length>5 && url.substring(0, 5)=="#page") { // We dynamically inject a new page var id = url.substring(5); // We will use a page template already in the DOM $("#pageTemplate h1").html("Page " + id); // We change to the real page template without using // its real page id in history $.mobile.changePage($("#pageTemplate"), {dataUrl: data.toPage}); // We prevent normal page transition event.preventDefault(); }});
137
Quelle Code:jQuery Mobile - Up and running
Maximiliano FirtmanO‘Reilly
ISBN: 978-1-449-39765-4
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
TOUCH EVENTS
• tab (Kurzes Tippen)
• tabhold (Tippen und mindestens ca. 1s halten)
• swipe (Wischen, mindestens 30px horizontal und max 20px vertikal, innerhalb einer 1s - alle Parameter einstellbar)
• swipeleft (swipe nach links)
• swiperight (swipe nach rechts)
138
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
VIRTUELLE MOUSE EVENTS
• Dient dazu normalisierte Events für sowohl „Touch“ wie auch „Mouse“ zu haben
• vmouseover (touch oder mouseover)
• vmousedown (touchstart oder mousedown)
• vmousemove (touchmove oder mousemove)
• vmouseup (touchend oder mouseup)
• vclick (touchend oder click)
• vmousecancel (touch oder mousecancel)
139
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
CHANGELOG FÜR JQUERY MOBILE 1.1
Veröffentlicht am 13.04.2012
140
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 141
• Richtige fixe Toolbars, CSS-basiert und kompatibelauf diesen Endgeräten: iOS5 – iPhone and iPad, Android 2.2 and 2.3, Android 3.x, Tablets (Honeycomb), Android 4.x (ICS), Chrome for Android (beta), BB Playbook 1-2, BB7, Nook Color/Tablet, Kindle Fire, Kindle 3, All modern desktop browsers (IE, Firefox, Safari, Chrome, etc.)
Methoden: http://jq2uerymobile.com/demos/1.1.0/docs/toolbars/bars-fixed-options.html
• Die Übergänge sind nun weicher und schneller
• Die Übergänge „turn“ (WP Metro style page effect) und „flow“ (iOS tab switching transition) wurden hinzugefügt
• Firefox unterstützt nun eine Vielzahl an Übergängen
• Neues AJAX-Loader Design und OptionenBeispiel: http://jquerymobile.com/demos/1.1.0/docs/config/loadingMessageTextVisible.html
• Das Feature „touchOverflow“ ist deprecated
• jQuery 1.7.1 wird nun unterstützt
DIE ÄNDERUNGEN IN 1.1
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 142
• „Mini Formular-Elemente“ können nun über das Attribut data-mini="true" hinzugefügt werdenEin Vergleich: http://jquerymobile.com/demos/1.1.0/docs/forms/forms-all-compare.html
• Der „Flip Switch“ wurde überarbeitet:http://jquerymobile.com/demos/1.1.0/docs/forms/switch/
• Der Slider hat nun ein Highlight-Feature bekommen, welches über das Attribut data-highlight="true" aktiviert wird.
• Bei Slider kann man nun die Schrittgröße über das Attribut step="25" einstellen
• Über das Attribut data-enhance="false" kann die Anreicherung gezielt für einzelne Elemente abgeschaltet werden
DIE ÄNDERUNGEN IN 1.1
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 143
• data-ajax="false" wirkt nun auch auf Container (und nicht nur einzelne Elemente). Dies kann zudem über $.mobile.ignoreContentEnabled=true zentral eingestellt werden
• Der Default-Übergang ist nun ab 1.1.0 „fade“ und nicht mehr „slide“
• Alle Übergänge, die nicht darstellbar sind, haben nun „fade“ als Fallback
• Der Theme-Roller erlaubt es nun, ältere 1.0er Themes zu importieren und als 1.1er zu exportieren
• URL JS: http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js
• URL CSS: http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css
DIE ÄNDERUNGEN IN 1.1
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
QUELLENWeitere Quellen
144
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
QUELLEN
145
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
QUELLEN
• jQuery Dokumentationhttp://jquerymobile.com/demos/1.1.0/
• jQuery Mobile Projektseite: http://www.jquerymobile.com
• jQuery Mobile Examples: http://www.jqmgallery.com
• jQuery Mobile Forum: http://forum.jquery.com/jquery-mobile
• Cheat-Sheethttp://www.opitz-consulting.com/fileadmin/redaktion/veroeffentlichungen/pdf/CheatSheet-jQuery-Mobile.pdf
146
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 147
LINKSZu Tools
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
LINKS
148
http://www.codiqa.com/
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 149
BEISPIELEjQuery Mobile in the wild
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
BEISPIELE
150
ikea.se kanbanpad.com jquerymobile.com/demo/
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012
BEISPIELE
151
m.fiat.es vaio-s.de eticur.de
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 152
VIELEN DANK!FRAGEN?
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 153
SIE PLANEN EIN EIGENESJQUERY MOBILE PROJEKT?
SPRECHEN SIE UNS AN!
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 154
• Patrick Lobacher (geb. Schuster) - Geschäftsführer
• 41 Jahre alt, glücklich verheiratet, wohnhaft in München
• Autor von 8 Fachbüchern und 34 Fachartikeln zum Thema TYPO3 und Webentwicklung
• Certified TYPO3 Integrator seit 2009
• Mitglied in den TYPO3 Core-Teams: Certification & Extbase & Content Editorial
• Mitveranstalter des TYPO3camp Munich und T3DD12
• Speaker auf nationalen und internationalen Kongressen
• Dozent für führende Schulungsinstitute und die MVHS
ÜBER PATRICK LOBACHER
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 155
ÜBER DIE TYPOVISION GMBH• Münchner Fullservice-Agentur für digitale Kommunikation• 25 Mitarbeiter (+ 10 aus festem Freelancer Pool)• Geschäftsführer: Sebastian Böttger, Patrick Lobacher• Spezialisiert auf TYPO3 seit 9 Jahren (Extbase/Fluid seit 2009)
• Agenturpräsentation unter: www.typovision.de/dieagentur
• Über 400 TYPO3-Projekte jeglicher Größenordnung - für Kunden wie:
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 156
Adresse:
typovision GmbH
Landshuter Allee 880637 München
Fon: +49 89 45 20 59 3 - 0Fax: +49 89 45 20 59 3 - 29Email: [email protected]: http://www.typovision.de
KONTAKT - KLASSISCH
(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 157
Twitter: www.twitter.com/typovision www.twitter.com/PatrickLobacher www.twitter.com/crosscontent
Facebook: www.facebook.com/typovision
XING: www.xing.com/profile/Patrick_Lobacher www.xing.com/profile/Sebastian_Boettger2
Slideshare: www.slideshare.net/plobacher
Amazon: www.amazon.de/Patrick-Lobacher/e/B0045AQVEA
KONTAKT - SOCIAL CHANNELS