In-depth look at jQuery Mobile
JAM329
Ralph Whitbeck – appendTo - @RedWolves
Jason Scott – BlackBerry - @JsonScott
5 – 6 February, 2013
Slide 2
Slide 2 text
jQuery Mobile Team – Developer
Web Platform Team - BlackBerry
Jason Scott
2
Slide 3
Slide 3 text
jQuery Board Member
jQuery Mobile Team - Developer
Relations
Modern Web Advocate
at appendTo
Project Lead for the
jQuery Mobile Cookbook
http://jquerymobilecookbook.com
Ralph Whitbeck
3
Slide 4
Slide 4 text
jQuery Mobile
4
Slide 5
Slide 5 text
Graded Device Support
5
See full device list at http://jquerymobile.com/gbs
Slide 6
Slide 6 text
Getting Started
6
script>
<script src="http://code.jquery.com/mobile/1.2.0/
jquery.mobile-1.2.0.js">
jQuery Mobile & Backbone.js Tips
Disable jQuery Mobile’s Page Navigation features, let
backbone.js handle routing
When jQuery Mobile isn’t handling page navigation you’ll
need to manually remove pages from the DOM
13
Slide 14
Slide 14 text
jQuery Mobile & Backbone.js
14
$(document).bind("mobileinit", function () {
// Disable jQuery Mobile page navigation
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
Slide 15
Slide 15 text
jQuery Mobile & Backbone.js
15
// Remove page from DOM when it's being replaced
$(document).on('pagehide', 'div[data-role="page"]’,
function (event, ui) {
$(event.currentTarget).remove();
});
Popup Positioning
29
By Default: Popups Center over object that triggered it
Add attribute data-position-to="window"
This centers the popup in the center of the window
Slide 30
Slide 30 text
Popup Overlays
30
Overlay: Background of the popup but overlays the page
Theme the overlay to a dark shade. With the default
swatches we can use the a swatch
Set the overlay theme with data- attribute: data-overlay-
theme
data-overlay-theme="a"
Slide 31
Slide 31 text
Dialogs
Combine Positioning and Overlays on a Pop-up
31
Slide 32
Slide 32 text
Download builder
32
Slide 33
Slide 33 text
Themes
33
Slide 34
Slide 34 text
Overview
Uses CSS3 Properties
Multiple Color “Swatches”
Sprited Icon Set
Default Theme come with 5 swatches a-e
If no swatch is specified by default:
a swatch for headers/footers
c swatch for content
34
Where Did the Meta Tag Go?
jQuery Mobile normally recommends this
My Page
43
Slide 44
Slide 44 text
Meta Tag Substitution
var meta = document.createElement("meta");
meta.setAttribute('name','viewport');
meta.setAttribute('content','initial-scale='+ (1/
window.devicePixelRatio) + ',user-
scalable=no');
document.getElementsByTagName('head')
[0].appendChild(meta);
View http://bit.ly/R5zC20 for more info
44
Slide 45
Slide 45 text
jQuery Mobile & BlackBerry 10
Supports all of the jQuery Mobile Controls
New widgets
Action bar
Overflow Menus (Panels)
Gridview
Progress bars
Input validator
Drop down Menu
New Transition
Cover
45
Slide 46
Slide 46 text
jQuery Mobile Controls
46
Slide 47
Slide 47 text
Action Bars
47
Buttons and Tabs
Provides up to 5 slots
for commonly used
actions
Built in “Back” button
(if no tabs)
Slide 48
Slide 48 text
Overflow Menu (Panels)
48
Action Overflow Menu
More actions button
Add secondary actions
Tab Overflow Menu
Space for additional Tabs
Slide 49
Slide 49 text
Grid Lists
49
Provides layout of image data
Declare your items in groups
and rows
Optional headers for groups
1:1 or 16:9 image formats
Sizes images based on number
of items per row
Optional title overlays
Slide 50
Slide 50 text
Progress Indicators
50
Show progress of a running action
Set the min, max and value
Normal and Paused states
Simply add an HTML5 progress element
to your screen
Slide 51
Slide 51 text
Provide the user with
immediate form validation
Uses the standard HTML5
form validation
Input Validation
51
Slide 52
Slide 52 text
Drop down menus exist in
jQuery Mobile
But not like this!
Drop down Menu
52
Slide 53
Slide 53 text
Transition to the new page by
covering the old page
Transition: Cover
53
Slide 54
Slide 54 text
Q10
54
Slide 55
Slide 55 text
jQuery Mobile 1.3.0
What’s New
55
Slide 56
Slide 56 text
Panel
56
Slide 57
Slide 57 text
Panel
57
Slide 58
Slide 58 text
Panel Options
data-position
Right
left
data-display
reveal
overlay
push
58
Slide 59
Slide 59 text
Range Slider
59
Slide 60
Slide 60 text
Range Slider
60
Rangeslider:
Rangeslider:
Slide 61
Slide 61 text
More…
Responsive Tables
Responsive Grids
Responsive Web Design Documentation
Much more
61
Slide 62
Slide 62 text
THANK YOU
JAM329
Ralph Whitbeck – appendTo - @RedWolves
Jason Scott – BlackBerry - @JsonScott
5 – 6 February, 2013