JQuery Mobile

2,038
-1

Published on

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

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,038
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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&)

    ×