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