Download - Overview on jQuery mobile
![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