Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Jquery Mobile         Scott RyanAugust 2011, Soaring Eagle LLC
AgendaMobile BasicsToolsLayoutsEventsFormsThemes and CSS
OptionsNative                 HTML Iphone XCode and       Jquery Mobile Objective-C                        JQTouch Android...
ToolsMac, IPhone, Ipad, Android DevicesWeb Storm, XCode, EclipseJQuery and JQuery MobileBrowsers  Safari, Firefox, Opera, ...
Best PracticesHTML 5Semantic HTMLDesign for AccessibilityProgressive EnhancementBuild for latest feature set and backfi&Use...
Mobile ChallengesHigh demand and expectations with easy accessLimited BandwidthVarying ConnectivityHigh Memory and process...
Jquery MobileBuilt on leading edge Jquery LibraryPost processing plugin with DOM ManagementMulti device supportMobile Even...
<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8"/>    <link rel="stylesheet" href="css/jquery/jquery.mobile-...
Data RolesLeverage HTML 5 data extensionPage, Header, Content, FooterNavbarbuttonlistviewcontrolgroup
Page StructurePage              Page to Page Links Header           Inter page links Content          Back Links Footer   ...
Page Structure
Page Example<section data-role="page" id="main-page">    <header data-role="header"><h1>Jqeury Mobile Demo</h1></header>  ...
DialogAny page can become a dialogVisua&y different than normal pagesNot included in the historydata-rel=”dialog”data-trans...
LinksAjax by default  Same domainNon Ajax tri*ered by  External Domain, rel=”external”, target, ajax=falseSpeciality links...
ThemesCan apply to pages or components  Can do subparts (header footer, content)  data-theme=”a” or datadivider-theme=”a”T...
Tool barsTypes (icons)  header (up to 2 buttons with title)  footer (variable button count)  navbar (up to 5 per line)Posi...
Collapsable Contentdata-role=”co&apsable”data-co&apsed = “true”Can be nestedCan be in sets  Like an accordion component  d...
Form ElementsTouch Enabled and emulated on BrowserStandard Elements (data-role=”none”)Mobile elements (Device based displa...
ListsNormal ListsNumbered ListsCount BubblesIcon enabled listsSearch FiltersDividers
Eventstap , tapholdswipe, swipele+ , swperightorientation changescro& start , scro& stopMore via plugins
Page EventsPagebeforeshow ( pre transition)pagebeforehidepageshow (post transition)pagehidepagebeforecreate (pre init)page...
Misc Methodschangepagesilentscro&pageloadingaddResolutionBreakpoints
CSS SupportOrientation (portrait, landscape)Resolution Breakpoints  320, 480, 768, 1024  min-width:480px
Media Queries$.mobile.media(“screen and (min-width:480px)”);Retina display (iphone)  $.mobile.media(“screen and (-webkit-m...
PluginsJQtouch (http://jqtouch.com/)swipe supportpinch supportGoogle maps support
Phone GapGeolocation           NotificationsCompass               MediaContactsAccelerometerCameraFile System
Phone GapApplication WrapperXCode for Ipad and IPhoneEclipse for AndroidVisual Studio for WindowsNative Packaging and Nati...
Other ToolsRipple Emulator (http://ripple.tinyhippos.com/)Sencha Touch (http://www.sencha.com/products/touch/)Appcelerator...
Upcoming SlideShare
Loading in …5
×

JQuery Mobile

2,322 views

Published on

Presentation to Denver Java User's Group on August 10 , 2011

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

JQuery Mobile

  1. 1. Jquery Mobile Scott RyanAugust 2011, Soaring Eagle LLC
  2. 2. AgendaMobile BasicsToolsLayoutsEventsFormsThemes and CSS
  3. 3. OptionsNative HTML Iphone XCode and Jquery Mobile Objective-C JQTouch Android Eclipse and Titanium Jara/XML Sencha Touch RHO Mobile
  4. 4. ToolsMac, IPhone, Ipad, Android DevicesWeb Storm, XCode, EclipseJQuery and JQuery MobileBrowsers Safari, Firefox, Opera, IE, Chrome and Canary Phome Gap
  5. 5. Best PracticesHTML 5Semantic HTMLDesign for AccessibilityProgressive EnhancementBuild for latest feature set and backfi&Use standard code structure, clean code and document
  6. 6. Mobile ChallengesHigh demand and expectations with easy accessLimited BandwidthVarying ConnectivityHigh Memory and processing powerLeading Edge PlatformsSo Many platforms
  7. 7. Jquery MobileBuilt on leading edge Jquery LibraryPost processing plugin with DOM ManagementMulti device supportMobile Event Support (swipe, scro&, lists, etc)WAI-ARIA Support for accessibilityPowerful Themes and HTML 5 and CSS support
  8. 8. <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"/> <link rel="stylesheet" href="css/jquery/jquery.mobile-1.0b1.min.css"/> <link rel="stylesheet" href="css/main.css"/> <title>Demo JQuery Mobile</title> <!--[if lt IE 9]> <script src="javascript/html5.js" type="text/javascript"></script> <![endif]--> <script src="javascript/main.js"></script> <script src="javascript/jquery/jquery-1.6.1.min.js" type="text/javascript"></script> <script type="text/javascript"> // Initialize the document here $(document).ready(function() { // Your code here }); </script> <script src="javascript/jquery/jquery.mobile-1.0b1.min.js" type="text/javascript"></script> <script type="text/javascript"> // Update any JQuery mobile settings here $(document).bind("mobileinit", function() { // This is the default anyway $.mobile.ajaxEnabled = true; }); </script></head>
  9. 9. Data RolesLeverage HTML 5 data extensionPage, Header, Content, FooterNavbarbuttonlistviewcontrolgroup
  10. 10. Page StructurePage Page to Page Links Header Inter page links Content Back Links Footer History Page Transitions (pop, fade, flip, slide up and down)
  11. 11. Page Structure
  12. 12. Page Example<section data-role="page" id="main-page"> <header data-role="header"><h1>Jqeury Mobile Demo</h1></header> <div data-role="content"><p>This demo is a very simple set of code.</p> <div style="width:20%;"> <a href="#page-description" data-role="button">Page Description</a> </div> </div> <footer data-role="footer"><h2>Soaring Eagle LLC</h2></footer></section><section data-role="page" id="demo-dialog" data-theme="e"> <header data-role="header"><h1>Demo Dialog</h1></header> <div data-role="content"> <div>This is a basic Dialog example.</div> </div> <footer data-role="footer"><h2>Soaring Eagle LLC</h2></footer></section>
  13. 13. DialogAny page can become a dialogVisua&y different than normal pagesNot included in the historydata-rel=”dialog”data-transition=”flip”
  14. 14. LinksAjax by default Same domainNon Ajax tri*ered by External Domain, rel=”external”, target, ajax=falseSpeciality links mailto: , tel:
  15. 15. ThemesCan apply to pages or components Can do subparts (header footer, content) data-theme=”a” or datadivider-theme=”a”Theme builder coming similar to jquery
  16. 16. Tool barsTypes (icons) header (up to 2 buttons with title) footer (variable button count) navbar (up to 5 per line)Position (data-position = “”) fixed and fu& screen
  17. 17. Collapsable Contentdata-role=”co&apsable”data-co&apsed = “true”Can be nestedCan be in sets Like an accordion component data-role=”co&apsable-set”
  18. 18. Form ElementsTouch Enabled and emulated on BrowserStandard Elements (data-role=”none”)Mobile elements (Device based display)data-role=”field-contain” Groups label and form element
  19. 19. ListsNormal ListsNumbered ListsCount BubblesIcon enabled listsSearch FiltersDividers
  20. 20. Eventstap , tapholdswipe, swipele+ , swperightorientation changescro& start , scro& stopMore via plugins
  21. 21. Page EventsPagebeforeshow ( pre transition)pagebeforehidepageshow (post transition)pagehidepagebeforecreate (pre init)pagecreate
  22. 22. Misc Methodschangepagesilentscro&pageloadingaddResolutionBreakpoints
  23. 23. CSS SupportOrientation (portrait, landscape)Resolution Breakpoints 320, 480, 768, 1024 min-width:480px
  24. 24. Media Queries$.mobile.media(“screen and (min-width:480px)”);Retina display (iphone) $.mobile.media(“screen and (-webkit-min-device-pixle- ratio:2)”);
  25. 25. PluginsJQtouch (http://jqtouch.com/)swipe supportpinch supportGoogle maps support
  26. 26. Phone GapGeolocation NotificationsCompass MediaContactsAccelerometerCameraFile System
  27. 27. Phone GapApplication WrapperXCode for Ipad and IPhoneEclipse for AndroidVisual Studio for WindowsNative Packaging and Native Access
  28. 28. Other ToolsRipple Emulator (http://ripple.tinyhippos.com/)Sencha Touch (http://www.sencha.com/products/touch/)Appcelerator (http://www.appcelerator.com)RhoMobile (http://rhomobile.com/)Test Swarm (http://swarm.jquery.org/)Touch Scro& (https://github.com/neave/touch-scro&)

×