Jquery mobile

jQuery Mobile Brief History Web Mobile JSVM Why? jQuery jQuery Mobile

Brief History of Web Languages 1991 HTML Tags 1995 HTML 2 LiveScript 1996 JScript, EcmaScript CSS 1 1997 HTML 3 1997 HTML 4 1998 EcmaScript 1 & 2, JavaScript 1.3 CSS 2 1999 CSS 3 2000 XHTML 1.0 EcmaScript 3, JavaScript 1.5 2001 XHTML 1.1 2005 JavaScript 1.6 2006 JavaScript 1.7, jQuery 2008 HTML 5 JavaScript 1.8 2010 EcmaScript 5, JavaScript 1.8.5

Brief History of Mobile 1900 – Reginald Fessenden 1901 – First transatlantic radio transmission Guglielmo Marconi 1946 – First mobile phone call

Brief History of Mobile 1G DynaTAC 8000X

Brief History of Mobile 2G 1G DynaTAC 8000X

Brief History of Mobile 3G Smartphones 2G WAP 1G DynaTAC 8000X

Brief History of Mobile 4G Android iPhone 3G Smartphones 2G WAP 1G DynaTAC 8000X

With Some Not So Awesome Standards vs. evolution Browser implementations Device differences Desktop Phone Tablet Operating systems App stores

With Some Not So Awesome iOS Android Blackberry Palm Symbian Windows MeeGo Desktop

With Some Not So Awesome 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

App Stores 111 app stores Android Market App Catalog App Store App World Ovi Store Windows Phone Marketplace Amazon

JSVM Cross-browser support DOM manipulation CSS manipulation AJAX Selectors Event handling Utilities Widgets Effects & animation Progressive enhancement/Graceful degredation Plugins

Why jQuery? Free Choose your license Small Active, vibrant community Popular Mature set of widgets Easy to get help

Why jQuery Mobile? Top Job Trends HTML5 Mobile app Android Twitter jQuery Facebook Social Media iPhone Cloud Computing Virtualization

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

jQuery Is $ $(document).ready(…) Element selection By Tag name CSS class ID Hierarchy Sizzle W3C Selectors API Themeable

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

<!doctypehtml> <html> <head> <link rel="stylesheet"href="jquery.mobile.css"/> <script src="jquery.js"></script> <script src="jquery.mobile.js"></script> </head>

<div data-role="page"id="page1"> <div data-role="header"> Page 1 title <a href="index.html"data-icon="check">Save</a> <a href="index.html"data-icon="delete">Delete</a> </div> <div data-role="content"> Content goes here. Go to <a href="#page2">Page 2</a>. </div> <div data-role="footer"> Page 1 footer <a href="index.html"data-icon="star">Star</a> <a href="index.html" data-icon="info">Info</a> <a href="index.html"data-icon="alert">Alert</a> <a href="index.html"data-icon="plus">Plus</a> <a href="index.html"data-icon="minus">Minus</a> </div> </div>

<div data-role="page"id="page2"> <div data-role="header">Page 2 title</div> <div data-role="content"> Content goes here. Open <a href="index.html" data-transition="pop" data-rel="dialog">dialog</a>. <form> <select data-role="slider"> <option value="on">On</option> <option value="off">Off</option> </select> </form> </div> <div data-role="footer">Page 2 footer</div> </div>

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

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" <div data-role="fieldcontain"> - select <div data-role="controlgroup"> - grouped buttons Dialogs data-rel="dialog"

List Views <ul data-role="listview"> Adds > to the right side of links Dividers Thumbnails Count bubbles Nested lists Split button

$.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

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

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

Other Events scrollstart scrollstop orientationchange Passes orientation as “portrait” or “landscape” Applies .landscape or .portrait CSS classes

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); } .min-width-480px #mainPage, .max-width-768px #mainPage { background-image:url(images/main-bg-480.jpg); } .min-width-768px #mainPage, .max-width-1024px #mainPage { background:navy; }

Media Queries media="screen" media="print" http://www.w3.org/TR/css3-mediaqueries/ $.mobile.media <script> varretinaDisplay = $.mobile.media("-webkit-min-device-pixel-ratio: 2"); if (retinaDisplay) { $("#content").css("background-image", "url('images/bg-retina.png')"); } </script>

Platform Support A Grade iOS Android Windows Phone 7 Blackberry Palm WebOS Opera Mobile Kindle 3 Chrome Desktop Firefox Desktop IE Desktop Opera Desktop

Competitors jQTouch jQuery Plugin Focused on WebKit Sencha Touch Ext JS Titanium Mobile Compiles JavaScript to native iOS and Android XUI Zepto

Gaps & The Future Access to peripherals PhoneGap W3C Device API working group WebIntents

Links http://jquerymobile.com/ http://www.jqmgallery.com/ http://www.ibm.com/developerworks/web/library/wa-jqmobile/

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Jquery mobile

Similar to Jquery mobile (20)

Recently uploaded

Recently uploaded (20)

Jquery mobile

Editor's Notes