Overview on jQuery mobile


Published on

This is very basic presentation focused on jQuery mobile, where it highlighted why people will choose it, and how easily anybody can start on it. It was developed for our in house presentation.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Overview on jQuery mobile

  1. 1. Overview onjQuery mobile byMd.Ziaul Haq (jquerygeek) UIX Team, Odesk.
  2. 2. http://jquerymobile.com/ By jquerygeek
  3. 3. Ø  What is jquery mobileü  Touch-Optimized Web Framework for Smartphones & Tabletsü  Built based on jquery framework by jquery foundationü  HTML5 based UI markupü  Lightweight single js file and a single css file. By jquerygeek
  4. 4. Ø  Why jquery mobile. ü  There are few real reason to use jquery mobile. Layout and Theming Engineü  Lets see those … By jquerygeek
  5. 5. 1. Built based on most popularjquery library. Layout and Theming Engine By jquerygeek
  6. 6. 2. Based on HTML5 Markup Layout and Theming Engine By jquerygeek
  7. 7. 3. Touch Friendly inputs andwidgets Layout and Theming Engine By jquerygeek
  8. 8. 4. Ajaxified Friendly Navigation Layout and Theming Engine By jquerygeek
  9. 9. 5. Layout and Theming Engine Layout and Theming Engine By jquerygeek
  10. 10. 6. Theme Roller for custom theme Layout and Theming Enginehttp://jquerymobile.com/themeroller/ By jquerygeek
  11. 11. 7. Widest Browser Coverage Layout and Theming Engine By jquerygeek
  12. 12. 7. Widest Browser Coverage ü  iOs 3.2+, Android 2.1+/Honeycomb Windows Phone 7ü  Blackberry 6.0/Playbookü  Palm WebOS 1.4+ ü  Mobile Opera & Mobile Firefox Amazon Kindle 3 & Fireü  Desktop Chrome, FF, IE 7+, Opera By jquerygeek
  13. 13. 8. Progressive Enhancement ü  C-Grade: Basic HTMLü  B-Grade: Enhanced Style, No Ajax ü  A-Grade: Full Enhanced Style. Ajax and CSS Transitions http://jquerymobile.com/gbs/ By jquerygeek
  14. 14. 9. Widest Mobile Testing Lab By jquerygeek
  15. 15. 10. Popular Mobile Frameworkhttp://www.google.com/trends/explore#q=jquery+mobile,sencha,dojo+mobile,jqmobi By jquerygeek
  16. 16. 11. Lite Weight JS File By jquerygeek
  17. 17. 12. Adobe CS-6 support jQueryMobile By jquerygeek
  18. 18. Ø  Lets Start Implementing By jquerygeek
  19. 19. Ø  Docs For Initial Start http://jquerymobile.com/demos/1.2.0/ By jquerygeek
  20. 20. Ø  Include Latest Files<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /><script src="http://code.jquery.com/jquery-1.8.2.min.js"></script><script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>http://jquerymobile.com/download/ By jquerygeek
  21. 21. Ø  Set the Viewport<meta name="viewport" content="width=device-width,initial-scale=1"> By jquerygeek
  22. 22. Ø  Basic Page Content Structure<body> <div data-role="page"> <div data-role="header"> <h1>My Title</h1> </div> <div data-role="content"> <p>Hello world</p> </div> <div data-role=”footer"> <p>My Footer</p> </div> </div></body> http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html By jquerygeek
  23. 23. Ø  Page to Page Linking<div data-role=”footer"> <a href=“page2.html”>Page2</a> <a href=“page3.html”>Page3</a></div> By jquerygeek
  24. 24. Ø  Loaded by AJAX and With URL<body> <!– If no data-role=page, content will load here --> <div data-role="page"> <!– Page2 and Page3 Content will load here --> </div></body> By jquerygeek
  25. 25. Ø  Link Multiple Page in Single Template<div data-role=”footer"> <a href=“#page2”>Page2</a> <a href=“#page3”>Page3</a></div> By jquerygeek
  26. 26. Ø  Multi Page Template Structure<div data-role="page” id=“page2”> <div data-role="header"> <h1>My Title</h1> </div> <div data-role="content"> <p>Hello world</p> </div> <div data-role=”footer"> <p>My Footer</p> </div></div><div data-role="page” id=“page3”> <div data-role="header"> <h1>My Title</h1> </div> <div data-role="content"> <p>Hello world</p> </div> <div data-role=”footer"> <p>My Footer</p> </div></div> By jquerygeek
  27. 27. Ø  Basic Page Theme<div data-theme=“c”> <ul data-role=”listview"> <li>My Title 1</li> <li>My Title 2</li> <li>My Title 2</li> </ul></div> By jquerygeek
  28. 28. Ø  Theme Anatomy a Bit Moredata-theme=[a-f]data-[element]theme=[a-f]<ul data-dividertheme=[a-f]><ul data-inset=true> http://jquerymobile.com/demos/1.2.0/docs/api/themes.html By jquerygeek
  29. 29. Ø  There are more items in Practical ImplementationMay be in Another Session Jhttp://jquerymobile.com/demos/1.2.0/docs/ By jquerygeek
  30. 30. Ø  See Who Are Using Successfullyhttp://www.jqmgallery.com/ By jquerygeek
  31. 31. Ø  3rd Party Plugins http://jquerymobile.com/resources/ By jquerygeek
  32. 32. Ø  Some Apps and Frameworkshttp://jquerymobile.com/resources/ By jquerygeek
  33. 33. Ø  Resources and Bookshttp://jquerymobile.com/resources/ By jquerygeek
  34. 34. Ø  Articles and Tutorials http://jquerymobile.com/resources/ By jquerygeek
  35. 35. Ø  Community and Helps •  http://forum.jquery.com/jquery-mobile •  http://jquerymobile.com/blog •  http://www.linkedin.com/groups/jQuery-Mobile- Developers-4003480 •  http://www.raymondcamden.com/ •  http://andymatthews.net/category/jQuery-Mobile/ •  http://coenraets.org/blog/category/jquery-mobile/ By jquerygeek
  36. 36. Ø  That’s For Today From Me Thanks a Lot J Questions, Please……. By jquerygeek