jquery mobile.pptx

7/26/2019 jQuery Mobile.pptx

http://slidepdf.com/reader/full/jquery-mobilepptx 1/61

jQuery MobileWhat is jQuery Mobile? How to use it?

Doncho Minkov

TelerikCorporationwww.telerik.

com

Technical Trainer



Table of Contents jQuery Mobile Overview Methods and Utilities esponsive !ayout Data"# $ttributes

%a&es

Dialo&s

'uttons

jQuery (vents )eatures of jQuery Mobile



jQuery MobileOverview*hat is jQuery Mobile+



jQuery Mobile Overview

*hat does jQuery Mobile do+ Top"of"the"line ,ava-cript in a

unied User /nterface

*orks across the most"used mobiledevices

-upports mobile browsers

Treatin& mobile web browserse0actly the same as desktop webbrowsers



jQuery Mobile Overview123

$ll pa&es in jQuery Mobile

$re built on a foundation of clean4semantic 5TM!

(nsure compatibility with pretty

much any web"enabled device jQuery Mobile applies pro&ressive enhancement techni6ues

Unobtrusively transform thesemantic pa&e into a rich4interactive e0perience

!evera&es the power of jQuery andC--



esponsive !ayoutMedia Queries $nd -tu7...



esponsive !ayout

Media Query 5elper Classes

j6m adds classes to the 5TM!element

Mimic browser orientation and

common min8ma0"width C-- media6ueries

These classes are updated on load4

resi9e and orientationchan&e $llowin& you to key o7 these

classes in C--

Create responsive layouts



Orientation Classes

The 5TM! element will always havea class of either ;portrait; or;landscape<

Dependin& on the orientation of the

browser or device

=ou can utili9e these in your C--like this>

.portrait {/* portrait orientation changes go here! */

}.landscape {

/* landscape orientation changes go here! */}

i id h



Min8Ma0 *idth'reakpoint Classes

'y default4 min and ma0

breakpoint classes are created atthe followin& widths> 3204 4804 7684 1024

Classes that look like this ;min-idth-320p;4 ;ma-idth-480p;

Can be used as a replacement oraddition to the media 6uerye6uivalents they mimic.m"element {#loat$ none%

}.min-idth-480p .m"element {

#loat$ le#t%

}

Mi 8M *id h



Min8Ma0 *idth'reakpoint Classes 123

%lu&ins in j6m levera&e width breakpoints

/.e. form elements ?oat beside theirlabels when the browser is wider

than @AB pi0els The C-- to support this behavior for

form te0t inputs looks like this>la&el.'i-inp't-tet {displa"$ &loc(%

}.min-idth-480p la&el.'i-inp't-tet {

displa"$ inline-&loc(%}

$ddi *id h



$ddin& *idth'reakpoints

jQuery Mobile e0poses the function).mo&ile.addesol'tion+rea(points $ccepts a sin&le number or array of

numbers

*ill be added to the min8ma0 breakpoints

*henever they apply//add a min/ma class #or 1200 piel idths

).mo&ile.addesol'tion+rea(points,1200%

//add min/ma classes #or 1200 and 1440 pielidths).mo&ile.addesol'tion+rea(points,1200 1440%



unnin& Media Queries

)unction allowin& testin& whethera particular C-- Media Query applies ,ust call .mobile.media13 and pass

a media type or 6uery esults in true if that type of 6uery

is supported

$nd currently applies//test #or screen media t"pe

).mo&ile.media,screen%

//test a min-idth media 'er").mo&ile.media,screen and ,min-idth$ 480p%



esponsive !ayout!ive Demo



Data"# $ttributes*hat /s Data"role+



Data"# $ttributes

Data"# attributes are used by ,ava-cript

o pre"dened functionality

Can be di7erent every time

Used to make our own attributes

The followin& are valid attributes in5TM!E

data"role4 data"rel4 data"pesho4 etc.

Data"# attributes are validated in5TM!E

jQuery [email protected] or later has support for),list.data,roleheader%



Data"roles Data"role is an attribute of 5TM!

element Used by jQuery U/ and jQuery

Mobile

Gives appearance to elements Throu&h jQuery e0ecuted in the

5TM! pa&e init

Data"roles &ive native look and feel 'ased on the O- of the device

Used to make elements look like

buttons4 pa&es4 menus etc...



jQuery Mobile Data"#5ow to use data"# with jQuery Mobile+



%a&es in jQuery Mobile

jQuery Mobile includes automatic$,$H pa&e loadin& of e0ternalpa&es

*ith automatic back button historysupport

$ set of animated pa&e transitions

-imple tools for displayin& pa&es asdialo&s



%a&es

The pa&e structure is optimi9ed tosupport

-in&le pa&es

!ocal internal linked ;pa&es; withina pa&e

The &oal is to allow developers tocreate websites usin& best

practices *here ordinary links will ; just

work ;

*ithout any special con&uration



Mobile %a&e -tructure

jQuery Mobile sites start with an5TM!E !doct"pe html5 Take full advanta&e of all of the

frameworkIs features

Older devices with browsers thatdonIt understand 5TM!E will i&nore the Doctype

eference jQuery4 jQuery Mobile and the mobile theme C-- in theJheadK section

(0ample jQuery Mobile



(0ample jQuery Mobile-ite

!9:;< html5

html5head5

title5;age 9itle/title5

lin( rel=st"lesheethre#=http$//code.>'er".com/

mo&ile/1.0a4.1/>'er".mo&ile-1.0a4.1.min.css /5 script t"pe=tet/>a?ascriptsrc=http$//code.>'er".

com/>'er"[email protected].>s5/script5

script t"pe=tet/>a?ascript

src=http$//code.>'er".com/mo&ile/1.0a4.1/>'er".mo&ile-1.0a4.1.min.>s5

/script5/head5&od"5

.../&od"5



%a&es in jQuery Mobile /nside the JbodyK ta&

(very pa&e on a mobile device isidentied with an element withdata"roleL;pa&e;

di? data-role=page5

.../di?5

*ithin a pa&e

$ny valid 5TM! markup can be used 'ut for true jQuery Mobile %a&e the

immediate children are semanticelements with data"roles

;header; ;content; and ;footer;.

(0ample of )ull -in&le



(0ample of )ull -in&le%a&e

!9:;< html5

html5head5 title5;age 9itle/title5 . . ./head5&od"5

section data-role=page5

header data-role=header5 h15Aome 9itle/h15 /header5 article data-role=content5 h159he ontent/h15 /article5 #ooter data-role=#ooter5 h15Aome Booter/h15 /#ooter5 /section5/&od"5/html5

%a&e

The %a&e5eader

The %a&e

ContentThe %a&e)ooter



-in&le"%a&ed jQuery

Mobile!ive Demo

Multi pa&e jQuery



Multi"pa&e jQueryMobile )ile

*ith jQuery Mobile one le can

contain multiple pa&es Many sections with data"

roleL;%a&e;

Called local pa&es Can be accessed from one another

by idsection data-role=page id=#irst;age5C article data-role=content5

a hre#=second;age5 go to second ;age/a5 /article5C/section5section data-role=page id=second;age5C article data-role=content5 a hre#=#irst;age5 go to second ;age/a5 /article5C

/section5



Multi"pa&e jQuery

Mobile!ive Demo



%a&e Transitions

-i0 C--"based transition e7ects $pplied to any object or pa&e

chan&e event

The framework applies the ri&ht toleft slide transition by default

$dd the data"transition attribute tothe link a hre#=second;age data-transition=pop5to go second;age/a5

Other possible transitions>

slide4 slideup4 slidedown4 pop4 fade4?ip



Dialo&s

To create dialo& window

$dd to the anchor a data"relL;dialo&;

May add a transition

Get a dialo& bo0

*ith the pa&e referenced in it

a hre#=dialog;age data-rel=dialog data-transition=#ade5 pen dialog/a5



%a&e and Dialo&Transitions

!ive Demo



'uttons

*ith jQuery Mobile elements maybe made to look like buttons

$nchor 1JaK3

divs and spans 1JdivK4 JspanK3

/ma&es 1Jim&K3

$ll look like the same

di? data-role=&'tton5 di? ith data-role=&'tton/di?5a hre#=http$//.min(o?.it data-role=&'tton5

anchor ith data-role=&'tton/a5img src=images/losed+'c(et.png idth=@0 alt=img

data-role=&'tton/5



'uttons 123

'uttons can be &rouped in sets ofbuttons

'oth hori9ontally and verticallydi? data-role=controlgro'p data-t"pe=?ertical5 a hre#=http$//na(o?.com data-role=&'tton5na(o?.com/a5

a hre#=http$//min(o?.it data-role=&'tton5min(o?.it/a5 a hre#=http$//ni(ola".it data-role=&'tton5ni(ola".it/a5/di?5

di? data-role=controlgro'p data-t"pe=horiDontal5 a hre#=http$//na(o?.com data-role=&'tton5na(o?.com/a5 a hre#=http$//min(o?.it data-role=&'tton5min(o?.it/a5 a hre#=http$//ni(ola".it data-role=&'tton5ni(ola".it/a5/di?5



'uttons 13

'uttons can have

/cons thou&h data"icon

star4 check 4 plus4 forward4 delete4etc.

/con position throu&h data"iconposbottom

'elow the te0t4 centered

left !eft side of button

note0t

5ides the te0t4 displayin&only the icon

ri&ht i&ht side of button

top $bove te0t4 centered



jQuery Mobile'uttons!ive Demo



!istviews

=ou can make a list 1both sortedand not3 to look like a menu

!ike a menu on a mobile device

,ust add data"roleL;listview;

'l data-role=list?ie5 li5

a hre#=#irst;age5go to #irst ;age/a5 /li5 li5

a hre#=second;age5go to second ;age/a5 /li5 li5a hre#=third;age5go to third ;age/a5 /li5

li5a hre#=#o'rth;age5go to #o'rth ;age/a5 /li5

/'l5



!istviews!ive Demo



)orms in jQuery Mobile

$ll the form elements in jQueryMobile have their own look andfeel

-upport for features notimplemented in browsers yet

i.e. type ran&e



jQuery Mobile )orms!ive Demo



-liders in jQueryMobile!ive Demo



5TM!E )ormNalidation!ive Demo



jQuery Mobile (ventsTouch4 Orientation4 %a&e



(vents in jQuery Mobile jQuery Mobile o7ers several

custom events 'uild upon native events

Create useful hooks for development

Touch4 mouse and window events =ou can bind to them for use in both

handheld and desktop

environments =ou can bind to these events like

you would with other jQuery events

Usin& live13 or bind13



Touch (vents tap

$fter a 6uick4 complete touch event taphold

$fter a held complete touch event

sipe 5ori9ontal dra& of Bp0 or more4within F second

sipele#t *hen a swipe event occurred movin&

in the left swiperi&ht

*hen a swipe event occurred movin&

Orientation Chan&e



Orientation Chan&e(vent

orientationchan&e

Tri&&ers when a device orientationchan&es

'y turnin& it vertically or hori9ontally

!evera&e a second ar&ument4 whichcontains an orientation property

(6ual to either ;portrait; or;landscape<

$lso added as classes to the 5TM!element

$llowin& you to levera&e them in

your C--

ll



-croll events

scrollstart

Tri&&ers when a scroll be&ins

ote that iO- devices free9e DOMmanipulation durin& scroll

Queuin& them to apply when thescroll nishes

Currently investi&atin& ways to allow

DOM manipulations to apply before ascroll starts

scrollstop

Tri&&ers when a scroll nishes

h hid



%a&e show8hide events

*hen a pa&e is shown8hidden in jQuery Mobile

Two events are tri&&ered on thatpa&e

The events tri&&ered depend onwhether that pa&e is bein& shownor hidden

There are actually @ events 2 for each pa&e

% h 8hid



%a&e show8hide events pa&ebeforeshow

Tri&&ered on the pa&e bein& shown 'efore its transition be&ins

pa&ebeforehide Tri&&ered on the pa&e bein& hidden

'efore its transition be&ins pa&eshow

Tri&&ered on the pa&e bein& shown $fter its transition completes

pa&ehide Tri&&ered on the pa&e bein& hidden

$fter its transition completes

% h 8hid t



%a&e show8hide events

ote that all four of these eventse0pose a reference to either

The ne0t pa&e 1ne0t%a&e3

The %revious pa&e 1prev%a&e3

Dependin& on whether the pa&e isbein& shown or hidden

*hether that ne0t or previous pa&e

e0ists

% h 8hid t



%a&e show8hide events =ou can access the reference of the

pa&e via the second ar&ument of abound callback

To invoke these handlers durin&initial pa&e load

'ind them before jQuery Mobile

e0ecutes

),Edi?E.li?e,EpageshoE#'nction,e?ent 'i{

alert,E9his page as >'st hidden$ EF

'i.pre?;age%}%),Edi?E.li?e,EpagehideE

#'nction,e?ent 'i{ alert,E9his page as >'st shon$ EF'i.net;age%

}%



%a&e -how85ide

(vents!ive Demo

%a&e initiali9ation



%a&e initiali9ationevents

jQuery Mobile auto"initiali9es

plu&ins 'ased on markup conventions found

in a pa&e

/.e. an input element with a type ofran&e will automatically &enerate acustom slider control

$uto"initiali9ation is controlled bypa&e plu&in

Dispatches events before and afterit e0ecutes

%a&e initiali9ation




%a&e initiali9ation events will onlyre once per ;pa&e; Opposed to the show8hide events

)ire every time a pa&e is shown and

hidden

%a&e initiali9ation




pa&ebeforecreate

On pa&e initiali9ed4 beforeinitiali9ation occurs),Ea&o't;ageE.li?e,Epage&e#orecreateE

#'nction,e?ent{ alert,E9his page as >'st inserted into the

dom!E%}%

pa&ecreate

On pa&e initiali9ed4 afterinitiali9ation occurs

),Ea&o't;ageE.li?e,EpagecreateE#'nction,e?ent{ alert,E9his page as >'st enhanced &" >G'er"Ho&ile!E%}%

%a&e initiali9ation




*hen bindin& to pa&ebeforecreate

and returnin& false =ou can prevent the pa&e plu&in

from makin& its manipulations

),Ea&o't;ageE.li?e,Epage&e#orecreateE #'nction,e?ent{

//r'n "o'r on enhancement scripting here... ret'rn #alse%

}%



jQuery Mobile /nit(vents!ive Demo



)eatures of jQueryMobile

*hat to (0pect+

)eatures of jQuery




'uilt on jQuery core for familiar

and consistent jQuery synta0 Compatible with all major mobileplatforms

iO-4 $ndroid4 'lackberry4 %alm *ebO-4 bada4 okia8-ymbian4*indows Mobile4 *% Man&o

-upport for devices understandin& 5TM!

!i&htwei&ht si9e

F2k compressed for all mobile

)eatures of jQuery




5TM!E Markup"driven

con&uration for fast developmentand minimal re6uired scriptin&

%a&es and behavior

%ro&ressive enhancement approach brin&s

Core content and functionality to all

mobile4 tablet and desktop platforms

$ rich4 installed application"like

e0perience on newer mobile

)eatures of jQuery




$utomatic initiali9ation by data"# attributes in the 5TM! markup

Tri&&er initiali9ation of jQuery

Mobile wid&ets ew events for support of touch4mouse4 and cursor focus"based

user input ew plu&ins enhance nativecontrols with touch"optimi9ed4

themable controls

-upported %latforms



-upported %latforms These browsers have a solid j6m

e0perience $pple iO- 1.F"@.23

$ndroid 1F.P"2.3 all devices

'lackberry P

*indows %hone Man&o

%alm *ebO- 1F.@3

Opera Mobile 1FB.F3

Opera Mini 1E.B23

)irefo0 Mobile 1beta3

jQ M bil



Questions+Questions+

jQuery Mobile

5omework



5omeworkF. Create multiple pa&es with di7erent

content Usin& 5TM!E and jQuery Mobile

2. !ink the pa&es from the above e0ercise

. Create a form with validation

@. Try to copy one of the famous mobileapps

)or e0ample ;%hone book ; for $ndroid

E. (0pend the previous with addin& moreoptions

-creens for addin& and editin& newcontacts

jquery mobile.pptx

Documents