Overview on jQuery mobile

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


* By jquerygeek

3. Touch Friendly inputs and widgets


* By jquerygeek

4. Ajaxified Friendly Navigation


* By jquerygeek

5. Layout and Theming Engine


* By jquerygeek

6. Theme Roller for custom theme


http://jquerymobile.com/themeroller/

* By jquerygeek

7. Widest Browser Coverage


* 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


* By jquerygeek

Ø  Resources and Books


* By jquerygeek

Ø  Articles and Tutorials


* 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

Overview on jQuery mobile

Technology

Transcript of Overview on jQuery mobile