Overview on jQuery mobile
•
0 recomendaciones•876 vistas
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.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Similar a Overview on jQuery mobile
Similar a Overview on jQuery mobile (20)
Último
Último (20)
Overview on jQuery mobile
- 1. Overview on jQuery mobile by Md.Ziaul Haq (jquerygeek) UIX Team, Odesk.
- 2. http://jquerymobile.com/ By jquerygeek
- 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. Ø Why jquery mobile. ü There are few real reason to use jquery mobile. Layout and Theming Engine ü Lets see those … By jquerygeek
- 5. 1. Built based on most popular jquery library. Layout and Theming Engine By jquerygeek
- 6. 2. Based on HTML5 Markup Layout and Theming Engine By jquerygeek
- 7. 3. Touch Friendly inputs and widgets Layout and Theming Engine By jquerygeek
- 8. 4. Ajaxified Friendly Navigation Layout and Theming Engine By jquerygeek
- 9. 5. Layout and Theming Engine Layout and Theming Engine By jquerygeek
- 10. 6. Theme Roller for custom theme Layout and Theming Engine http://jquerymobile.com/themeroller/ By jquerygeek
- 11. 7. Widest Browser Coverage Layout and Theming Engine By jquerygeek
- 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. 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. 9. Widest Mobile Testing Lab By jquerygeek
- 15. 10. Popular Mobile Framework http://www.google.com/trends/explore#q=jquery+mobile,sencha,dojo+mobile,jqmobi By jquerygeek
- 16. 11. Lite Weight JS File By jquerygeek
- 17. 12. Adobe CS-6 support jQuery Mobile By jquerygeek
- 18. Ø Lets Start Implementing By jquerygeek
- 19. Ø Docs For Initial Start http://jquerymobile.com/demos/1.2.0/ By jquerygeek
- 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. Ø Set the Viewport <meta name="viewport" content="width=device-width, initial-scale=1"> By jquerygeek
- 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. Ø Page to Page Linking <div data-role=”footer"> <a href=“page2.html”>Page2</a> <a href=“page3.html”>Page3</a> </div> By jquerygeek
- 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. Ø Link Multiple Page in Single Template <div data-role=”footer"> <a href=“#page2”>Page2</a> <a href=“#page3”>Page3</a> </div> By jquerygeek
- 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. Ø 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. Ø Theme Anatomy a Bit More data-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. Ø There are more items in Practical Implementation May be in Another Session J http://jquerymobile.com/demos/1.2.0/docs/ By jquerygeek
- 30. Ø See Who Are Using Successfully http://www.jqmgallery.com/ By jquerygeek
- 31. Ø 3rd Party Plugins http://jquerymobile.com/resources/ By jquerygeek
- 32. Ø Some Apps and Frameworks http://jquerymobile.com/resources/ By jquerygeek
- 33. Ø Resources and Books http://jquerymobile.com/resources/ By jquerygeek
- 34. Ø Articles and Tutorials http://jquerymobile.com/resources/ By jquerygeek
- 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. Ø That’s For Today From Me Thanks a Lot J Questions, Please……. By jquerygeek