Jquery mobile
Download as PPTX, PDF0 likes1,600 views
jQuery Mobile is a mobile web framework that makes it easy to develop mobile-optimized websites and apps using HTML, CSS and JavaScript. It leverages jQuery and jQuery UI to provide widgets and interactions optimized for touch devices. Some key features include touch events, touch-optimized UI widgets, transitions between pages, and support for common mobile browsers and platforms. jQuery Mobile aims to provide a unified user experience across all common mobile device platforms.
Jquery mobile
- 3. Brief History of Web Languages1991 HTML Tags1995 HTML 2 LiveScript1996 JScript, EcmaScript CSS 11997 HTML 31997 HTML 41998 EcmaScript 1 & 2, JavaScript 1.3 CSS 21999 CSS 32000 XHTML 1.0 EcmaScript 3, JavaScript 1.52001 XHTML 1.12005 JavaScript 1.62006 JavaScript 1.7, jQuery2008 HTML 5 JavaScript 1.82010 EcmaScript 5, JavaScript 1.8.5
- 4. Brief History of Mobile1900 – Reginald Fessenden1901 – First transatlantic radio transmission Guglielmo Marconi1946 – First mobile phone call
- 5. Brief History of Mobile
- 6. Brief History of Mobile1GDynaTAC 8000X
- 7. Brief History of Mobile2G1GDynaTAC 8000X
- 8. Brief History of Mobile3GSmartphones2GWAP1GDynaTAC 8000X
- 9. Brief History of Mobile4GAndroidiPhone3GSmartphones2GWAP1GDynaTAC 8000X
- 11. With Some Not So AwesomeStandards vs. evolutionBrowser implementationsDevice differencesDesktopPhoneTabletOperating systemsApp stores
- 12. Browsers
- 14. Trend Trends
- 15. With Some Not So AwesomeiOSAndroidBlackberryPalmSymbianWindowsMeeGoDesktop
- 16. With Some Not So AwesomeiOSAndroidBlackberryPalmTablet 1.0.72.0FroyoIce Cream Sandwich13GTablet 1.0.273.04G4.551.41.23GSGingerbreadHoneycomb4.66OperaFirefox1.1.99Mobile 51Symbian^3Symbian^2Mobile 6Safari1.3Phone 7IESymbian^1Symbian^41.2SymbianWindowsMeeGoDesktop
- 17. With Some Not So AwesomeiOSAndroidBlackberryPalmTablet 1.0.72.0FroyoIce Cream Sandwich13GTablet 1.0.273.04G4.551.41.23GSGingerbreadHoneycomb4.66OperaFirefox1.1.99Mobile 51Symbian^3Symbian^2Mobile 6Safari1.3Phone 7IESymbian^1Symbian^41.2SymbianWindowsMeeGoDesktop
- 18. App Stores111 app storesAndroid MarketApp CatalogApp StoreApp WorldOvi StoreWindows Phone MarketplaceAmazon
- 19. JSVM
- 20. JSVMCross-browser supportDOM manipulationCSS manipulationAJAXSelectorsEvent handlingUtilitiesWidgetsEffects & animationProgressive enhancement/Graceful degredationPlugins
- 21. Why jQuery?FreeChoose your licenseSmallActive, vibrant communityPopularMature set of widgetsEasy to get help
- 22. Easy to Get jQuery Help
- 23. Why jQuery Mobile?Top Job TrendsHTML5Mobile appAndroid Twitter jQueryFacebookSocial Media iPhoneCloud Computing Virtualization
- 24. jQueryStarted Aug 200631 KBUsed by 43% of top 10,000 most visited sitesLicenses: GPL or MITEcosystemjQuery CorejQuery UIjQuery MobileQUnitSizzlePlugins
- 25. jQueryIs $$(document).ready(…)Element selectionByTag nameCSS classIDHierarchySizzleW3C Selectors APIThemeable
- 26. jQuery MobileStarted October 2010Currently 1.0 Beta 2Feature completeLicenses: GPL or MIT26 KBMarkup drivenLeverages HTML5 data- attributesThemeableAccessibility (WAI-ARIA)Touch eventsTouch focused UI
- 27. <!doctypehtml><html><head> <link rel="stylesheet"href="jquery.mobile.css"/> <script src="jquery.js"></script> <script src="jquery.mobile.js"></script></head>
- 28. <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>
- 29. <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>
- 30. TransitionsslideSlide right to left (default)slideupSlide from the bottom to the topslidedownSlide from the top to the bottompopExpand the new page for popups and dialogsfadeFade the new page inflipFlip the old and new page
- 31. RolesButtonsdata-role="button"submit, reset, button, or imageCollapsible contentdata-role="collapsible" data-state="collapsed"FormAutomatically replaces form elementsdata-role="slider"<div data-role="fieldcontain"> - select<div data-role="controlgroup"> - grouped buttonsDialogsdata-rel="dialog"
- 32. List Views<ul data-role="listview">Adds > to the right side of linksDividersThumbnailsCount bubblesNested listsSplit 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 EventstaptapholdswipeVertically 20 or fewer pixelsHorizontally 30 or more pixelsSwipeleftLeft 30 or more pixelsswiperightRight 30 or more pixels
- 35. Page Eventspagebeforehideon the page being transitioned from, before the transition between pages startspagebeforeshowon the page being transitioned to, before the transition between pages startspagehideon the page being transitioned from, after the transition finishespageshowon the page being transitioned to, after the transition finishes
- 36. Other EventsscrollstartscrollstoporientationchangePasses orientation as “portrait” or “landscape”Applies .landscape or .portrait CSS classes
- 37. Handling Screen sizesDefault 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;}
- 38. Media Queriesmedia="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>
- 39. Demo
- 40. Platform SupportA GradeiOSAndroidWindows Phone 7BlackberryPalm WebOSOpera MobileKindle 3Chrome DesktopFirefox DesktopIE DesktopOpera Desktop
- 41. CompetitorsjQTouchjQuery PluginFocused on WebKitSencha TouchExt JSTitanium MobileCompiles JavaScript to nativeiOS and AndroidXUIZepto
- 42. Gaps & The FutureAccess to peripheralsPhoneGapW3C Device API working groupWebIntents
Editor's Notes
- #6: June 1946 – first mobile phone callApril 1973 – first handheld mobile phone call Dr Martin Cooper Motorola1982 – Motorola DynaTAC 8000X1980s – 1G networks1990s – 2G networks1999 – WAP 2000 – Smartphones2000s – 3G networks2007 – iPhone2008 – Android 2010s – 4G