jQuery
Mobile
Design “native” mobile apps
Sunday, October 9, 2011
Slide 2
Slide 2 text
jQuery Mobile
A Mobile UI framework
Implements native looking UI components
Sunday, October 9, 2011
Slide 3
Slide 3 text
Real World jQM
http://c.dric.be/ http://m.anticocasalediscansano.it/en/
Sunday, October 9, 2011
Slide 4
Slide 4 text
Real World jQM
http://c.dric.be/ http://m.anticocasalediscansano.it/en/
Gallery:
http://www.jqmgallery.com/
Sunday, October 9, 2011
Slide 5
Slide 5 text
jQuery Mobile Dark Side
Almost Final
Dependent on jQuery
Size: ~130k (before
jQuery)
jQM way or the
highway
Sunday, October 9, 2011
Slide 6
Slide 6 text
jQuery Mobile Bright
Side
Page layout
UI Controls
jQM API
Theming
Sunday, October 9, 2011
Slide 7
Slide 7 text
Page Layout
Sunday, October 9, 2011
Slide 8
Slide 8 text
Page Layout
a page is just a div with data-role=”page”
a jQM page has:
header
content
footer
Sunday, October 9, 2011
Slide 9
Slide 9 text
Page Example
...
!
...
!
...
Sunday, October 9, 2011
Slide 10
Slide 10 text
Hello jQM
Demo
Sunday, October 9, 2011
Slide 11
Slide 11 text
Multi Page Layout
Multiple pages can be specified in the same .html
file
Each page is identified with an id attribute
Navigation is performed using a tags
Back button is generated for pages that have
data-add-back-btn=”true”
Sunday, October 9, 2011
Slide 12
Slide 12 text
Multi Page
Demo
Sunday, October 9, 2011
Slide 13
Slide 13 text
Using transitions
Transitions are determined via the data-transition
attribute
Page Transitions
Effect Name Description
slide slide right-to-left. This is the default
slideup slide from bottom-to-top
slidedown slide from top-to-bottom
pop expand the new page (dialog pop-up style)
fade fade the new page in
flip flip pages (like cards).
Sunday, October 9, 2011
Slide 15
Slide 15 text
Exercise
Write a mobile website with four pages.
First page: text and link.
Second page: back button and an image.
Third and fourth pages: simple texts
Create transition effects using: slide, pop, fade, flip
Sunday, October 9, 2011
Slide 16
Slide 16 text
jQuery Mobile
Page layout
UI Controls
jQM API
Theming
Sunday, October 9, 2011
Slide 17
Slide 17 text
jQM UI Controls
jQM provides ready-made UI controls for our app
that “look” native.
This rich library includes:
Toolbars
Buttons
Forms & Lists
Sunday, October 9, 2011
Slide 18
Slide 18 text
Toolbars
A header with
data-position=”fixed”
Implements fixed
position using
JavaScript
Sunday, October 9, 2011
Slide 19
Slide 19 text
Toolbars
We can add buttons to
toolbars simply by
writing them in the bar
header bar can have 2
buttons
Use inside header:
Add
Sunday, October 9, 2011
Slide 20
Slide 20 text
Toolbars
Careful not to put too
many buttons - looks
bad
Sunday, October 9, 2011
Slide 21
Slide 21 text
Toolbars
Footer can have as
many buttons as you
wish
Add class=”ui-bar” to
get padding
Demo
Sunday, October 9, 2011
Slide 22
Slide 22 text
Toolbars
Again, don’t put too
many buttons or it’ll
look bad
Sunday, October 9, 2011
Slide 23
Slide 23 text
Toolbar Exercise
Implement a mockup for a mail reader application
Top toolbar button: Logout
bottom toolbar buttons: Compose, delete,
forward, reply.
Sunday, October 9, 2011
Slide 24
Slide 24 text
Buttons
An anchor tag with
data-role=”button” will
look like a button
Any normal form
button will
automatically be
converted
Sunday, October 9, 2011
Slide 25
Slide 25 text
Button Icons
data-icon attribute
allows using icons on a
button
Sunday, October 9, 2011
Slide 26
Slide 26 text
Button Icons
arrow-l
arrow-r
arrow-u
arrow-d
delete
plus
minus
check
gear
refresh
forward
back
grid
star
alert
info
home
search
Sunday, October 9, 2011
Slide 27
Slide 27 text
Icon Positions
data-iconpos determines the icon position
possible values:
right, top, bottom, notext
Sunday, October 9, 2011
Slide 28
Slide 28 text
Inline Buttons
Dialog buttons are
usually placed side-by-
side
This is called inline,
and achieved via
data-inline=”true”
Sunday, October 9, 2011
Slide 29
Slide 29 text
Buttons Demo
Sunday, October 9, 2011
Slide 30
Slide 30 text
Button Exercise
Implement a jQM app with three buttons titled:
red, blue and green
App background color should change when a user
presses a button
Bonus: use gradients as background
Sunday, October 9, 2011
Top Nav Bar
Put the above code in
the header to get top
nav bars
They are
recommended for
mobile apps running
inside the browser
Sunday, October 9, 2011
Slide 40
Slide 40 text
Bottom Nav Bar
Put the above code in
the footer to get
bottom nav bar
Recommended in
standalone apps
Sunday, October 9, 2011
Slide 41
Slide 41 text
Tab Bars (ala iPhone)
Use data-icon to get
icons in the nav bars
above the text
Custom icons are also
allowed
Free iOS Style Icons:
http://glyphish.com/
Sunday, October 9, 2011
Slide 42
Slide 42 text
Icon Grids
divs can be lines up in
columns (or grid)
Sunday, October 9, 2011
Slide 43
Slide 43 text
Exercise
Implement the following
App is 2 tabs: Home and Image Gallery
Home includes text info on eating vegetables
Gallery has photos of vegetables (use google
images)
Solution at: http://apps.ynonperek.com/mobileweb/jqm/vegapp/
Sunday, October 9, 2011
Slide 44
Slide 44 text
Forms
Mobile optimized controls
Sunday, October 9, 2011
Slide 45
Slide 45 text
Mobile Optimized Forms
jQuery mobile provides a complete set of finger
friendly form elements
Most form elements are automatically initialized
by jQM
Prevent auto initialization with data-role=”none”
Sunday, October 9, 2011
Slide 46
Slide 46 text
jQuery vs. Normal
Wrap a labe/input pair in a div
with data-role=”fieldcontain”
to get the cool thin line
Sunday, October 9, 2011
Slide 47
Slide 47 text
Refresh
Form controls can be set programmatically
Must call “refresh” to refresh the ui
Use $(‘#fld-radio’).checkboxradio(“refresh”);
Sunday, October 9, 2011
Slide 48
Slide 48 text
Form Elements
Text Inputs
Sliders
Buttons
Select Menu
Submitting Forms
Sunday, October 9, 2011
Slide 49
Slide 49 text
Text Inputs
Available input types:
text, password,
number, email, url, tel,
search
textarea provides
multi-line text
triggers ‘create’
event on creation
Sunday, October 9, 2011
Slide 50
Slide 50 text
Slider
input type=”range” creates a slider
attributes: value, min, max
refresh with .slider(‘refresh’);
Sunday, October 9, 2011
Slide 51
Slide 51 text
Buttons - Flip Switch
! Select slider:
!
! ! Off
! ! On
!
Sunday, October 9, 2011
Slide 52
Slide 52 text
Buttons - Radio
! Choose a pet:
!
! Cat
!
! Dog
!
! Hamster
!
! Lizard
Sunday, October 9, 2011
Slide 53
Slide 53 text
Buttons - Radio
Add data-type=”horizontal” to fieldset to get the
horizontal radio buttons
Refresh with .checkboxradio(‘refresh’);
Sunday, October 9, 2011
Slide 54
Slide 54 text
CheckBoxes
Sunday, October 9, 2011
Slide 55
Slide 55 text
CheckBoxes
Choose as many snacks as you like
Cheetos
Doritos
Fritos
Sun Chips
Sunday, October 9, 2011
Slide 56
Slide 56 text
CheckBoxes
Use data-role=”horizontal” for horizontal
checkboxes
Remember the outer div with data-
role=”fieldcontain” so jQM can outline the field
CheckBoxes & Radio Buttons both use a legend
for the question text
Sunday, October 9, 2011
Slide 57
Slide 57 text
Submitting Forms
AJAX is used to submit the forms
No Ajax forms are created with data-ajax=false
Sunday, October 9, 2011
Slide 58
Slide 58 text
Q & A - Forms
Sunday, October 9, 2011
Slide 59
Slide 59 text
Forms Exercise
Implement a 2 page registration from using jQM
with the following fields:
Page 1 Page 2
username (text) gender (m/f)
password (pass)
favorite colors (red, blue or green)
can have more than one
phone number comments (text area)
email
Sunday, October 9, 2011
Slide 60
Slide 60 text
jQuery Mobile
Page layout
UI Controls
jQM API
Theming
Sunday, October 9, 2011
Slide 61
Slide 61 text
jQM API
Default configurations
jQM Events
Methods & Utilities
Sunday, October 9, 2011
Slide 62
Slide 62 text
The mobileinit Event
bind to mobileinit event
Note: this event triggers immediately upon loading
jqm
$(document).bind("mobileinit", function(){
//apply overrides here
});
Sunday, October 9, 2011
Slide 63
Slide 63 text
The mobileinit Event
Overriding defaults is simply changing object
attributes
Full list of configurable options at:
http://jquerymobile.com/demos/1.0b2/docs/api/
globalconfig.htmlglobalconfig.html
$(document).bind("mobileinit", function(){
$.mobile.defaultPageTransition = ‘slide’;
});
Sunday, October 9, 2011
Slide 64
Slide 64 text
jQM Events
tap
taphold
swipe
swipeleft
swiperight
orientationchange
scrollstart
scrollstop
pageshow
pagehide
pagecreate
pageinit
Sunday, October 9, 2011
Slide 65
Slide 65 text
jQM Methods
$.mobile.changePage(to, options)
$.mobile.silentScroll
Full list at:
http://jquerymobile.com/demos/1.0b2/docs/api/
globalconfig.html#/demos/1.0b2/docs/api/
methods.html
Sunday, October 9, 2011
Slide 66
Slide 66 text
Exercise (1)
Implement a jQM app that has two pages
First page keeps a combo box with values: slide,
flip; and a “go” button
When a user clicks “go”, app moves to the second
page in the selected transition style
Sunday, October 9, 2011
Slide 67
Slide 67 text
Exercise (2)
Implement a “switching cards” display - create 3
divs and allow user to switch visible div by sliding
left or right - Yahoo Style.
Sunday, October 9, 2011
Slide 68
Slide 68 text
jQuery Mobile
Page layout
UI Controls
jQM API
Theming
Sunday, October 9, 2011
Slide 69
Slide 69 text
jQM Themes
The theme controls how elements look on the
page
Each theme has swatches for color play
Default theme has 5 swatches marked a,b,c,d,e
Sunday, October 9, 2011
Slide 70
Slide 70 text
Default Theme
Sunday, October 9, 2011
Slide 71
Slide 71 text
jQM Customize Theme
To customize a theme:
Edit jQM css
Copy a swatch definitions as a new swatch
Change the swatch letter
Make your changes
Sunday, October 9, 2011
Slide 72
Slide 72 text
Q & A
Sunday, October 9, 2011
Slide 73
Slide 73 text
Thank You
Ynon Perek
[email protected]
ynonperek.com
Sunday, October 9, 2011