jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)

(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012

JQUERY MOBILEKompakt

16.05.2012

Patrick Lobacher (GF typovision GmbH)

1


EINFHRUNGin jQuery Mobile

2


DAS MOBILE WEB - MYTHEN

Es gibt kein mobiles Web - es gibt nur das Web ansich?!

Man bentigt keine spezielle Anpassung fr das mobile Web?!

Eine Website sollte auf allen Zugangsgerten funktionieren?!

Um eine mobile Website zu erstellen, gengt es mit einer Breite von 240px zu arbeiten?!

=> Neue Herausforderungen im mobilen Bereich

3


MOBILE LSUNGEN

4

Native App

(eigener Code fr alle Plattformen)

Hybride App

(Web-Technologie eingebettet in nativem Rahmengerst)

Web App

(speziell optimierte Applikation bestehend aus Web-

Technologie)

Kompatible Website

(Keine Anpassung)

Optimierte Website

(Viewport, BuildIn, ...)

Mobile Framework

(Web-Technologie, optimiert fr alle Zugangsgerte)


MOBILE FRAMEWORKS

5


WAS IST JQUERY MOBILE

Was ist jQuery Mobile?

jQuery Mobile: Berhrungsoptimiertes Web Framework fr 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 wrdevolle Herabstufung

6


JQUERY MOBILE - PROGRESSIVE

Progressive Enhancement?

Basis-Inhalte sind von allen Browsern zugnglich

Basis-Funktionalitten sind von allen Browsern zugnglich

Der Inhalt wird in semantischem Markup abgebildet

Erweitertes Layout wird ber extern verlinkte CSS-Dateien zur Verfgung gestellt

Erweiterte Funktionen werden ber extern verlinkte, unaufdringliche JS-Dateien realisiert

7


WAS IST JQUERY MOBILE NICHT

Was ist jQuery Mobile NICHT? jQuery Mobile ist keine jQuery-Alternative fr 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 natrlich komplette Web-Apps erstellen - die allerdings

erst mit Hybrid-Frameworks wie PhoneGap nativ werden

jQuery Mobile ist kein Framework fr JavaScript Liebhaber Ausser fr erweiterte Themen, wird kein JavaScript bentigt

jQuery Mobile ist NICHT die Lsung fr ALLE mobile Applikationen, Websites oder Spiele

Aber fr die meisten :-)

8


JQUERY MOBILE GESCHICHTE

Erfunden 2010 vom Team rund um Jon Resig ( jQuery Team)

John Resig, JavaScript Tool Entwickler fr die Mozilla Corporation (@jeresig auf Twitter)

Dual Lizenz: GPL oder MIT

jquerymobile.com

Aktuelle Version: 1.1.0 (13.04.2012)

Gre: 19 KB (130 KB)

(Gre jQuery: 32 KB / 247 KB - Gesamt: 51 KB / 377 KB)9


JQUERY MOBILE FEATURE

jQuery Mobile Feature List

Cross platform, cross device, and cross browser

UI optimized for touch devices

Themeable and customizable design

Usage of nonintrusive semantic HTML5 code only, without the need of any Java-Script, CSS, or API knowledge

AJAX calls automatically to load dynamic content

Built on the well-known and supported jQuery core

Lightweight size, 12Kb compressed

Progressive enhancement

Accessibility support (http://www.w3.org/TR/wai-aria/)

10


JQUERY MOBILE KOMPATIBILITT

11


JQUERY MOBILE KOMPATIBILITT

12


HTML5

jQuery Mobile verwendet einige der HTML5/CSS3-Features direkt und kann mit folgenden gut integriert werden:

Offline access Offline storage Web sockets Geolocation access Accelerometer and gyroscope support Animations 2D and 3D transformations Gradients and visual effects Viewport management (for zooming support inside the browser) Webapp installation metadata Integration with native applications Multimedia support Graphic drawing (vector and bitmap)

13


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 Endgert oder Emulator testen!!14


GETTING STARTEDJetzt gehts los :-)

15


JQUERY MOBILE EINBINDEN

Download von http://jquerymobile.com/download/

Einbindung von LATEST (nur zu Testzwecken):

16


HTML5-GRUNDGERST

Basis HTML

Titel

17


META-DATEN

Angaben fr den Viewport

width = Wert in Pixel oder device-widthinitial-scale = Wert der initialen Skalieren (1.0 fr normal)maximum-scale = Wert fr die maximal mgliche Skalierungminimum-scale = Wert fr die minimal mgliche Skalierunguser-scalable = Angabe, ob der User berhaupt skalieren darf

Angaben zum Fullscreen-ModusFullscreen Modus - kein Bottom-Controls und kein URL-Feld mehr - kann per JS ber window.navigator.standalone abgefragt werdenFarbe der Status-Leiste oben - diese kann nicht ausgeblendet werden

18


WEBCLIPS ICON

Fr alle Icon-Gren und/oder Devices mssen eigene Angaben gemacht werden:

=> iPhone/iPod: 320460 / iPad Portrait: 7481004 / iPad Landscape: 7481024(rotated 90 degrees)

19


RESPONSIVE LAYOUTS MIT JQM

Media-Queries z.B. um die Orientierung zu befragen:@media (orientation: portrait) { /* Code hier fr die Orientierung Portrait... */}@media (orientation: landscape) { /* Code hier fr die Orientierung Landscape... */}

=> http://www.w3.org/TR/css3-mediaqueries/

Beim Orientierungswechsel kann es in iOS-Gerten dazu kommen, dass der Zoom nicht mehr stimmt (iOS Bug) - dafr gibt es zwei Lsungen:

Abschalten des Zooms

Dynamisches Neuberechnen des Zoomshttp://adactio.com/journal/4470/

20


RESPONSIVE LAYOUTS MIT JQM

Beispiel: Label neben Formularelemente im Landscape Mode:@media all and (min-width: 450px){2 label.ui-input-text { display: inline-block; }}

=> http://www.w3.org/TR/css3-mediaqueries/

Abfrage von iOS Retina [email protected] screen and (-webkit-min-device-pixel-ratio: 2){ // iOS Rentina Display}

Abfrage der Media Queries ber jQuery// Test auf Screen Media Type$.mobile.media("screen");

// Test auf min-width$.mobile.media("screen and (min-width: 480px)");

// Test auf iOS Retina Display$.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)");

21


ARCHITEKTUR

Cards & Roles

Idee kommt von WML: Eine oder mehrere Zielseiten befinden sich in einem HTML-Dokument

Eine Seite ist ein DIV-Element mit einer spezielle Rolle Zugehriges Attribut ist data-role (In HTML5 gibt es die data-* Attribute um spezielle, eigene

Auszeichnungen zu vergeben - custom data attributes) Vorteil: Funktioniert auch auf Non-HTML5-Browser

22


ARCHITEKTUR - ROLLEN

23


SEITENSTRUKTUR

data-role ist NICHT mandatory - aber guter Stil!

Header

CONTENT

Footer

24


ABLAUF

25

Semantisches HTML5 Markup

jQuery Mobilepage

enhancementsanreichern umwandeln


SEITENSTRUKTUR - JQM Das macht jQuery Mobile aus der Seite (enhancement)

Titel Header

CONTENT
Footer loading
26


THEMING Alle Elemente werden ber ein Theme dargestellt

Default ist ein Theme enthalten, weitere mssen ber den sogenannten Theme-Roller eingebracht werden: http://jquerymobile.com/themeroller/

Jedes Theme ist in Swatches unterteilt (unterschiedliche Optionen)

Ansprechen ber data-theme="buchstabe"

27


MULTI-PAGEMehrere Seiten in einem Dokument

28


MULTI-PAGE TEMPLATE Weitere Seiten ber separate DIVs mit data-role="page" und eindeutiger ID die mittels

Anker-Link angesprungen wird. Seitentitel ber data-title="Home".

Willkommen! Kontakt

Kontakt Kontakt Infos... /* Seitenspezifisches JavaScript */

29


SEITENTITEL

1. Wenn ein Wert fr data-title existiert, wird dieser fr den Titel der internen Seite verwendet.

2. Wenn kein Wert fr data-title existiert, wird der Header (data-role="header") verwendet.

3. Existiert weder ein Wert fr data-title noch ein Header, wird das Element innerhalb des Elements auf der Seite verwendet.

30


VERLINKUNG Wenn man auf HTML-Dokumente verlinkt, die ebenfalls eine

Seitenstruktur ber data-role="page" beinhalten, wird diese wie eine interne Seite behandelt

Enthlt das externe Dokument allerdings mehrere HTML-Seiten, so muss bei Link das Attribut rel="external" oder target="_blank" verwendet werden

Das fhrt 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)

Zustzlich ist es nicht mglich, Anker im klassischen Sinn zu verwenden, da diese als Sprungmarken fr interne Seite dienen.

31


NAVIGATIONENLinks Links Links :-)

32


NAVIGATION

In jQuery Mobile werden vier Link-Arten unterschieden: Interne Links zu einer anderen Seite die im selben Dokument

enthalten ist (Multipage-Dokument) Externer JQM Link zu einer anderen Seite in einem anderen

Dokument Externer Link zu einer Nicht-jQueryMobile Seite Mobile Spezial-Links

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

33


INTERNE LINKS (#ID)

34

Quelle Grafik:jQuery Mobile - Up and running

Maximiliano FirtmanOReilly

ISBN: 978-1-449-39765-4


EXTERNER JQM REQUEST

35

jQuery Mobile

Page RequestHijax-Request

Web Server

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

Append to DOM

Enhance Page

Transition

Hijax-Response


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 hierfr die URL der Seite

Allerdings kann man diesen Wert gezielt berschreiben indem man das Attribut selbst setzt.

Dies ist insbesondere nach einem Redirect sinnvoll

Oder wenn man den Dateinamen verstecken und nur die URL-Pfad anzeigen will

36


EXTERNE JQM REQUEST1. jQuery Mobile parst das Attribut href ldt die Zielseite mittels eines Ajax-

Requests (Hijax).2. Wenn die Seite erfolgreich geladen wurde, wird sie in das DOM

eingehngt3. Ist dies erfolgreich, reichert jQuery Mobile die Seite an -inbesondere wird

das base Element erweitert und das data-url Attribut gesetzt (wenn dies noch nicht explizit geschehen ist)

4. Nun fhrt 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 gleichermaen nach links raus).

5. Anschlieend bekommt die aktive Seite die Klasse ui-page-active zugewiesen

6. Schlielich wir die URL angepasst, soda ein Bookmark gesetzt werden kann (pushState Feature von HTML5)

7. Schlgt das Laden fehl, wird ein Error Loading Page Overlay gezeigt

37


TRANSITIONS (BERGNGE)1. jQuery Mobile verfgt ber 9 eingebaute Transitions:

1. fade (Ausblenden/Einbleden)2. pop (Vergrern/Verkleinern)3. flip (Umdrehen - wie eine Karte)4. turn (Rausklappen/Reinklappen nach/von Links)5. flow (Animationseffekt bekannt vom iPhone Safari beim Wechsel von Seiten)6. slidefade (Rausfahren/Reinfahren nach/von links bei gleichzeitigem Ausblenden/Einblenden)7. slide (Rausfahren/Reinfahren nach/von links)8. slideup (Rausfahren/Reinfahren nach/von oben bei gleichzeitigem Ausblenden/Einblenden)9. slidedown (Rausfahren/Reinfahren nach/von unten bei gleichzeitigem Ausblenden/Einblenden)10. none (Keine Animation)

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

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

38


DIALOGE VS. SEITEN1. Dialoge sind Seiten mit einem

abgenderten UI2. Die Seite wird auf dem Hintergrund platziert,

mit abgerundeten Ecken dargestellt und mit einem Schlieen-Button links oben versehen

3. Eingeleitet wird ein Dialog mit dem AttributAGB

4. Oder aber bei der Definitionder Seite selbstAGB

5. Dialoge knnen nicht gebookmarkt werden und tauchen nicht in der History auf.

6. Dialoge knnen per API geschlossen werdenfunction processAgreement(){ // Dialog schlieen $('.ui-dialog').dialog('close');}

39


ACTION SHEETS1. Action Sheets sind Dialoge die von

oben animiert hereinfahren2. Auf diesen wird meist eine User-Interaktion eingefordert3. Technisch gesehen sind dies Dialoge,

denen Header und Footer fehlt

4. Code:Logout LOGOUT: Sicher? Yepp! Niemals! span.title { display:block; text-align:center; margin-top:10px; margin-bottom:20px; }

40


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 abschlieender

Slash angeben werden => href="/clients/" . Das target-Attribut darf nicht angegeben werden

Alle anderen Flle fhren zu einem normalen Laden der Seite Vorab laden von Seiten ber das Attribut data-prefetchLade Seite vorab

DOM-Caching (erzeugtes DOM der Seite wird gecached):

41


EXTERNE ABSOLUTE LINKS

Externe absolute Links werden wie folgt erzeugt: Zufgen des Attributs: data-rel="external"typovison

Zufgen eines target Attributstypovison

Verweisen auf eine andere Domaintypovison

Verwenden des Attributs: data-ajax="false"typovison

Dieses Attribut kann auch auf die Seite selbst angewendet werden

42


MOBILE SPEZIAL-LINKS

Es gibt einige spezielle Links: Starten der Telefon-AppRufen Sie uns an!

Facetime (nur auf iOS)Rufen Sie uns ber Facetime an

Skype (nur wenn vorhanden)Rufen Sie uns ber Skype an

EmailSchreiben Sie uns!

SMSSchreiben Sie uns eine SMS

43


TOOLBARSHeader & Footer Toolsbars

44


HEADER BAR Normale Header Toolbar:

Seitentitel

Fixieren der Toolbar mittels:

Fullscreen-Mode mittels:(Toolbars sind verschwunden und tauchen erst bei Touch wieder auf - gut fr groflchige Seiten wie Galerien oder hnlichem)

Die Header Bar hat keinen Backbutton per Default, man muss diesen einschalten (siehe spter)

45


HEADER BAR - TITLE

Auf den Header/Footer wird das CSS-Attribut text-overflow: ellipsis gelegt um den Titel abzuschneiden und mit ... aufzufllen: Ziemlich langer Titel

Dies kann ber folgendes CSS verhindert werden:.ui-header .ui-title, .ui-footer .ui-title { margin-right: 0 !important; margin-left: 0 !important;}

46


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 untersttzt dafr 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 ausschlielich im Content-Bereich zoomen, so kann man dies mittels touchOverflowZoomEnabled einschalten.

47


HEADER TOOLBAR - BUTTONS Toolbar mit einem Button:

Log out Title

Toolbar mit zwei Buttons:

Log out Title Settings

Will man den Button rechts positionieren, kann manclass="ui-btn-right" verwenden

48


HEADER TOOLBAR - BUTTONS

Button ohne Text:

Header

Zur Realisierung eines eigene Back-Buttons:

data-rel="back"

Dies stattet den Button mit einer Back-Funktion aus. Das Linkziel wird dann nicht mehr beachtet und die Animation findet mit der Richtung reverse statt. Funktioniert nur in A- und B-Grade Browser. C-Grade Browser ignorieren das Attribut und folgen dem Link-Ziel

49


BACK-BUTTON

Zufgen eine Back-Buttons ber folgenden Code:

Button aktivieren (default ist false): data-add-back-btn="true"Button-Text: data-back-btn-text="Previous"Button-Theme: data-back-btn-theme="e"

Globales Konfigurieren ber JavaScript

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

50


TOOLBARS - SEGMENTED

Segmentierte Toolbar: Filme Im Kino In Krze Top-Filme .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; }

51


TOOLBARS - UI-BAR

Toolbar mit einer UI-Bar:

Refresh Filter Search New Item

52


TOOLBARS - NAVBAR

Toolbar mit einer UI-Bar: Home Home Kontakt Events News

Fr Icon-Only einfach Text weglassen

53


ICONS

bersicht ber die verfgbaren Icons:

http://jquerymobile.com/test/docs/buttons/buttons-icons.html

54


TOOLBARS - AKTIVER BUTTON

Aktiver Button mittels:

Home Contacts Events News

55


TOOLBARS - PERSISTENZ

Nach jedem Ladevorgang wird auch die Footer-Toolbar neu geladen. Will man diese persistieren (kein Neuladen), so muss man folgenden Code verwenden: Kino Theater Kino Theater

56


TOOLBARS - CUSTOM ICONS Verwendung von eigenen Icons (beispielsweise von http://

glyphish.com/) Home Kino Theater .ui-navbar-custom .ui-btn .ui-btn-inner { font-size: 11px!important; padding-top: 24px!important; padding-bottom: 0px!important;}.ui-navbar-custom .ui-btn .ui-icon { width: 30px!important; height: 20px!important; margin-left: -15px!important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important;}#home .ui-icon { background: url(icons/53-house.png) 50% 50% no-repeat; background-size: 22px 20px;}...

57


BUTTONSKlick & Action

58


BUTTONS - ARTEN Mgliche Arten:Klick mich!Klick mich auch!

Inline Buttons ber:B1

Icon-Buttons ber:Search

59


BUTTONS - NATIVE BEIBEHALTEN Um automatische Button-Umwandlung aufzuheben, muss das Attribut

data-role="none"

verwendet werden.

Oder ber JS global deaktiviert werden:

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

60


BUTTON-ICONS

ICONS:http://jquerymobile.com/test/docs/buttons/buttons-icons.html

Eigene ICONS: data-icon="myapp-tweet".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; }}

61


ICON-POSITIONIERUNG

Positionierungen:Help

Help

Help

Help

62


BUTTONS - GRUPPIERUNG Button-Gruppierung: Button 1 Button 2 Button 2

Button-Gruppierung horizontal: Button 1 Button 2 Button 2

63


BUTTONS - EFFEKTE

Button-Effekte:Help

64


FORMULAREInteraktion

65


FORMULARE - GRUNDLAGEN

Email: Submit

Animation beim Wegschicken ber data-transition="pop"

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

66


FORMULARE - FIELDCONTAINER Company Name: Email:

67


FORMULARE - FELDER

Mgliche Feld-Arten:

Untersttzung siehehttp://www.quirksmode.org/html5/inputs_mobile.html

68


FORMULARE - FELDER

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

Your Birthdate:Your favorite month:

69


FORMULARE - SELECT 1/2 Select-Elemente (Mehrfachauswahl mit multiple)

Technologie: Extbase pi_base jQuery jQuery Mobile jQuery UI Offline Storage Markup

70


FORMULARE - SELECT 2/2 Select-Elemente mit eigener ( jQuery Mobile) UI

Technologie: Whlen Sie aus... TYPO3 FLOW3 jQuery

71


FORMULARE - CHECKBOXEN Radio-Buttons (name-Attribut muss gleich sein)

Technologie: TYPO3 FLOW3 jQuery Technologie: TYPO3 FLOW3 jQuery

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

72


FORMULARE - CHECKBOXEN Checkboxen (name-Attribut muss gleich sein)

Technologie: TYPO3 FLOW3 jQuery Technologie: TYPO3 FLOW3 jQuery

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

73


FORMULARE - SLIDER Menge:

74


FORMULARE - SWITCH jQuery: Aus An

75


LISTENParadigmen

76


NORMALE LISTEN

Normale Listen: Offline Access Geolocation API Canvas Offline Storage New semantic tags

77

data-inset="true"


TRENNER

Trenner: Group A Argentina ... Group B United States ... Group C Germany ...

78


INTERAKTIVE LISTEN

Interakive Listen: Interner Link Externer Link Absoluter externer Link Telefon JavaScript link

79


LISTEN-AUSZEICHNUNG

Listen-Auszeichnungen: Sonntag

20.Mai 2012
18 Uhr Meeting Sonntag
20.Mai 2012
Mails 123
80


LISTEN DARSTELLUNG

Listen-Darstellung mit Thumbnails: Kung Fu Panda

Rated: PG

Runtime: 95 min.
...
Um Icons mit der Gre 16x16 Pixel zuverwenden kann man eine Klasse verwenden:

81


LISTEN - SPLIT BUTTONS

Listen-Darstellung mit Split-Buttons: Kung Fu Panda

Rated: PG

Runtime: 95 min.
Tickets kaufen
Eignet sich sehr gut um zwei verschiedeneAktionen (Links) zu untersttzen

82


NUMERISCHE LISTEN

Numerische Listen mittel -Tag: TYPO3 FLOW3 jQuery jQuery Mobile

83


LISTEN FILTERN

Filtern von Listen

TYPO3 FLOW3 jQuery jQuery Mobile

Suchen in Meta-Daten (findet auch AAPL z.B.)AppleUnited States

Der Platzhalter-Text kann auch global gesetzt werden:$(document).bind('mobileinit',function(){ $.mobile.listview.prototype.options.filterPlaceholder="Suche...";});

84


VERSCHACHTELTE LISTEN

Verschachtelte Listen

TYPO3 TCA TCE TypoScript FLOW3 jQuery

Verschachtelte Listen werden automatisch zugeklappt angezeigt. Ein Klick auf eines der Elemente sorgt dafr, dass mittels eine Slide-Animation die Unterliste angezeigt wird.

85


CONTENTInhalte und deren Auszeichnung

86


GRID-CONTENT

Spalten und Zeilen (gleichmige Aufteilung): Zelle 1.1 Zelle 1.2 Zelle 1.3 Zelle 2.1 Zelle 2.2


AUFKLAPP-CONTENT Aufklapp-Content: berschrift1

INHALT1
berschrift2
INHALT2

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

Styling durch:data-themedata-content-theme

88


AUFKLAPP-CONTENT + EMOJI

Aufklapp-Content mit EMOJI-Icons (nur iOS):

Wireless Notifications Location Services Applications Faceoff LinkedOut Netflicks

http://www.iphone-ticker.de/ios-5-alle-emoji-symbole-auf-einen-blick-22663/

89


AKKORDION - COLLAPSIBLE SET Akkordion-Funktion (nur ein ausgeklappter

Container zur gleichen Zeit):

Wireless Notifications Location Services Applications Faceoff LinkedOut Netflicks

90


THEME-ROLLERCustom Designs

91


EIGENE SKRIPTE

92

http://jquerymobile.com/themeroller/


THEME ROLLER

Mit dem Theme Roller ist es mglich ein individuelles Theme zu erstellen, dieses runterzuladen und dann zu verwenden

Es ist damit mglich alle Elemente individuellzu gestalten

In the Global-Settings knnen globale Einstellungen getroffen werden, die in allenSwatches gelten sollen

93


THEME ROLLER

Es knnen beliebig viele Swatches hinzugefgt werden Man kann entweder den eingebauten Farbwhler (mit Brightness-

und Saturation-Funktion) verwenden oder Adobe Kuler

94


THEME ROLLER

Man kann ein altes Theme importieren und umwandeln lassen in ein Theme der Version 1.1.0

Das fertig Theme kann anschlieend heruntergeladen werden Oder man teilt das Theme mit anderen Leuten ber einen

eindeutigen Link

95


JAVASCRIPTUnd das Framework

96


EIGENE SKRIPTE

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

97


EVENTS 1/12

Um Events nachzuvollziehen, kann man einen Event Logger als Bookmarklet verwenden:http://code.jquery.com/mobile/latest/demos/tools/log-page-events.html

mobileinitWenn jQuery Mobile initialisiert wird,wird ein mobileinit Event auf dasdocument Objekt getriggert

98

Quelle Grafik:Pro jQuery MobileBrad BroulikApressISBN: 978-1430239666


EVENTS 2/12

pagebeforechangeDies ist der erste Event der whrendeinem Seitenwechsel getriggert wird.

$( document ).bind( "pagebeforechange", function( e, data ) { console.log("Seitenwechsel startet..."); // Hole die Seite var toPage = data.toPage; // Hole die Optionen der Seite var options = data.options; // Etwas mit der Seite machen // z.B. Seitenwechsel abbrechen e.preventDefault();});

99



EVENTS 3/12

pagebeforeloadDies ist der erste Event der whrenddem Laden der Seite getriggert wird.

$( document ).bind( "pagebeforeload", function( e, data ){ console.log("Laden der Seite startet"); // Manuelles Laden triggern e.preventDefault(); // Seite laden + Einfgen ins DOM var response = manuallyLoadPage(); if (response.status = "success") { data.deferred.resolve( data.absUrl, data.options,response.page); } else { data.deferred.reject( data.absUrl, data.options ); }});

100



EVENTS 4/12

pagebeforecreateDieser Event tritt auf, nachdem der Seiten-Container zum DOM hinzugefgt wurde und bevor die Seite angereichert wird.

$( "#to-page-id" ). live( "pagebeforecreate", function(){ console.log( "Hier sollte das Markup geparst werden, bevor es angereichert wird" );});

101



EVENTS 5/12

pagecreateHier ist der beste Platz um Seiten-Plugins zu initialisieren.

$( "#to-page-id" ).live( "pagecreate", function(){ console.log("Seiten-Plugins werden initialisiert...); // Initialisiere eigene Plugins ( ":jqmData(role='my-plugin') " ) .myPlugin();});

102



EVENTS 6/12

pageinitEvent der auftritt, nachdem die Anreicherung komplett ist. Die Seite ist nun DOM-Ready.

$( "#to-page-id" ).live( "pageinit", function(){ console.log("Die Seite wurde angereichert... "); ...});

103



EVENTS 7/12

pageloadEvent nachdem die Seite erfolgreichins DOM geladen wurde.

$( document ).bind( "pageload", function( e, data ){ console.log("Seite wurde erfolgreich ins DOM geladen...");});

pageloadfailedWird aufgerufen, wenn das Laden fehl schlgt.

104



EVENTS 8/12

pagebeforehideWird auf der Seite getriggert von der die Animation startet. Wird nur abgefeuert, wenn der Seitenwechsel eine dedizierte von Seite besitzt.

$( "#from-page-id" ).live( "pagebeforehide", function( e, data ){ console.log( "Der Seitenbergang startet jetzt..." );});

105



EVENTS 9/12

pagebeforeshowWird auf der Seite getriggert zu der die Animation fhren soll. Wird nur abgefeuert, wenn der Seitenwechsel eine dedizierte zu Seite besitzt.

$( "#from-page-id" ).live( "pagebeforeshow", function( e, data ){ console.log( "Der Seitenbergang startet jetzt..." );});

106



EVENTS 10/12

pagehideWird auf der Seite getriggert von der die Animation gestartet ist und die nun versteckt ist.

$( "#from-page-id" ).live( "pagehide", function( e, data ){ console.log( "Der Seitenbergang ist fertig..." );});

107



EVENTS 11/12

pageshowWird auf der Seite getriggert zu der die Animation fhren soll und die nun sichtbar ist.

$( "#from-page-id" ).live( "pageshow", function( e, data ){ console.log( "Der Seitenbergang ist fertig..." );});

108



EVENTS 12/12

pagechangeLetzter Event eines Seitenwechsels.

$( document ).bind( "pagechange", function( e, data ){ console.log(Change page successfully completed...); var toPage = data.toPage; var options = data.options;});

pagechangefailedWird getriggert, falls der Seitenwechsel fehl schlgt.

109



WIDGETS

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

Mgliche Widgetspagedialogcollapsiblefieldcontainnavbarlistviewcheckboxradiobuttonslidertextinputselectmenucontrolgroup

110

$.mobile..prototype.$.mobile..prototype.options.

$.mobile.page.prototype.options

gltig fr

Instanzen: data-role="page"


DEFAULT CONFIGURATION

ndern von Default-Werten:$(document).bind("mobileinit", function() { $.mobile.pushStateEnabled = true; $.mobile.loadingMessage = "Ldt..."; $.mobile.pageLoadErrorMessage = "Fehler!"; $.mobile.defaultPageTransition = "fade"; $.mobile.minScrollBack = 150; $.mobile.activeBtnClass = "active-button"; $.mobile.ajaxEnabled = false; $.mobile.allowCrossDomainPages = true;

// resultiert in $.mobile.ns = "typovision";

...});

111


DATA UTILITIES

Zugriff auf die Data-Attributevar buttons = $("a[data-role=button"]);var buttons = $("a:jqmData(role='button')");

$("a").jqmRemoveData("transition"); // statt removedata$("#button1").jqmData("theme", "a"); // statt data

112


PAGE UTILITIES Seiten-Funktionen

// activePage ist das var currentPageId = $.mobile.activePage.id;

// pageContainer ist das $.mobile.pageContainer...

// Laden einer externen Seite$.mobile.changePage("external.html");

// bergang zu einer internen Seite im selben Doc$.mobile.changePage($("#pageId"));$.mobile.changePage($("#page2"), { transition: "slide", reverse: true});

113


API - CHANGEPAGE 1/2 $.mobile.changePage( toPage, [options] ) toPage (string oder jQuery collection)

toPage: URL (contact.html) oder interne ID (#contact) toPage: jQuery collection ($("#contact"))

options (object) transition (string, default: $.mobile.defaultTransition, slide)

bergangs-Animations-Funktion reverse (boolean, default: false)

Ablauf der Animation: Vorwrts=false, Rckwrts=true changeHash (boolean, default: true)

Aktualisierung des Hash in der URL-Zeile role (string, default: page)

Das data-role Attribut. Kann page oder dialog sein pageContainer ( jQuery collection, default: $.mobile.pageContainer)

Spezifiziert das Element, welches die Seite nach dem Laden enthlt

114


API - CHANGEPAGE 2/2

options (object) (Fortsetzung...) type (string, default: get)

Spezifiziert die Methode des Ladens (get oder post) data (string oder object, default: undefined)

Daten, die an den AJAX-Request gesendet werden reloadPage (boolean, default: false)

Forciert einen Reload der Seite, selbst wenn diese im DOM-Cache ist showLoadMsg (boolean, default: true)

Anzeigen einer Loading-Message whrend des Ladens fromHashChange (boolean, default: false)

Zeigt an, dass die Funktion aus einem hashchange Event aufgerufen wurde

115


CHANGEPAGE - BEISPIEL 1/2 Beispiel 1

function viewProduct(idProduct) { $.mobile.changePage("productdetail.php", { method: "post", data: { action: 'getProduct', id: idProduct }, transition: "fade" });}Produkt-Details

116


CHANGEPAGE - BEISPIEL 2/2

Beispiel 2

/* Erstellung und ffnen einer neuer Seite */

// Erstellung des Markupsvar newPage = $("Neuer HeaderNeuer Inhalt!");

// Fge die Seite zum Seitencontainer hinzunewPage.appendTo( $.mobile.pageContainer );

// bergang zur neuen Seite einleiten$.mobile.changePage( newPage );

117


DYNAMISCHE BUTTONS 1/4

Grundstruktur des Markups Dynamische Buttons Erzeuge Button1

Button ans Ende zufgen$( "#create-button1" ).bind( "click", function() { $( 'Button1' ) .appendTo( ".ui-content" ) .button();});

118


DYNAMISCHE BUTTONS 2/4 Button nach dem Klick-Button zufgen

$( "#create-button2" ).bind( "click", function() { $( 'Button2' ) .insertAfter( "#create-button2" ) .button({ corners: true, icon: "home", inline: true, shadow: true, theme: 'a', create: function(event) { console.log( "Creating button..." ); for (prop in event) { console.log(prop + ' = ' + event[prop]); } } })});

119



Input-Type Button zufgen und konfigurieren

$( "#create-button5" ).bind( "click", function() { $( '' ) .insertAfter( "#create-button5" ) .button();});

$( "#create-button6" ).bind( "click", function() { $( '' ) .insertAfter( "#create-button6" ) .button({ 'icon': "home", 'inline': true, 'shadow': true, 'theme': 'a' })});

120



Mehrere Buttons zufgen sowie Aktivierung/Deaktivierung

$( "#create-multiple-buttons" ).bind( "click", function() { $( 'Button3' ).insertAfter( "#create-multiple-buttons" ); $( 'Button4' ).insertAfter( "#button3" ); $.mobile.pageContainer.trigger( "create" );});

$( "#disable-button3" ).bind( "click", function() { $( "#button3" ).button( "disable" );});

$( "#enable-button3" ).bind( "click", function() { $( "#button3" ).button( "enable" );});

121


DYNAMISCHER TEXTINPUT

Input-Felder dynamisch hinzufgen sowie De-/Aktivierung

$( '' ) .insertAfter( "#firstName" ) .textinput();

$( '' ) .insertAfter( "#text1" ) .textinput({ theme: 'c' });

$( "#text1" ).textinput( "disable" );

$( "#text1" ).textinput( "enable" );

122


DYNAMISCHE SELECTS

Selectmens erzeugen

$( '...' ) .insertAfter( "#foo" ) .selectmenu();

$( '...' ) .insertAfter( "#select1" ) .selectmenu({ theme: "e", overlayTheme: "c", disabled: false, nativeMenu: false});

$( "#select1" ).selectmenu( "disable" );

$( "#select1" ).selectmenu( "enable" );

123


DYNAMISCHE RADIOBUTTONS

Radiobuttons erzeugen

$( ' Map view: Map...') .insertAfter( "#radio1" );$.mobile.pageContainer.trigger( "create" );

$( ' Map view: Map...' ) .insertAfter( "#radio1" );

$( "#map1" ).checkboxradio({ theme: "e" });$( "#map2" ).checkboxradio({ theme: "e" });

$.mobile.pageContainer.trigger( "create" );

124


DYNAMISCHE CHECKBOXEN

Checkboxen erzeugen

$( ' Genre: Action...' ) .insertAfter( "#element1" );


$( ' Genre: Action...' ) .insertAfter( "#create-cb2" );

$( '#c3' ).checkboxradio({ theme: "e" });$( '#c4' ).checkboxradio({ theme: "e" });


125


DYNAMISCHE SLIDER

Slider erzeugen

$( 'Brightness: ') .insertAfter( "#element1" );$( "#s1" ).slider();

$( 'Brightness: ' ) .insertAfter( "#create-s2" ); $( "#s1" ).slider({ theme: "d", trackTheme: "a", disabled: false});

126


DYNAMISCHE SWITCHES

Switch erzeugen

$( '' ) .insertAfter( #foo ) .slider();

$( '...' ) .insertAfter( #switch1 ) .slider({ theme: "b", trackTheme: "c", disabled: false});

127


DYNAMISCHE LISTEN

Listen erzeugen$( ' Genres Action Comedy' ) .insertAfter( "#list0" ) .listview();

$( 'Genres Action Comedy' ) .insertAfter( "#list1" ) .listview({ theme: "d", dividerTheme: "a", inset: true,});

$( "#list1" ) .append('Drama') .listview("refresh");

128


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 enthlt den Text der ListesearchValue enthlt den eingetippten Suchstring

$(document).bind('mobileinit',function(){ $.mobile.listview.prototype.options.filterCallback = function( text, searchValue ){ // Verwenden eine Suche am Anfang-Funktion return !(text.toLowerCase().indexOf( searchValue ) === 0); };});

Die Default-Suche ist wie folgt definiert:return text.toLowerCase().indexOf( searchValue ) === -1;

129


PLATTFORM-UTILITIES

130


PFAD-UTILITIES

131


ORIENTATION CHANGE

Orientierung feststellen

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

// Landscape-Mode

} else {

// Portrait-Mode

}

});

132


GESTEN

Swipe-Right triggern

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

133


BEISPIELE: SEITEN ZUFGEN 1/2

HTML-Markup

Dynamic page Add Pages

134


BEISPIELE: SEITEN ZUFGEN 2/2

JavaScript (ausserhalb mobileinit platzieren)

function addPages() { for (var i=1; i


BEISPIELE: SEITEN ERZEUGEN 1/2

HTML-Markup

Dynamic pages Page 1 Page 2 Page 3 Page 4 Header Content Footer

136


BEISPIELE: SEITEN ERZEUGEN 2/2

JavaScript (ausserhalb mobileinit platzieren)

$(document).bind('pagebeforechange', function(event, data) { // We receive the destination page in data.toPage and we normalize it var url = $.mobile.path.parseUrl(data.toPage).hash; if (url!=undefined && url.length>5 && url.substring(0, 5)=="#page") { // We dynamically inject a new page var id = url.substring(5); // We will use a page template already in the DOM $("#pageTemplate h1").html("Page " + id); // We change to the real page template without using // its real page id in history $.mobile.changePage($("#pageTemplate"), {dataUrl: data.toPage}); // We prevent normal page transition event.preventDefault(); }});

137

Quelle Code:jQuery Mobile - Up and running

Maximiliano FirtmanOReilly

ISBN: 978-1-449-39765-4


TOUCH EVENTS

tab (Kurzes Tippen)

tabhold (Tippen und mindestens ca. 1s halten)

swipe (Wischen, mindestens 30px horizontal und max 20px vertikal, innerhalb einer 1s - alle Parameter einstellbar)

swipeleft (swipe nach links)

swiperight (swipe nach rechts)

138


VIRTUELLE MOUSE EVENTS

Dient dazu normalisierte Events fr sowohl Touch wie auch Mouse zu haben

vmouseover (touch oder mouseover) vmousedown (touchstart oder mousedown) vmousemove (touchmove oder mousemove) vmouseup (touchend oder mouseup) vclick (touchend oder click) vmousecancel (touch oder mousecancel)

139


CHANGELOG FR JQUERY MOBILE 1.1

Verffentlicht am 13.04.2012

140

(c) 2012 - typovision GmbH | jQuery Mobile Kompakt | Patrick Lobacher | www.typovision.de | 16.05.2012 141

Richtige fixe Toolbars, CSS-basiert und kompatibelauf diesen Endgerten: 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 bergnge sind nun weicher und schneller Die bergnge turn (WP Metro style page effect) und flow (iOS

tabswitchingtransition) wurden hinzugefgt

Firefox untersttzt nun eine Vielzahl an bergngen 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 untersttzt

DIE NDERUNGEN IN 1.1


Mini Formular-Elemente knnen nun ber das Attribut data-mini="true" hinzugefgt 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 Schrittgre ber das Attribut step="25" einstellen

ber das Attribut data-enhance="false" kann die Anreicherung gezielt fr einzelne Elemente abgeschaltet werden



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



QUELLENWeitere Quellen

144


QUELLEN

145


QUELLEN

jQuery Dokumentationhttp://jquerymobile.com/demos/1.1.0/

jQuery Mobile Projektseite: http://www.jquerymobile.com

jQuery Mobile Examples: http://www.jqmgallery.com

jQuery Mobile Forum: http://forum.jquery.com/jquery-mobile

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

146


LINKSZu Tools


LINKS

148

http://www.codiqa.com/


BEISPIELEjQuery Mobile in the wild


BEISPIELE

150

ikea.se kanbanpad.com jquerymobile.com/demo/


BEISPIELE

151

m.fiat.es vaio-s.de eticur.de


VIELEN DANK!FRAGEN?


SIE PLANEN EIN EIGENESJQUERY MOBILE PROJEKT?

SPRECHEN SIE UNS AN!


Patrick Lobacher (geb. Schuster) - Geschftsfhrer 41 Jahre alt, glcklich verheiratet, wohnhaft in Mnchen Autor von 8 Fachbchern und 34 Fachartikeln

zum Thema TYPO3 und Webentwicklung

Certified TYPO3 Integrator seit 2009 Mitglied in den TYPO3 Core-Teams:

Certification & Extbase & Content Editorial

Mitveranstalter des TYPO3camp Munich und T3DD12 Speaker auf nationalen und internationalen Kongressen Dozent fr fhrende Schulungsinstitute und die MVHS

BER PATRICK LOBACHER


BER DIE TYPOVISION GMBH Mnchner Fullservice-Agentur fr digitale Kommunikation 25 Mitarbeiter (+ 10 aus festem Freelancer Pool) Geschftsfhrer: Sebastian Bttger, Patrick Lobacher Spezialisiert auf TYPO3 seit 9 Jahren (Extbase/Fluid seit 2009)

Agenturprsentation unter: www.typovision.de/dieagentur

ber 400 TYPO3-Projekte jeglicher Grenordnung - fr Kunden wie:


Adresse:

typovision GmbH

Landshuter Allee 880637 Mnchen

Fon: +49 89 45 20 59 3 - 0Fax: +49 89 45 20 59 3 - 29Email: [email protected]: http://www.typovision.de

KONTAKT - KLASSISCH


Twitter: www.twitter.com/typovision www.twitter.com/PatrickLobacher www.twitter.com/crosscontent

Facebook: www.facebook.com/typovision

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

Slideshare: www.slideshare.net/plobacher

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

KONTAKT - SOCIAL CHANNELS

jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)

Text of jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)

jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Eﬀects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

BIOS Kompendium 5.0

jQuery Mobile

COPD-Kompendium - Selbstheilung Online€¦ · COPD-Kompendium Ein Kompendium, das Ihnen neue Blickwinkel und Ansätze bei chronischen Lungenerkrankungen bietet. Mit neuen Diagnose-

jQuery in TYPO3 nutzen

Mobile Crossplattform- Web-Applikationen mit jQuery Mobile · mobile JQUERY MOBILE 1.0 ALPHA 4.1 RELEASED! jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets A

HTML CSS JavaScript & jQuery Prez

jQuery Mobile mit TYPO3

TYPO3 CMS 6.1 - Die Neuerungen - typovision GmbH

Jon Reid, jQuery Mobile. Plattformunabhängige mobile ... · Jon Reid, jQuery Mobile. Plattformunabhängige mobile Anwendungen., O´Reilly, ISBN 9783868991581 D3kjd3Di38lk323nnm

jQuery UI Library - RIP Tutorial · Inhaltsverzeichnis Über 1 Kapitel 1: Erste Schritte mit der jQuery UI Library 2 Bemerkungen 2 Versionen 2 Examples 4 Hinzufügen des jQuery-UI-Skripts

Play Framework, MySQL, JPA, HQL, HTML, jQuery, …

Typo3 4.7 - Die Neuerungen (typovision GnbH)

TYPO3 Enterprise Suche mit Apache Solr - typovision GmbH

Stichwortverzeichnis „jQuery“files.hanser.de/Files/Article/ARTK_STV_9783446439498_0001.pdf · – jQuery Mobile 402 Dokumentationstools 17 DOM 23, 45 DOM Inspector 20 done –

JQuery Plugins Schulung. Übersicht Plugin? Beiß es? –Was braucht man –Javascript Plugin oder jQuery Plugin Strucktur –Grund Struktur –Die „Trickkisten“

Leseprobe jQuery - files.hanser.defiles.hanser.de/Files/Article/ARTK_LPR_9783446455580_0001.pdf · Inhalt VII 4.10 Mehr zum Kontext und jQuery-Utilities ..... 90 4.11 Zusammenfassung

JQuery primer

jQuery - newbooks-services.de€¦ · jQuery - newbooks-services.de ... Für

Radiation Kompendium

Inhaltsverzeichnis „jQuery“ - files.hanser.defiles.hanser.de/Files/Article/ARTK_IVZ_9783446439498_0001.pdf · 1.5.2 jQuery, jQuery Mobile, jQuery UI & mehr ..... 7 1.6 Die Browser

jquery best practices - Ammattikorkeakoulut - Theseus

Update’ für’ jQuery’ Mobile’ 1.4’ und’ etwas’ mehr’ · Web-Apps mit jQuery Mobile – Update zum Buch 3 1 Update auf jQuery Mobile 1.4 Mit&jQuery&Mobile&in&der&Version&1.4&hat&sich&einiges&in&der&Bibliothek&als&

Inhaltsverzeichnis (Zusammenfassung)...(Aus-)Wahlverwandtschaften: Stil und Skript 14 jQuery-Selektoren, stets zu Diensten 15 jQuery in der Übersetzung 16 Ihre erste jQuery-Aufgabe

Airnergy kompendium

Kompendium Gynäkologie

TYPO3 4.6 - Die Neuerungen (typovision*)

Kompendium Orthopädie

typovision GmbH Portfolio Solr Enterprise Search

jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten

Technology

jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)

Text of jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)