CS 696 Emerging Web and Mobile Technologies
Spring Semester, 2011
Doc 9 jQuery Mobile
Mar 1, 2011
Copyright ©, All rights reserved. 2011 SDSU & Roger Whitney, 5500
Campanile Drive, San Diego, CA 92182-7700 USA. OpenContent (http://
[Link]/[Link]) license defines the copyright on this
document.
Tuesday, March 1, 2011
References
jQuery Mobile documentation, [Link]
Tuesday, March 1, 2011
Web Pages Verses Optimized Pages for Mobile
Tuesday, March 1, 2011
Web Apps
Tuesday, March 1, 2011
Scale
480 * 800 600 * 1024 Images not to scale
Tuesday, March 1, 2011
Scale
768 x 1024
Tuesday, March 1, 2011
Native Verses Cross Platform
Tuesday, March 1, 2011
Hand Coded Verses Library
#header ul li a { <body>
background-color: #FFFFFF; <div data-role="page" data-theme="b">
border: 1px solid #999999; <div id="jqm-homeheader">
color: #222222; <h1>
display: block; Hello World!
font-size: 17px; </h1>
font-weight: bold; </div>
margin-bottom: -1px; <div data-role="content">
padding: 12px 10px; <ul data-role="listview" data-inset="true
text-decoration: none; <li data-role="list-divider">Example
} li>
<li>List Item</li>
#header ul li:first-child a {
<li><a href="[Link]">With Link<
-webkit-border-top-left-radius: 8px; a></li>
-webkit-border-top-right-radius: 8px; </ul>
} </div>
#header ul li:last-child a { </div>
-webkit-border-bottom-left-radius: 8px; </body>
-webkit-border-bottom-right-radius: 8px;
}
8
Tuesday, March 1, 2011
Libraries
jQTouch Sencha Touch
Free with MIT license iOS & Android
iPhone, iPod Touch, Android Blackberry 6 soon
No Tablet support Native look & Feel
Uses jQuery Free for open source
Started 2009 Per seat cost for commercial
Does not use jQuery
jQuery Mobile
Free
Based on jQuery
Unified interface on most mobile browsers
Alpha 3 release
Announced August 2010
Tuesday, March 1, 2011
jQuery Mobile
10
Tuesday, March 1, 2011
jQuery Mobile
Cross-platform & Cross-device framewor
First public announcement August 2010
Currently third alpha release
11
Tuesday, March 1, 2011
Planned Browser Support
Native
Platform PhoneGap
Browser
iOS Y Y
Symbian S60 v5.0 Y Y
BlackBerry OS
Y Y
v5.0 v 6.0
Android Y Y
Windows Mobile N N
webOS Y Y
bada Y N
MeeGo Y
12
Tuesday, March 1, 2011
Supported Platforms in Alpha 3
Apple iOS (3.1-4.2)
iPhone, iPod, iPad
Android (1.6-2.3)
All devices
Blackberry 6
Torch, Style
Palm WebOS 1.4
Pre, Pixi
Opera Mobile 10.1
Android
Opera Mini 5.02
iOS, Android
Firefox Mobile (beta)
Android
13
Tuesday, March 1, 2011
Warning about cache
Sometimes when editing examples I had to refresh page twice
Otherwise got old behavior
14
Tuesday, March 1, 2011
Basic jQuery Mobile Structure
Add data-xxx attributes to tags
jQuery JavaScript & CSS uses the attribute
15
Tuesday, March 1, 2011
Basic Page Structure
Use "data-" attributes to mark page elements
<body>
<div data-role="page">
<div data-role="header"> <h1>Page Title</h1></div>
<div data-role="content"><p>Page content goes here.</p> </
div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
16
Tuesday, March 1, 2011
Common Head used in Examples
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<link rel="stylesheet" href="[Link] />
<script src="[Link]
<script src="[Link]
</head>
17
Tuesday, March 1, 2011
The examples get too big so to save space will only show the head of the examples here
CSS Tagging & Auto-initialization
jQuery mobile adds CSS class and other attributes to tags
Done on startup
Attributes change as needed
18
Tuesday, March 1, 2011
Sample Page
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
19
Tuesday, March 1, 2011
Sample Page with CSS class added
20
Tuesday, March 1, 2011
Themes
21
Tuesday, March 1, 2011
Themes
22
Tuesday, March 1, 2011
Theme per Page
<div data-role="page" data-theme="e">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
23
Tuesday, March 1, 2011
Mixing Themes
<div data-role="page" data-theme="e">
<div data-role="header" data-theme="b">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer" data-theme="d">
<h4>Page Footer</h4>
</div>
</div>
24
Tuesday, March 1, 2011
Multiple Pages in one File
<body>
<div data-role="page" data-theme="b" id="first">
<div> <h1>Page 1</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Example</li>
<li><a href="#second" >Internal Page</a></li>
</ul>
</div>
</div>
<div data-role="page" id="second">
<div>
<h1>Second Page</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Example</li>
<li><a href="#first" data-rel="back">Back to page 1</a></li>
</ul>
</div>
</div>
</body> 25
Tuesday, March 1, 2011
Multiple Pages in one File
Only one page is displayed at a time
Current div "page" given CSS class "ui-page-active"
$.[Link] JavaScript property contains current page
<div class="ui-page ui-body-c ui-page-active"
data-theme="b"
data-role="page"
data-url="first">
26
Tuesday, March 1, 2011
Page Transitions
slide
slideup
slidedown
pop
fade
flip
27
Tuesday, March 1, 2011
Page Transitions
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Example</li>
<li><a href="#second" >Internal Page</a></li>
<li><a href="[Link]" data-transition="flip">Local Page</a></
li>
<li><a href="[Link] data-transition="fade"> www eli</a></
li>
</ul>
</div>
28
Tuesday, March 1, 2011
Back
<a href="#first" data-rel="back">Back to page 1</a>
Also uses page animation
29
Tuesday, March 1, 2011
Page Transitions - Behind the Scene
Out-going page css classes After transition is done
ui-page-active
out in, out, transitions classes removed
flip (page transition)
out-going page loses ui-page-active
Incoming page css classes
ui-page-active
in
flip (page transition)
30
Tuesday, March 1, 2011
Page loading & URLs
First page loaded normally
Rest of local pages loaded via Ajax & added to current DOM
Default behavior of local links overridden
Page history stored in "[Link]"
Pages are loaded with "$.[Link]()"
31
Tuesday, March 1, 2011
Orientation
<div data-role="page">
<div data-role="content">
<p>Red - Portrait, Blue - landscape</p>
</div>
</div>
.portrait p {
color: red
}
.landscape p {
color: blue
}
32
Tuesday, March 1, 2011
On Android the orientations are reversed, known bug
Screen Size .max-width-1024px p {
color: gray
}
<div data-role="page">
<div data-role="content"> .max-width-768px p {
<p>Red - 320, Blue - 480, color: yellow
Yellow - 768, Gray - 1024</p> }
</div>
</div> .max-width-480px p {
color: blue
}
.max-width-320px p {
color: red
}
33
Tuesday, March 1, 2011
Events
Touch events Orientation change event
tap orientationchange
taphold
swipe Page show/hide events
swipeleft pagebeforeshow
swiperight pagebeforehide
pageshow
pagehide
Page initialization events
pagebeforecreate
pagecreate
34
Tuesday, March 1, 2011
Event Example
<body onload="$('.ui-page-active').live('tap',function(event, ui){
alert('tap');
});
$('.ui-page-active').live('taphold',function(event, ui){
alert('taphold');
});
$('.ui-page-active').live('swipe',function(event, ui){
alert('swipe');
});">
<div data-role="page">
<div data-role="content">
<p>Try tap, tap hold or swipe</p>
</div>
</div>
35
Tuesday, March 1, 2011
Dialog
data-rel="dialog"
opens page as a modal dialog link
Transitions (pop, slidedown, flip)
data-transition="pop"
sets the transition
<a href="[Link]" data-rel="dialog" data-transition="pop" >
Open dialog
</a>
36
Tuesday, March 1, 2011
Dialog - Closing
Any link on dialog page will close the dialog
For cancel button
Add link to page that opened dialog
Add attribute data-rel="back" to link
37
Tuesday, March 1, 2011
Dialog
<div data-role="page">
<div data-role="content">
<a href="#dialog" data-rel="dialog" data-transition="pop">Open</a>
</div>
</div>
<div data-role="page" id="dialog" >
<div data-role="header">
<h1>Question</h1>
</div><!-- /header -->
<div data-role="content">
<p>Did you see the snow this weekend?</p>
<a data-rel="back" data-role="button">Yes</a>
<a data-rel="back" data-role="button">No</a>
</ul>
</div>
</div>
38
Tuesday, March 1, 2011
Dialog Example
39
Tuesday, March 1, 2011
Toolbars Header & Footer
inline
Positioning Options
in-line
Toolbar appears where put in HTML/CSS
fixed
Appears top and bottom of screen
After scrolling reappear at top and bottom
Tap hides/shows floating toolbar
fullscreen
Appears top and bottom of screen
Tap hides/shows toolbars
40
Tuesday, March 1, 2011
Fixed Toolbars Demo
41
Tuesday, March 1, 2011
Fixed Position Source
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Fixed Header</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>Fixed Footer</h4>
</div>
</div>
42
Tuesday, March 1, 2011
Full Screen Demo
43
Tuesday, March 1, 2011
FullScreen
<div data-role="page" data-fullscreen="true">
<div data-role="header" data-position="fixed">
<h1>Full Screen Header</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>Full Screen Footer</h4>
</div>
</div>
44
Tuesday, March 1, 2011
Header Buttons
<div data-role="header" data-position="fixed">
<a href="[Link]">Cancel</a>
<h1>Fixed Header</h1>
<a href="[Link]">Save</a>
</div>
45
Tuesday, March 1, 2011
Auto generated Back
<div data-role="page" id="second">
<div data-role="header">
<h1>Second Page</h1>
</div>
No Auto Generated
<div data-role="page" id="second">
<div data-role="header" data-backbtn="false">
<h1>Second Page</h1>
</div>
Auto Generated with special text
<div data-role="page" id="second"
data-back-btn-text="Previous">
<div data-role="header">
<h1>Second Page</h1>
</div>
46
Tuesday, March 1, 2011
Footer Buttons
<div data-role="footer" data-position="fixed" class="ui-bar">
<a href="[Link]" data-role="button">Remove</a>
<a href="[Link]" data-role="button">Add</a>
<a href="[Link]" data-role="button">Up</a>
<a href="[Link]" data-role="button">Down</a>
</div>
47
Tuesday, March 1, 2011
Navbars
Header or Footer
Up to 5 tabs
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="[Link]" class="ui-btn-active">One</a></li>
<li><a href="[Link]">Two</a></li>
<li><a href="[Link]">Three</a></li>
</ul>
</div>
</div>
48
Tuesday, March 1, 2011
Persistent Navbar footer
The footer sticks persistently even when transitioning to a new HTML page
(Well not during transition)
<div data-role="footer" data-position="fixed" data-id="1">
<div data-role="navbar">
<ul>
<li><a href="#first" class="ui-btn-active">One</a>
</li>
<li><a href="#second">Two</a></li>
<li><a href="#third">Three</a></li>
</ul>
</div>
</div>
Use same data-id in footer on each page
49
Tuesday, March 1, 2011