Jquery mobile

1. jQuery Mobile

2. jQuery Mobile
Brief History
Web
Mobile
JSVM
Why?
jQuery
jQuery Mobile
3. Brief History of Web Languages
1991HTML Tags
1995HTML 2LiveScript
1996JScript, EcmaScriptCSS 1
1997HTML 3
1997HTML 4
1998EcmaScript 1 & 2, JavaScript 1.3CSS 2
1999CSS 3
2000XHTML 1.0EcmaScript 3, JavaScript 1.5
2001XHTML 1.1
2005 JavaScript 1.6
2006JavaScript 1.7, jQuery
2008HTML 5JavaScript 1.8
2010EcmaScript 5, JavaScript 1.8.5
4. Brief History of Mobile
1900 Reginald Fessenden
1901 First transatlantic radio transmission Guglielmo Marconi
1946 First mobile phone
call
1G
DynaTAC 8000X
2G
1G
DynaTAC 8000X
3G
Smartphones
2G
WAP
1G
DynaTAC 8000X
4G
Android
iPhone
3G
Smartphones
2G
WAP
1G
DynaTAC 8000X
10. Culmination of Awesome
11. With Some Not So Awesome
Standards vs. evolution
Browser implementations
Device differences
Desktop
Phone
Tablet
Operating systems
App stores
12. Browsers
13. Operating Systems
14. Trend Trends
iOS
Android
Blackberry
Palm
Symbian
Windows
MeeGo
Desktop
iOS
Android
Blackberry
Palm
Tablet 1.0.7
2.0
Froyo
Ice Cream Sandwich
1
3G
Tablet 1.0.2
7
3.0
4G
4.5
5
1.4
1.2
3GS
Gingerbread
Honeycomb
4.6
6
Opera
Firefox
1.1.99
Mobile 5
1
Symbian^3
Symbian^2
Mobile 6
Safari
1.3
Phone 7
IE
Symbian^1
Symbian^4
1.2
Symbian
Windows
MeeGo
Desktop
iOS
Android
Blackberry
Palm
Tablet 1.0.7
2.0
Froyo
Ice Cream Sandwich
1
3G
Tablet 1.0.2
7
3.0
4G
4.5
5
1.4
1.2
3GS
Gingerbread
Honeycomb
4.6
6
Opera
Firefox
1.1.99
Mobile 5
1
Symbian^3
Symbian^2
Mobile 6
Safari
1.3
Phone 7
IE
Symbian^1
Symbian^4
1.2
Symbian
Windows
MeeGo
Desktop
18. App Stores
111 app stores
Android Market
App Catalog
App Store
App World
Ovi Store
Windows Phone Marketplace
Amazon
19. JSVM
20. JSVM
Cross-browser support
DOM manipulation
CSS manipulation
AJAX
Selectors
Event handling
Utilities
Widgets
Effects & animation
Progressive enhancement/Graceful degredation
Plugins
21. Why jQuery?
Free
Choose your license
Small
Active, vibrant community
Popular
Mature set of widgets
Easy to get help
22. Easy to Get jQuery Help
23. Why jQuery Mobile?
Top Job Trends
HTML5
Mobile app
Android
Twitter
jQuery
Facebook
Social Media
iPhone
Cloud Computing
Virtualization
24. jQuery
Started Aug 2006
31 KB
Used by 43% of top 10,000 most visited sites
Licenses: GPL or MIT
Ecosystem
jQuery Core
jQuery UI
jQuery Mobile
QUnit
Sizzle
Plugins
25. jQuery
Is $
$(document).ready()
Element selection
By
Tag name
CSS class
ID
Hierarchy
Sizzle
W3C Selectors API
Themeable
26. jQuery Mobile
Started October 2010
Currently 1.0 Beta 2
Feature complete
Licenses: GPL or MIT
26 KB
Markup driven
Leverages HTML5 data- attributes
Themeable
Accessibility (WAI-ARIA)
Touch events
Touch focused UI
27.

28.

30. Transitions
slide
Slide right to left (default)
slideup
Slide from the bottom to the top
slidedown
Slide from the top to the bottom
pop
Expand the new page for popups and dialogs
fade
Fade the new page in
flip
Flip the old and new page
31. Roles
Buttons
data-role="button"
submit, reset, button, or image
Collapsible content
data-role="collapsible"
data-state="collapsed"
Form
Automatically replaces form elements
data-role="slider"

Adds > to the right side of links
Dividers
Thumbnails
Count bubbles
Nested lists
Split button
33. $.mobile
$.mobile.changePage
$.mobile.changePage("weblog.php", "slide")
$.mobile.pageLoading
$.mobile.pageLoading()// show
$.mobile.pageLoading(true)// hide
$.mobile.silentScroll
$.mobile.silentScroll(100)
$.mobile.addResolutionBreakpoints
$.mobile.addResolutionBreakpoints(800)
$.mobile.activePage
34. Touch Events
tap
taphold
swipe
Vertically 20 or fewer pixels
Horizontally 30 or more pixels
Swipeleft
Left 30 or more pixels
swiperight
Right 30 or more pixels
35. Page Events
pagebeforehide
on the page being transitioned from, before the transition between pages starts
pagebeforeshow
on the page being transitioned to, before the transition between pages starts
pagehide
on the page being transitioned from, after the transition finishes
pageshow
on the page being transitioned to, after the transition finishes
36. Other Events
scrollstart
scrollstop
orientationchange
Passes orientation as portrait or landscape
Applies .landscape or .portrait CSS classes
37. Handling Screen sizes
Default breakpoints 320, 480, 768, 1024
.min-width-320px #mainPage,
.max-width-480px #mainPage {
background-image: url(images/main-bg-320.jpg);
}
background-image:url(images/main-bg-480.jpg);
}
background:navy;
}
38. Media Queries
media="screen"
media="print"
http://www.w3.org/TR/css3-mediaqueries/
$.mobile.media

39. Demo
40. Platform Support
A Grade
iOS
Android
Windows Phone 7
Blackberry
Palm WebOS
Opera Mobile
Kindle 3
Chrome Desktop
Firefox Desktop
IE Desktop
Opera Desktop
41. Competitors
jQTouch
jQuery Plugin
Focused on WebKit
Sencha Touch
Ext JS
Titanium Mobile
Compiles JavaScript to native
iOS and Android
XUI
Zepto
42. Gaps & The Future
Access to peripherals
PhoneGap
W3C Device API working group
WebIntents
43. Links
http://jquerymobile.com/
http://www.jqmgallery.com/
http://www.ibm.com/developerworks/web/library/wa-jqmobile/
44. Attributions
http://keyolhubey.blogspot.com/2009/11/telecommunication-services-in-maldives.html
http://xahlee.blogspot.com/2011/05/html-css-javascript-web-tech-and.html
http://en.wikipedia.org/wiki/Motorola_DynaTAC
http://en.wikipedia.org/wiki/History_of_radio
http://www.flickr.com/photos/zerok/465343120/
http://www.flickr.com/photos/shodan/19555323 4/
http://www.flickr.com/photos/mellis/3019296692/
http://www.flickr.com/photos/29881266@N08/3196645048/

Jquery mobile

Technology

Transcript of Jquery mobile