jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten

jQuery Mobile 1.3Kompendium

22.03.2013

Patrick Lobacher (GF typovision GmbH)

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

EinführungIn jQuery Mobile

http://www.typovision.de



Das mobile Web - Mythen

jQuery Mobile 1.3 KompendiumEinführung - Das Mobile Web

• 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




jQuery Mobile 1.3 KompendiumEinführung - Mobile Lösungen

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, RWD, ...)

Mobile Framework

(Web-Technologie, optimiert für alle

Zugangsgeräte)

Mobile Lösungen




jQuery Mobile 1.3 KompendiumEinführung - Mobile Frameworks

Mobile Frameworks




Was ist jQuery Mobile?

jQuery Mobile 1.3 KompendiumEinführung - 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




Progressive enhancement?

jQuery Mobile 1.3 KompendiumEinführung - 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




Was ist jQuery Mobile NICHT?

jQuery Mobile 1.3 KompendiumEinführung - 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 :-)




jQuery Mobile Shortfact

jQuery Mobile 1.3 KompendiumEinführung - jQuery Mobile Shortfacts

• Erfunden im Oktober 2010 vom Team rund um Jon Resig ( jQuery Team)• John Resig, JavaScript Tool Entwickler für die Mozilla Corporation (@jeresig auf Twitter)

• Lizenz: MIT (Dual-Lizent: MIT & GPL bis 10.09.2012)

• Sprache: JavaScript + basiert auf jQuery

• Website: jquerymobile.com

• Aktuelle Version: 1.3.0 (20.02.2013)

• Größe: 24 KB (Größe jQuery: 32 KB | Gesamt: 56 KB)

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




jQuery Mobile Überblick

jQuery Mobile 1.3 KompendiumEinführung - jQuery Mobile Überblick

• jQuery Mobile ist ein UI Framework welches auf jQuery bassiert• jQuery Mobile ist optimiert auf allen populären Smartphones, Tables, E-

Reader, und Desktop-Plattformen• Erstellt in Hinblick auf Zugänglichkeit und universellem Zugang• Das Projekt folgt den Paradigmen von „Progressive Enhancement“ und

“Responsive Web Design (RWD)“• Das Markup basiert dabei auf HTML5, was es einfach zum Erlernen macht• Über eine umfangreiche API kann das Verhalten von jQuery leicht manipuliert

werden




jQuery Mobile Kompatibilität

jQuery Mobile 1.3 KompendiumEinführung - jQuery Mobile Kompatibilität




jQuery Mobile Kompatibilität

jQuery Mobile 1.3 KompendiumEinführung - jQuery Mobile Kompatibilität




HTML5/CSS3

jQuery Mobile 1.3 KompendiumEinführung - HTML5/CSS3

• 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)• Custom font support




Emulatoren

jQuery Mobile 1.3 KompendiumEinführung - Emulatoren

• Für Mac OS X gibt es mit Xcode einen iOS-Simulator (iPhone, iPad)

• Codiqua ermöglicht WYSIWYG-Editing mit anschließender Erzeugung von HTML5/CSS-Code auf Basis von jQuery Mobilehttp://www.codiqa.com/



http://www.codiqa.com



Emulatoren

jQuery Mobile 1.3 KompendiumEinführung - 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!!



http://www.mobilexweb.com/emulators

http://www.mobilexweb.com/emulators

http://developer.android.com/sdk/index.html

http://developer.android.com/sdk/index.html


Getting startedJetzt geht‘s los :-)




jQuery Mobile einbinden

jQuery Mobile 1.3 KompendiumGetting started - Einbindung

• Entweder über den neuen Download-Builder:http://jquerymobile.com/download-builder/Hier können individuell all jene Module und Funktionen zusammengestellt werden, die benötigt werden - dies sorgt für eine kleinere Dateigröße

• Oder direkt per Download (dort auch als ZIP möglich) von http://jquerymobile.com/download/

Hier sind enthalten: jQuery Mobile Dateien, Grafiken, CSS, Docs• Es wird zudem jQuery 1.8.2 (aktuell 1.9.1) oder höher benötigt



http://jquerymobile.com/download-builder/

http://jquerymobile.com/download-builder/

http://jquerymobile.com/download/

http://jquerymobile.com/download/


jQuery Mobile einbinden

jQuery Mobile 1.3 KompendiumGetting started - Einbindung

• (Bevorzugt ist die) Verlinkung vom CDN<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

• Zu Testzwecken (nicht Live gehen damit!) kann auch di jeweils letzte Version über „latest“ einbinden (im nachfolgenden Beispiel nur für das CSS zu sehen):<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" /



http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css




http://code.jquery.com/jquery-1.8.2.min.js




http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js




http://code.jquery.com/mobile/latest/jquery.mobile.min.css





HTML5 Grundgerüst

jQuery Mobile 1.3 KompendiumGetting started - HTML5 Grundgerüst

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

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














Meta-Daten

jQuery Mobile 1.3 KompendiumGetting started - Meta-Daten / Viewport

• 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




Meta-Daten

jQuery Mobile 1.3 KompendiumGetting started - Meta-Daten / Fullscreen-Modus

• 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




Webclips Icons

jQuery Mobile 1.3 KompendiumGetting started - Webclips Icons

Für alle Icon-Größen und/oder Devices müssen eigene Angaben gemacht werden:<link rel="icon" href="icons/icon32.png"><link rel="shortcut icon" href="icons/icon32.png"><link rel="apple-touch-icon" href="icons/icon57.png" sizes="57x57"><link rel="apple-touch-icon" href="icons/icon114.png" sizes="114x114"><link rel="apple-touch-icon" href="icons/icon72.png" sizes="72x72"><link rel="apple-touch-icon" sizes="80x80" href="icons/icon80.png"><link rel="apple-touch-icon-precomposed" sizes="android-only" href="icons/icon57.png">

<link rel="apple-touch-startup-image" href="images/launch-iphone.png" media="(max-device-width: 480px)"><link rel="apple-touch-startup-image" href="images/launch-iPad-p.png"media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)"><link rel="apple-touch-startup-image" href="images/launch-iPad-l.png"media="screen and (min-device-width: 481px) and (max-device-width:1024px) and (orientation:landscape)">

=> iPhone/iPod: 320×460 / iPad Portrait: 748×1004 / iPad Landscape: 748×1024(rotated 90 degrees)




Architektur

jQuery Mobile 1.3 KompendiumGetting started - Architektur

• Cards & Roles

• Die Idee zur Architektur kommt initial von WML (Wireless Markup Language): Eine oder mehrere Zielseiten befinden sich in einem HTML-Dokument

• Eine Seite ist ein DIV-Element mit einer spezielle „Rolle“

• Zugehöriges Attribut ist data-role

• (In HTML5 gibt es die data-* Attribute um spezielle, eigene Auszeichnungen zu vergeben - „custom data attributes“)

• Vorteil: Funktioniert auch auf „Non-HTML5“-Browser




Rollen in jQuery Mobile 1.3

jQuery Mobile 1.3 KompendiumGetting started - Rollen

page Definiert eine Seite - die Einheit, die jQm verwendet um Inhalt anzuzeigen

header Kopfbereich der Seite

content Inhaltsbereich der Seite

footer Fußbereich der Seite

navbar Definiert eine Navigation-Bar - typischerweise im Header

button Rendert einen Button

controlgroup Rendert eine Komponente

collapsible Zusammenklappbares Panel im Inhaltsbereich

panel Panels

collapsible-set Gruppe zusammenklappbarer Panels (Akkordion)

fieldcontainer Container für Formular-Elemente

listview Darstellung mehrerer Intems als Liste

dialog Dialog

slider Slider

nojs Der enthaltene Bereich wird von jQm kompatiblen Browsern nicht angezeigt

popup Rendert ein Popup-Widget




Seitenstruktur

jQuery Mobile 1.3 KompendiumGetting started - 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>




Ablauf

jQuery Mobile 1.3 KompendiumGetting started - Ablauf

Semantisches HTML5 Markup

jQuery Mobilepage

enhancementsanreichern umwandeln




Das macht jQuery Mobile aus der Seite (Enhancement)

jQuery Mobile 1.3 KompendiumGetting started - jQuery Mobile Enhancement

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

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










Theming

jQuery Mobile 1.3 KompendiumGetting started - Theming

• Alle Elemente werden über ein Theme dargestellt• Default ist ein Theme enthalten, weitere müssen über den sogenannten

Theme-Roller eingebracht werden: http://jquerymobile.com/themeroller/

• Jedes Theme ist in „Swatches“ unterteilt (unterschiedliche Optionen)• Ansprechen über data-theme="buchstabe"

Buchstabe Beschreibung Farbe

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

b Zweites visuelles Level Blau

c Visuelles Baseline-Level Silber

d Alternatives zweites visuelles Level Grau

e Akkzent-Farbe Gelb



http://jquerymobile.com/themeroller/

http://jquerymobile.com/themeroller/


Multi-PageMehrere Seiten ineinem Dokument




Multi-Page Template

jQuery Mobile 1.3 KompendiumMulti-Page - Template

Weitere Seiten über separate DIVs mit data-role="page" und eindeutiger ID die mittels Anker-Link angesprungen wird. Seitentitel wird über data-title="Home" gesetzt.<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>

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




Seitentitel

jQuery Mobile 1.3 KompendiumMulti-Page - Seitentitel

• Wenn ein Wert für data-title existiert, wird dieser für den Titel der internen Seite verwendet.

• Wenn kein Wert für data-title existiert, wird der Inhalt des Headers (data-role="header") verwendet.

• Existiert weder ein Wert für data-title noch ein Header, wird der Inhalt des <title> Elements innerhalb des <head> Elements auf der Seite verwendet.




Verlinkung

jQuery Mobile 1.3 KompendiumMulti-Page - 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.




NavigationenLinks, Links, Links :-)




Link-Arten

jQuery Mobile 1.3 KompendiumNavigationen - Link-Arten

• In jQuery Mobile werden vier Link-Arten unterschieden:• Interne Links zu einer anderen Seite die im selben Dokument enthalten ist (Multipage-Dokument)• Externer JQM Link zu einer anderen Seite in einem anderen Dokument• Externer Link zu einer Nicht-jQueryMobile Seite• Mobile Spezial-Links

• Die ersten beiden Link-Arten verhalten sich dabei wie folgt:• Vorladen des Inhalts (bei extern)• Erzeugung einer Animation von der ersten zur zweiten Seite

• Trigger des Back-Buttons um zur ersten Seite zurückzukommen




Interne Links

jQuery Mobile 1.3 KompendiumNavigationen - Interne Links

Quelle Grafik:jQuery Mobile - Up and running

Maximiliano FirtmanO‘Reilly

ISBN: 978-1-449-39765-4




Externer jQm Request

jQuery Mobile 1.3 KompendiumNavigationen - Interne Links

jQuery Mobile

Page Request

Hijax-Request

Web Server

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

Append to DOM

Enhance Page

Transition

Hijax-Response




data-url

jQuery Mobile 1.3 KompendiumNavigationen - 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




Externer jQm Request

jQuery Mobile 1.3 KompendiumNavigationen - Externe jQm Request

• jQuery Mobile parst das Attribut href lädt die Zielseite mittels eines Ajax-Requests (Hijax).• Wenn die Seite erfolgreich geladen wurde, wird sie in das DOM eingehängt• Ist dies erfolgreich, reichert jQuery Mobile die Seite an -inbesondere wird das base Element

erweitert und das data-url Attribut gesetzt (wenn dies noch nicht explizit geschehen ist)• Nun führt das Framework eine Transition (Übergang) mit dem Typ „slide“ durch (neue Seite wird

von rechts nach links animiert „reingeschoben“ und die alte Seite schiebt sich gleichermaßen nach links raus).

• Anschließend bekommt die aktive Seite die Klasse ui-page-active zugewiesen• Schließlich wir die URL angepasst, sodaß ein Bookmark gesetzt werden kann (pushState Feature

von HTML5)• Schlägt das Laden fehl, wird ein „Error Loading Page“ Overlay gezeigt




Transitions (Übergänge)

jQuery Mobile 1.3 KompendiumNavigationen - Transitions

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




Transitions (Übergänge)

jQuery Mobile 1.3 KompendiumNavigationen - Transitions

• Eine Transition kann über das Attribut data-transition="[transition]" spezifiziert werden, welches auf alle Links, Buttons und Formulare gelegt werden kann

• Um eine umgekehrte Transition zu forcieren kann data-direction="reverse" verwendet werden




Dialoge vs. Seiten

jQuery Mobile 1.3 KompendiumNavigationen - Dialoge vs. Seiten

• Dialoge sind Seiten mit einem abgeänderten UI• Die Seite wird auf dem Hintergrund platziert, mit

abgerundeten Ecken dargestellt und mit einem Schließen-Button links oben versehen

• Eingeleitet wird ein Dialog mit dem Attribut<a href="#terms" data-rel="dialog" data-transition="slidedown">AGB</a>

• Oder aber bei der Definition der Seite selbst<div data-role="dialog" id="terms">AGB</a>

• Dialoge können nicht gebookmarkt werden und tauchen nicht in der History auf.

• Dialoge können per API geschlossen werdenfunction processAgreement(){ // Dialog schließen $('.ui-dialog').dialog('close');}




Action Sheets

jQuery Mobile 1.3 KompendiumNavigationen - ActionSheets

• Action Sheets sind Dialoge die von oben animiert hereinfahren• Auf diesen wird meist eine User-Interaktion eingefordert• Technisch gesehen sind dies Dialoge, denen Header und Footer fehlt

<div data-role="page" id="home"><a href="#logout" data-transition="slidedown">Logout</a></div><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>




Externe Links

jQuery Mobile 1.3 KompendiumNavigationen - 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">




Externe absolute Links werden wie folgt erzeugt

jQuery Mobile 1.3 KompendiumNavigationen - Externe absolute Links

• 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












Mobile Spezial-Links

jQuery Mobile 1.3 KompendiumNavigationen - Mobile Spezial-Links

• Starten der Telefon-App<a href="tel:+498945205930">Rufen Sie uns an!</a>

• Facetime (nur auf iOS)<a href="facetime:101010">Rufen Sie uns über Facetime an</a>

• Skype (nur wenn vorhanden)<a href="skype:skype_user?call">Rufen Sie uns über Skype an</a>

• Email<a href="mailto:[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>



mailto:[email protected]?subject=Kontakt&body=Das%20ist%20der%20Inhalt





PopupsSeiten als Fenster




Popup - Allgemein

jQuery Mobile 1.3 KompendiumNavigationen - Popup Allgemein (v1.2)

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

<a href="#popupBasic" data-rel="popup">Popup öffnen</a>

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




Popup - Tooltip

jQuery Mobile 1.3 KompendiumNavigationen - Popup Tip (v1.2)

Über entsprechende Parameter erscheint das Popup als Tooltip:

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




Popup - Lightbox

jQuery Mobile 1.3 KompendiumNavigationen - Popup Lightbox (v1.2)

Lightboxes lassen sich leicht (inkl. Close-Button) realisieren:

<a href="#popupPhoto" data-rel="popup" data-position-to="window" data-transition="fade"> <img class="popphoto" src="photo.jpg" alt="Office typovision" style="width:50%; padding-left:10px;"></a>

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




Popup - Menü

jQuery Mobile 1.3 KompendiumNavigationen - Popup Menü (v1.2)

Popup-Menüs werden in listviews platziert:

<a href="#popupMenu" data-rel="popup" data-role="button" data-inline="true" data-transition="slideup" data-icon="gear" data-theme="e">Aktionen...</a>

<div data-role="popup" id="popupMenu" data-theme="d"> <ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="d"> <li data-role="divider" data-theme="e"> Aktionen wählen</li> <li><a href="#">Details ansehen</a></li> <li><a href="#">Editieren</a></li> ... </ul></div>

Für ein verschachteltes Menü wird ein Akkordio-Widgetn in einem listview platziert.




Popup - Formulare

jQuery Mobile 1.3 KompendiumNavigationen - Popup Formulare (v1.2)

Es sind auch Formulare möglich, die als Popup aufgehen:

<a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="check" data-theme="a" data-transition="pop">Anmelden</a>

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




Popup - Dialoge

jQuery Mobile 1.3 KompendiumNavigationen - Popup Dialoge (v1.2)

Will man Dialoge „erzwingen“, muss man das Attribut data-dismissible einsetzen:

<a href="#popupDialog" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="pop" data-icon="delete" data-theme="b">Seite löschen...</a>

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




Popup - Dialoge - Close

jQuery Mobile 1.3 KompendiumNavigationen - Popup Dialoge - Close (v1.2)

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

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




Popup - Beispiel Skalierung

jQuery Mobile 1.3 KompendiumNavigationen - Popup - Beispiel Skalierung (v1.2)

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




Popup - History Tracking

jQuery Mobile 1.3 KompendiumNavigationen - Popup - History Tracking (v1.2)

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

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

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




Popup - API

jQuery Mobile 1.3 KompendiumNavigationen - Popup - API (v1.2)

• Die vollständige Popup-API befindet sich unter der folgenden URL:

http://api.jquerymobile.com/popup/






PanelsBereiche




Panels Markup 1

jQuery Mobile 1.3 KompendiumPanels - Markup 1 (v1.3)

• Panels werden parallel zu header, content und footer notiert. Und zwar immer vor oder nach (nie zwischen) diesen.

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

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




Panels Markup 2

jQuery Mobile 1.3 KompendiumPanels - Markup 2 (v1.3)

• Über data-position="left" (oder "right") wird die Seite definiert, an der das Panel eingeblendet wird.

• Mit data-display="overlay" wird das Panel über den Content gelegt.

• Über data-display="reveal" lässt den Content „wegschieben“.

• Mit data-display="push" drückt das Panel den Content weg.




Panels - Eigenschaften 1

jQuery Mobile 1.3 KompendiumPanels - Eigenschaften 1 (v1.3)

• Um ein Panel zu schließen kann man ausserhalb des Panels Klicken oder Tappen oder eine Swipe-Geste ausführen. Will man das nicht, kann man das Attribut data-swipe-close="false" bzw. data-dismissible="false" auf das Panel anwenden

• Schließen kann man das Panel entweder per HTML oder per JS:<a href="#my-header" data-rel="close">Close panel</a>$( "#idofpanel" ).panel( "close" );




Panels - Eigenschaften 2

jQuery Mobile 1.3 KompendiumPanels - Eigenschaften 2 (v1.3)

• Sobald man dynamisch Content zum Panel hinzugefügt oder versteckten Content sichbar machen will, wenn das Panel offen ist, muss man den „updatelayout“ Event trigger$( "#mypanel" ).trigger( "updatelayout" );

• Öffnen kann man ein Panel entweder per HTML oder JS:<a href="#leftpanel1" data-role="button" data-inline="true" data-mini="true">Overlay</a>$( "#idofpanel" ).panel( "open" , optionsHash );

• Die Panel-API befindet sich hier:http://api.jquerymobile.com/panel/




Panels - Responsive

jQuery Mobile 1.3 KompendiumPanels - Responsive (v1.3)

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




Panels - Öffnen per Swipe - HTML

jQuery Mobile 1.3 KompendiumPanels - Öffnen per Swipe - HTML (v1.3)

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




Panels - Öffnen per Swipe - JavaScript

jQuery Mobile 1.3 KompendiumPanels - Öffnen per Swipe - JavaScript (v1.3)

$( document ).on( "pageinit", "#demo-page", function() { $( document ).on( "swipeleft swiperight", "#demo-page", function( e ) { // Überprüfung, ob auf der Seite bereits ein Panel offen ist // Ansonsten würde das Schließen des einen Panels das andere öffnen if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) { if ( e.type === "swipeleft" ) { $( "#right-panel" ).panel( "open" ); } else if ( e.type === "swiperight" ) { $( "#left-panel" ).panel( "open" ); } } });});




Panels - Öffnen per Swipe - CSS

jQuery Mobile 1.3 KompendiumPanels - Öffnen per Swipe - CSS (v1.3)

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

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




ToolbarsHeader und Footer Toolbars




Header Bar

jQuery Mobile 1.3 KompendiumToolbars - Header Bar

• Normale Header Toolbar:<div data-role="header"> <h1>Seitentitel</h1></div>

• Fixieren der Toolbar mittels:<div data-role="header" data-position="fixed">

• Fullscreen-Mode mittels:<div data-role="page" data-fullscreen="true">

(Toolbars sind verschwunden und tauchen erst bei Touch wieder auf - gut für großflächige Seiten wie Galerien oder ähnlichem)

• Die Header Bar hat keinen Default-Backbutton, muss erst einschalten weden (s.u.)




Header Bar - Title

jQuery Mobile 1.3 KompendiumToolbars - 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;}




Header Bar - Fixed Position

jQuery Mobile 1.3 KompendiumToolbars - 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.




Header Toolbar - Buttons

jQuery Mobile 1.3 KompendiumToolbars - 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




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




Header Toolbar - Back-Button


• Zufügen eine Back-Buttons über folgenden Code:<div data-role="page" data-add-back-btn="true"data-back-btn-text="Previous" data-back-btn-theme="e">

Button aktivieren (default ist false): data-add-back-btn="true"

Button-Text: data-back-btn-text="Previous"

Button-Theme: data-back-btn-theme="e"

• Globales Konfigurieren über JavaScript$(document).bind('mobileinit',function(){ $.mobile.page.prototype.options.addBackBtn = true; $.mobile.page.prototype.options.backBtnText = "Previous"; $.mobile.page.prototype.options.backBtnTheme = "b";});




Segmentierte Toolbar

jQuery Mobile 1.3 KompendiumToolbars - 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>




UI Bar

jQuery Mobile 1.3 KompendiumToolbars - 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>




Navbar

jQuery Mobile 1.3 KompendiumToolbars - Navbar

• Toolbar mit einer „Navbar“:<div data-role="header" data-position="fixed"> <h1>Home</h1> <div data-role="navbar"> <ul> <li><a href="#index" data-icon="home">Home</a> <li><a href="#contacts" data-icon="search">Kontakt</a> <li><a href="#events" data-icon="info">Events</a> <li><a href="#news" data-icon="grid">News</a> </ul> </div></div>

• Für Icon-Only einfach Text weglassen




Icons

jQuery Mobile 1.3 KompendiumToolbars - Icons

Übersicht über die verfügbaren Icons:

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






Aktiver Button

jQuery Mobile 1.3 KompendiumToolbars - 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>




Custom Icons

jQuery Mobile 1.3 KompendiumToolbars - 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;}...



http://glyphish.com

http://glyphish.com


ButtonsKlick & Action




Button - Arten

jQuery Mobile 1.3 KompendiumButtons - 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>




Button - Automatische Umwandlung stoppen

jQuery Mobile 1.3 KompendiumButtons - Automatische Umwandlung stoppen

• Um automatische Button-Umwandlung aufzuheben, muss das Attribut data-role="none"

verwendet werden.

• Oder über JS global deaktiviert werden:

$(document).bind('mobileinit',function(){ $.mobile.page.prototype.options.keepNative = "input, select";

});




Icons

jQuery Mobile 1.3 KompendiumButtons - Icons

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

• Eigene ICONS: data-icon="myapp-tweet"<style>.ui-icon-myapp-tweet { background: url(icons/tweet.png)50% 50% no-repeat; background-size: 14px 14px;}@media only screen and (-webkit-min-device-pixel-ratio: 2) { .ui-icon-myapp-tweet { background-image: url(icons-hd/tweet.png) !important; background-size: 18px 18px; }}

</style>






Icon Positionierung

jQuery Mobile 1.3 KompendiumButtons - Icon Positionierung

<a href="#" data-role="button" data-icon="help" data-iconpos="right">Help</a>

<a href="#" data-role="button" data-icon="help" data-iconpos="left">Help</a>

<div data-role="controlgroup">

<a href="#" data-role="button" data-icon="help" data-iconpos="bottom">Help</a>

<a href="#" data-role="button" data-icon="help" data-iconpos="top">Help</a>

</div>




Button Gruppierung

jQuery Mobile 1.3 KompendiumButtons - 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>




Button Effekte

jQuery Mobile 1.3 KompendiumButtons - Effekte

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




FormulareInteraktion




Grundlagen

jQuery Mobile 1.3 KompendiumFormulare - Grundlagen

• Basis-Markup<form action="send.php" action="get" data-transition="pop"> <label for="email">Email:</label> <input type="email" name="email" id="email" value="" /> <button type="submit" name="submit">Submit</button></form>

• Animation beim Wegschicken über data-transition="pop"

• Ohne AJAX über data-ajax="false" oder target="_blank"




Fieldcontainer

jQuery Mobile 1.3 KompendiumFormulare - Fieldcontainer

• Markup<form action="send.php" action="get" data-transition="pop"> <div data-role="fieldcontainer"> <label for="company">Company Name:</label> <input type="text" id="company" name="company"> </div> <div data-role="fieldcontainer"> <label for="email">Email:</label> <input type="email" id="email" name="email"> </div></form>




Formular Felder

jQuery Mobile 1.3 KompendiumFormulare - 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



http://www.quirksmode.org/html5/inputs_mobile.html

http://www.quirksmode.org/html5/inputs_mobile.html


Formular Felder

jQuery Mobile 1.3 KompendiumFormulare - Felder

• Datum-Optionen:date: Datum Tag, Monat, Jahrdatetime: Tag, Monat, Jahr, Stunde, Minutetime: Stunde, Minutedatetime-local: Datum ohne Zeit-Informationmonth: Monats-Selektorweek: Wochen-Selektor

<div data-role="fieldcontainer"> <label for="birth">Your Birthdate:</label> <input type="date" id="birth" name="birth"> <label for="favmonth">Your favorite month:</label> <input type="month" id="favmonth" name="favmonth"></div>




Select

jQuery Mobile 1.3 KompendiumFormulare - Select

• Select-Elemente (Mehrfachauswahl mit multiple)<label for="delivery">Technologie:</label><select name="delivery" id="delivery" multiple="multiple"> <optgroup label="TYPO3"> <option value="extbase">Extbase</option> <option value="pi">pi_base</option> </optgroup> <optgroup label="JavaScript"> <option value="jq">jQuery</option> <option value="jqm">jQuery Mobile</option> <option value="jqui">jQuery UI</option> </optgroup> <optgroup label="HTML5"> <option value="offline">Offline Storage</option> <option value="markup">Markup</option> </optgroup> </select>




Select

jQuery Mobile 1.3 KompendiumFormulare - Select

• Select-Elemente mit eigener ( jQuery Mobile) UI<label for="genre">Technologie:</label><select name="genre" id="genre" data-native-menu="false" multiple="multiple"> <option value="">Wählen Sie aus...</option> <option value="action">TYPO3</option> <option value="comedy">FLOW3</option> <option value="drama">jQuery</option></select>




Radio-Buttons

jQuery Mobile 1.3 KompendiumFormulare - Radio-Buttons

• Radio-Buttons vertikal(name-Attribut muss gleich sein)

<fieldset data-role="controlgroup"> <legend>Technologie:</legend> <input type="radio" name="tech" id="tech1" value="TYPO3" checked="checked" /> <label for="tech1" data-theme="b">TYPO3</label> <input type="radio" name="tech" id="tech2" value="FLOW3" /> <label for="tech2" data-theme="b">FLOW3</label> <input type="radio" name="tech" id="tech3" value="jQuery" /> <label for="tech3" data-theme="b">jQuery</label></fieldset>




Radio-Buttons

jQuery Mobile 1.3 KompendiumFormulare - Radio-Buttons

• Radio-Buttons horizontal<fieldset data-role="controlgroup" data-type="horizontal"> <legend>Technologie:</legend> <input type="radio" name="tech" id="tech1" value="TYPO3" checked="checked" /> <label for="tech1">TYPO3</label> <input type="radio" name="tech" id="tech2" value="FLOW3" /> <label for="tech2">FLOW3</label> <input type="radio" name="tech" id="tech3" value="jQuery" /> <label for="tech3">jQuery</label></fieldset>

• Wichtig, damit horizontale Radiobuttons nicht umbrechen<style> .ui-controlgroup-horizontal .ui-radio label { font-size: 13px !important; }</style>




Checkboxen

jQuery Mobile 1.3 KompendiumFormulare - Checkboxen

• Checkboxen vertikal(name-Attribut muss gleich sein)

<fieldset data-role="controlgroup"> <legend>Technologie:</legend> <input type="checkbox" name="tech" id="tech1" value="TYPO3" checked="checked" /> <label for="tech1" data-theme="b">TYPO3</label> <input type="checkbox" name="tech" id="tech2" value="FLOW3" /> <label for="tech2" data-theme="b">FLOW3</label> <input type="checkbox" name="tech" id="tech3" value="jQuery" /> <label for="tech3" data-theme="b">jQuery</label></fieldset>




Checkboxen

jQuery Mobile 1.3 KompendiumFormulare - Checkboxen

• Checkboxen horizontal<fieldset data-role="controlgroup" data-type="horizontal"> <legend>Technologie:</legend> <input type="checkbox" name="tech" id="tech1" value="TYPO3" checked="checked" /> <label for="tech1">TYPO3</label> <input type="checkbox" name="tech" id="tech2" value="FLOW3" /> <label for="tech2">FLOW3</label> <input type="checkbox" name="tech" id="tech3" value="jQuery" /> <label for="tech3">jQuery</label></fieldset>

• Wichtig, damit horizontale Checkboxen nicht umbrechen<style> .ui-controlgroup-horizontal .ui-checbox label { font-size: 12px !important; }</style>




Slider

jQuery Mobile 1.3 KompendiumFormulare - Slider

• Slider Markup

<div data-role="fieldcontainer"> <label for="qty">Menge:</label> <input type="range" id="qty" name="qty" min="1" max="100" value="5" data-theme="e" data-track-theme="b"></div>

•




Range-Slider

jQuery Mobile 1.3 KompendiumFormulare - Range-Slider (v1.3)

• Range - Slider Markup

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

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



http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/rangeslider.php





Switch

jQuery Mobile 1.3 KompendiumFormulare - Switch

• Switch Markup

<label for="alerts">jQuery:</label><select name="slider" id="alerts" data-role="slider"> <option value="off">Aus</option> <option value="on">An</option></select>

•




ListenParadigmen




Normale Listen

jQuery Mobile 1.3 KompendiumListen - Normale Listen

• Normale Listen:

<ul data-role="listview"> <li>Offline Access</li> <li>Geolocation API</li> <li>Canvas</li> <li>Offline Storage</li> <li>New semantic tags</li></ul>

data-inset="true"




Trenner

jQuery Mobile 1.3 KompendiumListen - Trenner

• Trenner über data-role:

<div data-role="content"><ul data-role="listview"> <li data-role="list-divider">Group A</li> <li>Argentina</li> ... <li data-role="list-divider">Group B</li> <li>United States</li> ... <li data-role="list-divider">Group C <li>Germany</li> ...</ul></div>




Autodivider

jQuery Mobile 1.3 KompendiumListen - Autodivider (v1.2)

• Automatische Trenner über data-autodividers (es erfolgt aber keine Sortierung):

<div data-role="content"> <ul data-role="listview" data-autodividers="true"> <li>jQuery</li> <li>jQuery Mobile</li> <li>Flow</li> <li>Neos</li> <li>TYPO3</li> </ul></div>




Interaktive Listen

jQuery Mobile 1.3 KompendiumListen - Interaktive Listen

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






Auszeichnungen

jQuery Mobile 1.3 KompendiumListen - Auszeichnungen

• Markup für Listenauszeichnungen:<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>




Thumbnails

jQuery Mobile 1.3 KompendiumListen - Thumbnails

• 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 zu verwenden kann man eine Klasse verwenden:

<img src="images/kungfupanda2.jpg" class="ui-li-icon" />




Thumbnails + Split-Button

jQuery Mobile 1.3 KompendiumListen - Split-Button

• Listen-Darstellung mit Thumbnails: <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 verschiedene Aktionen (Links) zu unterstützen




Numerische Listen

jQuery Mobile 1.3 KompendiumListen - Numerische Listen

• Markup über <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>




Numerische Listen

jQuery Mobile 1.3 KompendiumListen - Filter

• <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...";});




Autocomplete (lokal)

jQuery Mobile 1.3 KompendiumListen - Autocomplete (lokal) (v1.3)

• Ohne Inset:

<ul data-role="listview" data-inset="false" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Technologie suchen..."> <li><a href="#">Flow</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">jQuery Mobile</a></li> <li><a href="#">TYPO3</a></li> <li><a href="#">TYPO3 Extbase</a></li> <li><a href="#">TYPO3 Neos</a></li> <li><a href="#">TypoScript</a></li></ul>

• Mit Inset:data-inset="true"




Autocomplete (remote)

jQuery Mobile 1.3 KompendiumListen - Autocomplete (remote) (v1.3)

• HTML:

<div data-role="page" id="myPage">...<h3>Städte weltweit:</h3><p>Nach der Eingabe von mindestens 3 Buchstaben wird die Autocomplete-Funktion alle passenden Einträge zeigen:</p><ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Stadt suchen..." data-filter-theme="d"></ul>

• CSS:.ui-listview-filter-inset { margin-top: 0;}




Autocomplete (remote)

jQuery Mobile 1.3 KompendiumListen - Autocomplete (remote) (v1.3)

• JavaScript:$( document ).on( "pageinit", "#myPage", function() { $( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) { var $ul = $( this ), $input = $( data.input ), value = $input.val(), html = ""; $ul.html( "" ); if ( value && value.length > 2 ) { $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" ); $ul.listview( "refresh" ); $.ajax({ url: "http://gd.geobytes.com/AutoCompleteCity", dataType: "jsonp", crossDomain: true, data: { q: $input.val() } }) .then( function ( response ) { $.each( response, function ( i, val ) { html += "<li>" + val + "</li>"; }); $ul.html( html ); $ul.listview( "refresh" ); $ul.trigger( "updatelayout"); }); } });});



http://gd.geobytes.com/AutoCompleteCity

http://gd.geobytes.com/AutoCompleteCity


Verschachtelte Listen

jQuery Mobile 1.3 KompendiumListen - Verschachtelung

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




Collapsible Lists

jQuery Mobile 1.3 KompendiumListen - Collapsible Lists (v1.2)

• <div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="d"> <h4>TYPO3 Welt</h4> <ul data-role="listview"> <li><a href="#">TYPO3 CMS</a></li> <li><a href="#">TYPO3 Neos</a></li> <li><a href="#">TYPO3 Flow</a></li> </ul></div>

• Das Attribut data-role="collapsible" kann auch auf Listen angewendet werden. Über data-collapsed="false" wird angewiesen, dass bereits ausgeklappt ist, sobald die Seite lädt. Mittels data-inset="false" könnte man zudem das Inset(optische Zusammengehörigkeit der Elemente) aufheben.




ContentInhalte und Auszeichnungen




Grid-Content

jQuery Mobile 1.3 KompendiumContent - Grid-Content

• Spalten und Zeilen (gleichmäßige Aufteilung):<section class="ui-grid-b">  <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>  <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ür Spalte 1 bis 5




Aufklapp-Content

jQuery Mobile 1.3 KompendiumContent - Aufklapp-Content

• <div data-role="content"> <div data-role="collapsible"> <h2>Fusion der CCM GmbH & typovision*</h2> <p>INHALT...</p> </div> <div data-role="collapsible" data-collapsed="true"> <h2>Vorteile der Fusion</h2> <p>Die Fusion bietet...</p> </div></div>

• Kann beliebig verschachtelt werdenDIV > DIV > H2 > DIV > H3 > p

• Styling durch:data-themedata-content-theme




Aufklapp-Content + EMOJ

jQuery Mobile 1.3 KompendiumContent - Aufklapp-Content + EMOJ

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






Akkordion-Funktion

jQuery Mobile 1.3 KompendiumContent - Akkordion Collapsible Set

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




RWDResponsive Web Design




Responsive Web Design

jQuery Mobile 1.3 KompendiumRWD - Einführung (v1.3)

• Oft stellt sich die Frage: jQuery Mobile oder Responsive Web Design verwenden, wenn man auf allen Zugangsgeräten eine adäqute Seite erstellen will.

• jQuery Mobile beantwortet dies bereits früher schon mit „beides“

• Aber erst in Version 1.3 sind Elemente hinzugekommen, die diesen Ansatz komplettieren: Responsive Grids, Reflow Tables, Column Chooser Tables und Sliding Panels

• Einführung: http://view.jquerymobile.com/1.3.0/docs/intro/rwd.php



http://view.jquerymobile.com/1.3.0/docs/intro/rwd.php

http://view.jquerymobile.com/1.3.0/docs/intro/rwd.php


RWD Grids mittels ui-responsive

jQuery Mobile 1.3 KompendiumRWD - Grids (v1.3)

• <h3>Grid A (50/50)</h3><div class="ui-grid-a ui-responsive"> <div class="ui-block-a"><div class="ui-body ui-body-d">Block A</div></div> <div class="ui-block-b"><div class="ui-body ui-body-d">Block B</div></div></div><h3>Grid B (33/33/33)</h3><div class="ui-grid-b ui-responsive"> <div class="ui-block-a"><div class="ui-body ui-body-d">Block A</div></div> <div class="ui-block-b"><div class="ui-body ui-body-d">Block B</div></div> <div class="ui-block-c"><div class="ui-body ui-body-d">Block C</div></div></div>

<h3>Grid C (25/25/25/25)</h3><div class="ui-grid-c ui-responsive"> <div class="ui-block-a"><div class="ui-body ui-body-d">A</div></div> <div class="ui-block-b"><div class="ui-body ui-body-d">B</div></div> <div class="ui-block-c"><div class="ui-body ui-body-d">C</div></div> <div class="ui-block-d"><div class="ui-body ui-body-d">D</div></div></div>...




Eigene RWD Grids Teil 1 (HTML)

jQuery Mobile 1.3 KompendiumRWD - Eigene Grids (v1.3)

• <div class="rwd-example"> <div class="ui-block-a"> <div class="ui-body ui-body-d"> <h2>Überschrift 1</h2> <p>Inhalt 1</p> </div> </div> <div class="ui-block-b"> <div class="ui-body ui-body-d"> <h4>Ueberschrift 2</h4> <p>Inhalt 2</p> </div> </div> <div class="ui-block-c"> <div class="ui-body ui-body-d"> <h4>Ueberschrift 3</h4> <p>Inhalt 3</p> </div> </div></div>




Eigene RWD Grids Teil 2 (CSS)

jQuery Mobile 1.3 KompendiumRWD - Eigene Grids (v1.3)

• .rwd-example div {text-align: left; border-color: #ddd;}.rwd-example p {color: #777;line-height: 140%;}/* Initialisierung */.rwd-example .ui-block-a,.rwd-example .ui-block-b,.rwd-example .ui-block-c {width: 100%;float: none;}/* 1. Breakpoint - Float B und C, A wird im top mit voller Breite gelassen */@media all and (min-width: 42em){ .rwd-example div {min-height:14em;} .rwd-example .ui-block-b, .rwd-example .ui-block-c {float:left;width: 49.95%;} .rwd-example .ui-block-b p, .rwd-example .ui-block-c p {font-size:.8em;}}/* 2. Breakpoint - Float von allen DIVs, 50/25/25 */@media all and (min-width: 55em){ .rwd-example div {min-height:17em;} .rwd-example .ui-block-a, .rwd-example .ui-block-c {float:left;width: 49.95%;} .rwd-example .ui-block-b, .rwd-example .ui-block-c {float:left;width: 24.925%;}}/* 3. Breakpoint - Font-Size für größere Displays vergrößern */@media all and (min-width: 75em){ .rwd-example {font-size:125%;} .rwd-example .ui-block-a, .rwd-example .ui-block-c {float:left;width: 49.95%;} .rwd-example .ui-block-b, .rwd-example .ui-block-c {float:left;width: 24.925%;}}




Reflow Tables über data-mode="reflow"

jQuery Mobile 1.3 KompendiumRWD - Reflow Tables (v1.3)

• <table data-role="table" id="typo3-table" data-mode="reflow" class="ui-responsive table-stroke"><thead> <tr> <th data-priority="1">Hauptversion</th> <th data-priority="1">Patchlevel</th> <th data-priority="persist">Datum Hauptversion</th> <th data-priority="2">End of Maintenance</th> </tr></thead><tbody> <tr> <th>4.5 LTS</th> <td>4.5.25</td> <td>26.01.2011</td> <td>April 2014</td> </tr> <tr> <th>4.6</th> <td>4.6.18</td> <td>25.10.2011</td> <td>April 2013</td> </tr> <tr> <th>4.7</th> ... </tr></table>




Reflow Tables Media Query

jQuery Mobile 1.3 KompendiumRWD - Reflow Tables (v1.3)

• @media ( min-width: 40em ) {/* Zeige den Table-Header und für die Zellen: display: table-cell */ .my-custom-breakpoint td, .my-custom-breakpoint th, .my-custom-breakpoint tbody th, .my-custom-breakpoint tbody td, .my-custom-breakpoint thead td, .my-custom-breakpoint thead th { display: table-cell; margin: 0; } /* Labels ausblenden */ .my-custom-breakpoint td .ui-table-cell-label, .my-custom-breakpoint th .ui-table-cell-label { display: none; }}




Column Chooser Tables

jQuery Mobile 1.3 KompendiumRWD - Column Chooser Tables (v1.3)

• Ausblenden von Spalten mittels data-mode="columntoggle". Priorisierung der auszublendenden Spalten mittels data-priority.Dabei werden höhere Werte bevorzugt ausgeblendet. Kein Ausblenden mittel „persist“

• <table data-role="table" id="typo3-table" data-mode="columntoggle" class="ui-responsive table-stroke"><thead> <tr> <th data-priority="1">Hauptversion</th> <th data-priority="2">Patchlevel</th> <th data-priority="persist">Datum Hauptversion</th> <th data-priority="3">End of Maintenance</th> </tr></thead><tbody> <tr> <th>4.5 LTS</th> <td>4.5.25</td> <td>26.01.2011</td> <td>April 2014</td> </tr>...




Custom DesignTheme-Roller




ThemeRoller

jQuery Mobile 1.3 KompendiumThemeRoller - Link

http://jquerymobile.com/themeroller/index.php






Überblick

jQuery Mobile 1.3 KompendiumThemeRoller - Überblick

• 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




Swatches

jQuery Mobile 1.3 KompendiumThemeRoller - Swatches

• 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




Swatches

jQuery Mobile 1.3 KompendiumThemeRoller - Import/Export

• 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




JavaScript API




Eigene Scripte

jQuery Mobile 1.3 KompendiumJavaScript API - Eigene Scripte

• Eigener Code wird nach dem „mobileinit“-Event eingebunden

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<script>$(document).bind("mobileinit", function() { // Eigener Code hier});</script>

<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></

script>








Events

jQuery Mobile 1.3 KompendiumJavaScript API - Events

• 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

Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666



http://code.jquery.com/mobile/latest/demos/tools/log-page-events.html




http://www.amazon.com/s/ref=ntt_athr_dp_sr_1?_encoding=UTF8&sort=relevancerank&search-alias=books&ie=UTF8&field-author=Brad%20Broulik



Events


• 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();});







Events


• 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 ); }});







Events


• 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" );});







Events


• 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();});







Events


• 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... "); ...});







Events


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







Events


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







Events


• 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..." );});







Events


• 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..." );});







Events


• 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..." );});







Events


• 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..." );});







Events


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







AJAX Navigation 1

jQuery Mobile 1.3 KompendiumJavaScript API - AJAX Navigation 1 (v1.3)

• Link-Klicks abfangen und die URL aufgrund des UI-Changes verändern - Beispiel für „$.mobile.navigate“

// Click-Handler auf alle Links legen$( "a" ).on( "click", function( event ){ // „Normales“ Navigationsverhalten abschalten event.preventDefault(); // URL aufgrund des href-Attributs des Ankers anpassen // und diese Information im data-foo Attribut der URL speichern $.mobile.navigate( this.attr( "href" ), { foo: this.attr("data-foo") }); // Hypothetische Content-Änderung, basierend auf der URL, // z.B. AJAX-Request um JSON zu erhalten und eine Seite zu redern alterContent( this.attr("href") );})




AJAX Navigation 2


• Binden des „navigate“ Events und Reaktion auf das Navigieren

// Reaktion auf Vor-/Zurück-Navigation$( window ).on( "navigate", function( event, data ){ if( data.state.foo ){ // Wenn „foo“ gesetzt ist... } if( data.state.direction == "back" ) { // Sobald „Zurück“ navigiert wurde } // Anpassen des Inhalts, basierend auf der URL alterContent( data.state.url );});




AJAX Navigation 3


• Beispiel:$( "#method-example" ).click(function( event ) { // #bar in der URL anhängen $.mobile.navigate( "#bar", { info: "Infos über den #bar Hash" }); // Austauschen von #bar mit #baz $.mobile.navigate( "#baz" ); // Resultat loggen $( window ).on( "navigate", function( event, data ){ console.log( data.state.info ); console.log( data.state.direction ); console.log( data.state.url ); console.log( data.state.hash ); }); // In der Historie zurück gehen und Logausgabe erzeugen window.history.back();});




Widgets

jQuery Mobile 1.3 KompendiumJavaScript API - Widgets

• Zugriff auf das jQuery Mobile Objekt:$.mobile. bzw. jQuery.mobile

• Mögliche Widgetspagedialogpopupcollapsiblefieldcontainnavbarlistviewcheckboxradiobuttonslidertextinputselectmenucontrolgroup

$.mobile.<widget_name>.prototype.$.mobile.<widget_name>.prototype.options.

$.mobile.page.prototype.options

gültig für

Instanzen: data-role="page"




Default Configuration

jQuery Mobile 1.3 KompendiumJavaScript API - 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";

...});




Data Utilities

jQuery Mobile 1.3 KompendiumJavaScript API - 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




Page Utilities

jQuery Mobile 1.3 KompendiumJavaScript API - 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});




Change Page API

jQuery Mobile 1.3 KompendiumJavaScript API - Change Page API

• $.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




Change Page API


• options (object) (Fortsetzung...)• pageContainer ( jQuery collection, default: $.mobile.pageContainer)

Spezifiziert das Element, welches die Seite nach dem Laden enthält • 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




Change Page API - 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>




Change Page API - 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 );




Dynamische Buttons - Beispiel

jQuery Mobile 1.3 KompendiumJavaScript API - Dynamische Buttons - Beispiel

• 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();});



http://jquerymobile.com





• 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]); } } })});








• 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' })});






• 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" );});




Dynamischer Textinput - Beispiel

jQuery Mobile 1.3 KompendiumJavaScript API - Dynamischer Textinput- Beispiel

• 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" );




Dynamische Select-Felder - Beispiel

jQuery Mobile 1.3 KompendiumJavaScript API - Dynamische Select-Felder- Beispiel

• 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" );




Dynamische Radio-Buttons - Beispiel

jQuery Mobile 1.3 KompendiumJavaScript API - Dynamische Radio-Buttons - Beispiel

• Radio-Buttons 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" );




Dynamische Checkboxen - Beispiel

jQuery Mobile 1.3 KompendiumJavaScript API - Dynamische Checkboxen - Beispiel

• 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" );


$( '<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" });





Dynamische Slider - Beispiel

jQuery Mobile 1.3 KompendiumJavaScript API - Dynamische Slider - Beispiel

• 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});




Dynamische Sitches - Beispiel

jQuery Mobile 1.3 KompendiumJavaScript API - Dynamische Switches - Beispiel

• 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});




Dynamische Listen - Beispiel

jQuery Mobile 1.3 KompendiumJavaScript API - Dynamische Listen - Beispiel

• 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");




Listen filtern

jQuery Mobile 1.3 KompendiumJavaScript API - 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;




Orientierungswechsel

jQuery Mobile 1.3 KompendiumJavaScript API - Orientierungswechsel

• Orientierung feststellen

$(document).bind("orientationchange", function(orientation) { if (orientation=="landscape") {

// Landscape-Mode

} else {

// Portrait-Mode

}

});




Gesten

jQuery Mobile 1.3 KompendiumJavaScript API - Gesten

• Swipe-Right triggern

$(document).bind("mobileinit", function() { $("#page2").live("swiperight", goBackToPage1);});

function goBackToPage1() { $.mobile.changePage("#page1", { reverse: true }); $("#page2").unbind("swiperight", goBackToPage1);}




Seite per API einfügen - 1a

jQuery Mobile 1.3 KompendiumJavaScript API - Seite einfügen

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




Seite per API einfügen - 1b


• 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();};




Seite per API einfügen - 2a


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




Seite per API einfügen - 2b


• JavaScript (ausserhalb mobileinit platzieren)$(document).bind('pagebeforechange', function(event, data) { // Zielseite ist in data.toPage - muss erst normalisiert werden var url = $.mobile.path.parseUrl(data.toPage).hash; if (url!=undefined && url.length>5 && url.substring(0, 5)=="#page") { // Dynamisches Einfügen der Seite var id = url.substring(5); // Dazu wird ein Seiten-Template aus dem DOM benutzt $("#pageTemplate h1").html("Page " + id); // Wechsel zur Seite // ohne die Page-ID in der History zu ändern $.mobile.changePage($("#pageTemplate"), {dataUrl: data.toPage}); // Verhinderung der normalen Seitenanmiation event.preventDefault(); }});




Touch-Events

jQuery Mobile 1.3 KompendiumJavaScript API - 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)




Virtuelle Mouse-Events

jQuery Mobile 1.3 KompendiumJavaScript API - 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)




ChangelogjQuery Mobile 1.1




Changelog jQuery Mobile 1.1

jQuery Mobile 1.3 KompendiumChangelog - jQuery Mobile 1.1

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

Beispiel: http://jquerymobile.com/demos/1.1.0/docs/config/loadingMessageTextVisible.html• Das Feature „touchOverflow“ ist deprecated• jQuery 1.7.1 wird nun unterstützt



http://jq2uerymobile.com/demos/1.1.0/docs/toolbars/bars-fixed-options.html

http://jq2uerymobile.com/demos/1.1.0/docs/toolbars/bars-fixed-options.html

http://jquerymobile.com/demos/1.1.0/docs/config/loadingMessageTextVisible.html

http://jquerymobile.com/demos/1.1.0/docs/config/loadingMessageTextVisible.html




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



http://jquerymobile.com/demos/1.1.0/docs/forms/forms-all-compare.html

http://jquerymobile.com/demos/1.1.0/docs/forms/forms-all-compare.html

http://jquerymobile.com/demos/1.1.0/docs/forms/switch/

http://jquerymobile.com/demos/1.1.0/docs/forms/switch/




• 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


















• Einführung des Popup-Widgets: Damit ist es sehr einfach möglich, Inhalte oder Widgets in ein Overlay zu platzieren, welches über der aktuellen Seite „schwebt“. Damit kann man Tooltips, Menüs, Popup-Formulare, Karten-Overlays oder Lightboxen mit dem selben Widget realisieren.

• Popup History Tracking• Collapsible Lists• Autodividers• Mehrere optische Anpassungen (z.B. Read-Only Listen sehen nun auch optisch so aus, dass man

nicht klicken kann, ...)










• Hauptfokus von jQuery Mobile 1.3 ist „Responsive“• Responsive Grids• Reflow Tables• Column Chooser Tables• Panels• Range-Slider• Navigate Event und Methode• Autocomplete• u.v.a.m.




QuellenWeitere Infos




jQuery Mobile 1.3 KompendiumQuellen - Bücher




Links

jQuery Mobile 1.3 KompendiumQuellen - Links

• jQuery Dokumentationhttp://view.jquerymobile.com/1.3.0/

• jQuery APIhttp://api.jquerymobile.com/

• 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



http://www.jquerymobile.com

http://www.jquerymobile.com

http://www.jqmgallery.com

http://www.jqmgallery.com

http://forum.jquery.com/jquery-mobile

http://forum.jquery.com/jquery-mobile

http://www.opitz-consulting.com/fileadmin/redaktion/veroeffentlichungen/pdf/CheatSheet-jQuery-Mobile.pdf





http://www.codiqa.com/

jQuery Mobile 1.3 KompendiumQuellen - Tools






BeispielejQuery Mobile in the wild





view.jquerymobile.com/1.3.0/www.freudenberg-it.com ikea.seeticur.de



http://www.freudenberg-it.com








chase.comkanbanpad.com m.fiat.esdm.de










Vielen Dank!Fragen?




Sie planen ein eigenes jQuery Mobile Projekt?Sie brauchen Consulting?Sprechen Sie uns an!



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

• 42 Jahre, glücklich verheiratet, wohnhaft in München• Autor von 9 Fachbüchern und > 40 Fachartikeln zum Thema TYPO3 und

Webentwicklung• Selbständig im Bereich Webentwicklung seit 1994• Certified TYPO3 Integrator seit 2009• Mitglied bis 2012 in den TYPO3 Core-Teams:

Certification, Extbase und Content Editorial• Mitglied bis 2012 im Expert Advisory Board der TYPO3 Association (EAB)• Organisator des TYPO3camp Munich 2008-2013 und der T3DD12• Speaker auf nationalen und internationalen Kongressen• Dozent für führende Schulungsinstitute und die MVHS

Patrick LobacherGeschäftsfüher typovision GmbH

Veröffentlichungen:

196

jQuery Mobile 1.3 KompendiumÜber den Autor



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

• Münchner Fullservice-Agentur für digitale Kommunikation• 33 Mitarbeiter (+ 10 aus festem Freelancer Pool)• Geschäftsführer: Sebastian Böttger, Patrick Lobacher• Spezialisiert auf TYPO3 seit 10 Jahren (Extbase/Fluid seit 2009)• Fokus: Premium Webtechnologie und CMS im Open Source Bereich

• Agenturpräsentation unter: www.typovision.de/dieagentur

• Über 600 Web-Projekte jeglicher Größenordnung

• Vision:Wir sind der Partner des Kunden in allen Bereichen seiner digitalen Kommunikation - von der ersten Vision bis hin zur erfolgreichen Umsetzung und darüber hinaus.

typovision GmbH

197

jQuery Mobile 1.3 KompendiumÜber die typovision GmbH



http://www.typovision.de/dieagentur

http://www.typovision.de/dieagentur


jQuery Mobile 1.3 Kompendiumtypovison GmbH Referenzen




Kontakt

Klassisch:

typovision GmbH

Elsenheimerstr. 780687 München

Fon: +49 89 45 20 59 3 - 0Fax: +49 89 45 20 59 3 - 29

Email: [email protected]: http://www.typovision.de

Twitter: www.twitter.com/typovisionwww.twitter.com/PatrickLobacherwww.twitter.com/crosscontent

Facebook: www.facebook.com/typovision

XING: www.xing.com/profile/Patrick_Lobacherwww.xing.com/profile/Sebastian_Boettger2

LinkedInde.linkedin.com/pub/patrick-lobacher/4/881/171/

Slideshare: www.slideshare.net/plobacher

Amazon: www.amazon.de/Patrick-Lobacher/e/B0045AQVEA

jQuery Mobile 1.3 Kompendiumtypovison GmbH Kontakt



mailto:[email protected]

mailto:[email protected]

http://www.twitter.com/_typovision_

http://www.twitter.com/_typovision_

http://twitter.com/PatrickLobacher

http://twitter.com/PatrickLobacher

http://www.twitter.com/crosscontent

http://www.twitter.com/crosscontent

http://www.facebook.com/typovision

http://www.facebook.com/typovision

http://www.xing.com/profile/Patrick_Lobacher

http://www.xing.com/profile/Patrick_Lobacher

http://www.xing.com/profile/

http://www.xing.com/profile/

http://de.linkedin.com/pub/patrick-lobacher/4/881/171/




http://www.slideshare.net/plobacher

http://www.slideshare.net/plobacher

http://www.amazon.de/Patrick-Lobacher/e/B0045AQVEA




Besten Dank für Ihre Aufmerksamkeit

Technology

jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten