Scribd
Upload
86 views

JQueryMobile Android Programming

tks

Uploaded by

aritba
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
86 views

JQueryMobile Android Programming

tks

Uploaded by

aritba
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 49

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://
www.opencontent.org/opl.shtml) license defines the copyright on this
document.

Tuesday, March 1, 2011


References

jQuery Mobile documentation, http://jquerymobile.com/demos/1.0a3/

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="page.html">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="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</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"

$.mobile.activePage 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="SinglePage.html" data-transition="flip">Local Page</a></
li>
<li><a href="http://www.eli.sdsu.edu" 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 "location.hash"

Pages are loaded with "$.mobile.changePage()"

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="foo.html" 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="foo.html">Cancel</a>
<h1>Fixed Header</h1>
<a href="foo.html">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="index.html" data-role="button">Remove</a>
<a href="index.html" data-role="button">Add</a>
<a href="index.html" data-role="button">Up</a>
<a href="index.html" 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="a.html" class="ui-btn-active">One</a></li>
<li><a href="b.html">Two</a></li>
<li><a href="c.html">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

You might also like