Upload
ziaul-haq
View
107
Download
2
Embed Size (px)
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.
Citation preview
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