overview on jquery mobile
DESCRIPTION
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.TRANSCRIPT
![Page 1: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/1.jpg)
Overview on jQuery mobile
by Md.Ziaul Haq (jquerygeek)
UIX Team, Odesk.
![Page 2: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/2.jpg)
*
http://jquerymobile.com/
By jquerygeek
![Page 3: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/3.jpg)
* By jquerygeek
Ø 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.
![Page 4: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/4.jpg)
* By jquerygeek
Ø Why jquery mobile.
ü There are few real reason to use jquery mobile.
ü Lets see those … Layout and Theming Engine
![Page 5: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/5.jpg)
* By jquerygeek
1. Built based on most popular jquery library.
Layout and Theming Engine
![Page 6: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/6.jpg)
* By jquerygeek
2. Based on HTML5 Markup
Layout and Theming Engine
![Page 7: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/7.jpg)
* By jquerygeek
3. Touch Friendly inputs and widgets
Layout and Theming Engine
![Page 8: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/8.jpg)
* By jquerygeek
4. Ajaxified Friendly Navigation
Layout and Theming Engine
![Page 9: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/9.jpg)
* By jquerygeek
5. Layout and Theming Engine
Layout and Theming Engine
![Page 10: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/10.jpg)
* By jquerygeek
6. Theme Roller for custom theme
Layout and Theming Engine
http://jquerymobile.com/themeroller/
![Page 11: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/11.jpg)
* By jquerygeek
7. Widest Browser Coverage
Layout and Theming Engine
![Page 12: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/12.jpg)
* By jquerygeek
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
![Page 13: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/13.jpg)
* By jquerygeek
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/
![Page 14: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/14.jpg)
* By jquerygeek
9. Widest Mobile Testing Lab
![Page 15: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/15.jpg)
* By jquerygeek
10. Popular Mobile Framework
http://www.google.com/trends/explore#q=jquery+mobile,sencha,dojo+mobile,jqmobi
![Page 16: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/16.jpg)
* By jquerygeek
11. Lite Weight JS File
![Page 17: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/17.jpg)
* By jquerygeek
12. Adobe CS-6 support jQuery Mobile
![Page 18: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/18.jpg)
* By jquerygeek
Ø Lets Start Implementing
![Page 19: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/19.jpg)
* By jquerygeek
Ø Docs For Initial Start
http://jquerymobile.com/demos/1.2.0/
![Page 20: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/20.jpg)
* By jquerygeek
<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>
Ø Include Latest Files
http://jquerymobile.com/download/
![Page 21: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/21.jpg)
* By jquerygeek
<meta name="viewport" content="width=device-width, initial-scale=1">
Ø Set the Viewport
![Page 22: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/22.jpg)
* By jquerygeek
<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>
Ø Basic Page Content Structure
http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html
![Page 23: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/23.jpg)
* By jquerygeek
Ø Page to Page Linking
<div data-role=”footer"> <a href=“page2.html”>Page2</a> <a href=“page3.html”>Page3</a>
</div>
![Page 24: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/24.jpg)
* By jquerygeek
<body> <!– If no data-role=page, content will load here --> <div data-role="page"> <!– Page2 and Page3 Content will load here --> </div>
</body>
Ø Loaded by AJAX and With URL
![Page 25: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/25.jpg)
* By jquerygeek
Ø Link Multiple Page in Single Template
<div data-role=”footer"> <a href=“#page2”>Page2</a> <a href=“#page3”>Page3</a>
</div>
![Page 26: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/26.jpg)
* By jquerygeek
<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>
Ø Multi Page Template Structure
![Page 27: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/27.jpg)
* By jquerygeek
<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>
Ø Basic Page Theme
![Page 28: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/28.jpg)
* By jquerygeek
data-theme=[a-f]
data-[element]theme=[a-f]
<ul data-dividertheme=[a-f]>
<ul data-inset=true>
Ø Theme Anatomy a Bit More
http://jquerymobile.com/demos/1.2.0/docs/api/themes.html
![Page 29: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/29.jpg)
* By jquerygeek
May be in Another Session J
Ø There are more items in Practical Implementation
http://jquerymobile.com/demos/1.2.0/docs/
![Page 30: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/30.jpg)
* By jquerygeek
Ø See Who Are Using Successfully
http://www.jqmgallery.com/
![Page 31: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/31.jpg)
* By jquerygeek
Ø 3rd Party Plugins
http://jquerymobile.com/resources/
![Page 32: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/32.jpg)
* By jquerygeek
Ø Some Apps and Frameworks
http://jquerymobile.com/resources/
![Page 33: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/33.jpg)
* By jquerygeek
Ø Resources and Books
http://jquerymobile.com/resources/
![Page 34: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/34.jpg)
* By jquerygeek
Ø Articles and Tutorials
http://jquerymobile.com/resources/
![Page 35: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/35.jpg)
* By jquerygeek
Ø 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/
![Page 36: Overview on jQuery mobile](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c800f44a7959786d8b459a/html5/thumbnails/36.jpg)
* By jquerygeek
Ø That’s For Today From Me
Questions, Please…….
Thanks a Lot J