This document discusses JQuery Mobile, a framework for building mobile web applications. It highlights challenges in mobile development like bandwidth limitations and differences in operating systems and devices. JQuery Mobile aims to address these challenges by leveraging JQuery, HTML5, CSS and JavaScript in a lightweight package. It provides features like themes, events, pages and forms to support mobile application development. The author plans to present on JQuery Mobile at upcoming user groups.

1. Jquery
Mobile
May
2011
Sco$
Ryan
Soaring
Eagle
LLC.
sco$@theryansplace.com
www.soaringeagleco.com

2. Challenges

3. Mobile
Challenges
• Bandwidth
• Connec<vity
• Time
to
Market
• Delivery
Mechanisms
• Distribu<on

5. Mobile
Challenges
• Opera<ng
Systems
• Devices
• Na<ve
Feature
access
• Orienta<on
related
issues
• Real
Estate
• Events
• Input
• Window
depth

6. There
is
a
market
!!!

7. There
is
an
Answer

8. Jquery
Mobile
• Late
Beta
• Leverages
Jquery
• Integrates
HTML
5,
JavaScript
and
CSS
• Lightweight
(12K)
• Progressive
Enhancement
• Accessibility

9. Support

10. Events

11. Events
• Tap
• Tap
and
hold
• Swipe
(any,
leU
and
right)
• Orienta<on
change
(media
queries
and
CSS
support)
• Scroll
Events
(start
and
stop)
• Page
Events
• (before
show,
show,
before
hide,
hide,
before
create,
create)

12. Themes

13. Themes
• Leverages
CSS
3
to
reduce
size
• Gradients,
Corner
Rounding
etc.
• Object
oriented
with
26
swatches
• Large
variety
of
swatch
combina<ons
• Icon
set
included

14. Page
Structure

15. Pages
• Combina<on
Pages
• Leverage
the
data
a$ribute
(i.e.
data-­‐role)
• Header
,
Content
and
Footer
• Mul<ple
logical
pages
per
physical
pages
<div
data-­‐role="page">
<div
data-­‐role="header">
<h1>Page
Title</h1>
</div><!-­‐-­‐
/header
-­‐-­‐>
<div
data-­‐role="content">
<p>Page
content
goes
here.</p>
</div><!-­‐-­‐
/content
-­‐-­‐>
<div
data-­‐role="footer">
<h4>Page
Footer</h4>
</div><!-­‐-­‐
/footer
-­‐-­‐>
</div>

16. Forms

17. Form
Elements

18. And
the
Kitchen
Sink
• Transi<ons
• Ajax
and
History
• List
support
• Dialogs
• Menus
• Toolbars
• Grids
• Content
Blocks

19. Bridging
the
Gap

20. Detailed
Presentations
• Upcoming
• Denver
HTML
5
User’s
Group
(July
2011)
• Boulder
Java
User’s
Group
(July
2011)
• Denver
Open
Source
User’s
Group
(October
2011)
• Colorado
Springs
Open
Source
User’s
Group
(October
2011)
• Cold
Fusion
User’s
Group
(June
7,
2011)

21. Photo
Credits
• Highway
Photo
• Phone
Image
Phonegap.com
• Phone
Gap
Image
phonegap.com
• Crowd
Photo
by
alexkess
• Disney
Photo
by
Express
Monorail
• Building
Structure
by
Del~Uks
• Cat
in
Sink
by
sunside