jQuery Mobile is a touch -optimized web framework (also known as a mobile framework), more specifically a JavaScript library , currently being developed by the jQuery project team. The development Focuses Creating a framework is compliant with a wide variety of smartphones and tablet computers , [3] made by the growing Necessary goal heterogeneous tablet and smartphone market. [4] The jQuery Mobile framework is compatible with other mobile app frameworks [5] and platforms such as PhoneGap , Worklight [6] and more.

Features

  • Compatible with all major desktop browsers, including Android , iOS , Windows Phone , Blackberry , WebOS , Symbian .
  • Built on top of jQuery core so it: has a minimal learning curve for people already familiar with jQuery syntax.
  • Theming framework that allows creation of custom themes.
  • Limited dependencies and lightweight to optimize speed.
  • The same underlying code will automatically scale to any screen.
  • HTML5-driven configuration for laying out pages with minimal scripting.
  • AJAX -powered navigation with animated page transitions that provides ability to create semantic URLs through pushState.
  • UI widgets that are touch-optimized and platform-agnostic.

(Source: from the jQuery Mobile website) [3]

Example use

$ ( 'div' ). on ( 'tap' , function ( event ) {
 alert ( 'element tapped' );
});
$ ( document ). ready ( function () {
 $ ( 'li .myList' ). it ( 'click touchstart' , function () {
 $ ( '.myDiv' ). slideDown ( '500' );
 });
}

A basic example

What follows is a basic jQuery Mobile project utilizing HTML5 semantic elements . It is important to link to the jQuery and jQuery Mobile JavaScript libraries, and stylesheet (the files can be downloaded and hosted locally, but it is recommended to link to the files hosted on the CDN jQuery ).

A screen of the project is defined by a sectionHTML5 element, and data-roleof page. Note that this data-roleis an example of the HTML5 dataattribute, in this case being defined by jQuery Mobile. A page May-have headerand footerElements with data-roleof headerand footer, respectivement. In between, there may be an articleelement, with a roleof mainand a classof ui-content. Lastly, a navelement, with data-roleof navbarmay be present.

One HTML document can contain more than one sectionelement, and thus more than one screenful of content . This way it is only necessary to load one file which includes multiple pages of content. One page can link to another page within the same file by referencing the page’s id attribute (eg href="#second").

In the example below, two other data-attributes are used. The data-themeattribute tells the browser what theme to render. The data-add-back-btnattribute adds back to the page if set to true.

Lastly, icons can be added via the data-iconattribute. jQuery Mobile has 50 commonly-used icons built in.

A brief explanation of the Data Attributes used in this example:

data-role – Specifies the role of the element, such as header, content, footer, etc.

data-theme – Specify which design theme to use for elements within a container. Can be set to: a or b.

data-position – Specifies whether the element should be fixed, in which case it will be at the top (for header) or bottom (for footer).

data-transition – Specifies one of ten built-in movies.

data-icon – Specifies one of fifty built-in icons that can be added to an element.

1 <! Doctype html>
2 < html >
3 < head >
4 < meta charset = "utf-8" >
5 < title > jQuery Mobile Example </ title >
6 < meta name = "viewport" content = "initial-scale = 1, user-scalable = no, width = device-width " >
7 < link rel = " stylesheet " href = " http://code.jquery.com/mobile/1.4.5 / jquery.mobile-1.4.5.min.css ">
8 </ head >
9
10 < body >
11 < data-role section = "page" id = "first" data-theme = "a" > 12 < header data-role = "header" data-position = "fixed " > 13 < h1 > Page 1 Header </ h1 > 14 </ header > 15 16 <article role =
 "hand" class = "ui-content" >
17 < h2 > Hello, world! </ h2 >
18 < a href = "#second" data-role = "button" data-inline = "true" data-transition = "flow" data-icon = "carat-r" data-iconpos = "right" > Go to Page 2 </ a >
19 </ Article >
20
21 < "footer" data-position = "fixed" >
22 < h4 > Page 1 Footer </ h4 >
23 </ footer >
24 </ section >
25
26 < data-role section = "page" id = "second" data- theme = "b" > 27 < header data-role = "header" data-position = "fixed"data-add-back-btn = "true" > 28
 < h1 > < header </ h1 >
29 </ header >
30
31 < article role = "main" class = "ui-content" >
32 < h2 > Example Page </ h2 >
33 </ article >
34
35 < footer data-role = "footer" data-position = "fixed" >
36 < h4 >Footer </h4 >
37 </ footer >
38 </ section >
39 < script src = "https://code.jquery.com/jquery-2.2.4.min.js" > </ script >
40 < script src = "http : //code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js " > </ script >
41 </ body >
42 </ html >

Theming

jQuery Mobile provides a powerful framework that allows developers to customize color schemes and certain CSS aspects of UI features. Developers can use the Mobile ThemeRoller [7] application to customize these appearances and create highly branded experiences. After developing a theme in the ThemeRoller application, programs can download a custom CSS file and include it in their project to use their custom theme. [8]

Each theme can contain up to 26 unique color “swatches,” each of which consists of a header, content body, and button states. Combining different swatches allows them to create a wider range of visual effects than they would be able to. Switching between different swatches is a simple as adding an attribute called “data-theme” to HTML elements.

The default jQuery Mobile theme comes with two different color swatches, named “a” and “b”. Here is an example of how to create a toolbar with the “b” swatch:

< div data-role = "header" data-theme = "b" >
< h1 > Title Page </ h1 >
</ div >

(Source: from the jQuery Mobile website) [3]

There are already a handful of open source themes that are developed and supported by third-party organizations. One such open source style is the Metro style theme that was developed and released by Microsoft Open Technologies, Inc. [9] The Metro style theme is meant to mimic the UI of the Metro (design language) that Microsoft uses in its mobile operating systems.

Mobile browser support

Platform Version native Phone Gap Opera Mobile Opera Mini Fennec Ozone Net front
0.9 8.5, 8.65 9.5 10 4.0 5.0 1.0 1.1 * 0.9 4.0
iOS v2.2.1 AT AT
v3.1.3, v3.2 AT AT AT
v4-7.0 AT AT AT
Symbian S60 v3.1, v3.2 AT AT AT AT AT C C
v5.0 C C C AT C AT
Symbian UIQ v3.0, v3.1 C
8.65
C
v3.2 C C
Symbian Platform v.3.0 AT
BlackBerry OS v4.5 C C C
v4.6, v4.7 C C C B
v5.0 B AT C AT
v6.0 AT AT AT
Android v1.5, v1.6 AT AT
v2.1 AT AT
v2.2 AT AT AT* C * AT*
Windows Mobile v6.1 C C C C B C B C
v6.5.1 C C C AT AT C AT
v7.0 AT AT C AT
webOS 1.4.1 AT AT
bada 1.0 AT
Maemo 5.0 B B C B *
MeeGo 1.1 * AT* AT* AT*

Key:

  • A – High Quality. A browser that’s capable of, at least, utilizing media queries (a requirement for jQuery Mobile). These browsers will be actively tested against, but can not receive the full capabilities of jQuery Mobile.
  • B – Medium Quality. A capable browser that does not have enough market share to warrant day-to-day testing. Bug fixes will still be applied to help these browsers.
  • C – Low Quality. A browser that is not capable of utilizing media queries. They will not be any jQuery Mobile scripting or CSS.
  • * – Upcoming browser. This browser is not yet released but is in alpha / beta testing.

(Source: from the jQuery Mobile website) [3]

Release history

Release date Version number
October 16 2010 1.0.0 Alpha 1
November 12, 2010 1.0.0 Alpha 2
February 4 2011 1.0.0 Alpha 3
March 31 2011 1.0.0 Alpha 4
April 7 2011 1.0.0 Alpha 4.1
June 20 2011 1.0.0 Beta 1
August 3 2011 1.0.0 Beta 2
September 8 2011 1.0.0 Beta 3
September 29 2011 1.0.0 RC1
October 19 2011 1.0.0 RC2
November 13 2011 1.0.0 RC3
November 16 2011 1.0.0
January 26 2012 1.0.1
February 28, 2012 1.1.0 RC1
April 6, 2012 1.1.0 RC2
April 13, 2012 1.1.0
June 28, 2012 1.1.1 RC1
July 12, 2012 1.1.1
August 1, 2012 1.2.0 Alpha
September 5, 2012 1.2.0 Beta
September 14, 2012 1.2.0 RC1
September 21, 2012 1.2.0 RC2
October 2, 2012 1.2.0
January 14, 2013 1.3.0 Beta
February 4, 2013 1.3.0 RC1
February 20, 2013 1.3.0
March 19, 2013 1.1.2
March 22, 2013 1.2.1
April 10, 2013 1.3.1
July 19, 2013 1.3.2
July 25, 2013 1.4.0 Alpha 1
August 15, 2013 1.4.0 Alpha 2
September 24, 2013 1.4.0 Beta 1
October 24, 2013 1.4.0 RC 1
December 23, 2013 1.4.0
February 12, 2014 1.4.1
February 28, 2014 1.4.2
July 1, 2014 1.4.3
September 12, 2014 1.4.4
October 31, 2014 1.4.5 (Latest Stable Version)

See also

  • jQTouch
  • jQuery
  • Content adaptation
  • DaVinci Studio
  • iUI
  • LungoJs
  • PhoneGap
  • Tizen
  • ViziApps

References

  1. Jump up^ jQuery Foundation – jquerymobile.com (2010-10-16). “jQuery Mobile Alpha 1 Released” . blog.jquerymobile.com . Retrieved 2014-05-22 .
  2. Jump up^ jQuery Foundation – jquery.org (2012-09-10). “jQuery Licensing Changes” . Blog.jquery.com . Retrieved 2013-10-09 .
  3. ^ Jump up to:d “Mobile Graded Browser Support” .
  4. Jump up^ “The Global Rise of the Smartphone” .
  5. Jump up^ “Let’s Resume Why Mobile JQuery Is Suitable For Mobile Web Development App” .
  6. Jump up^ “IBM Worklight – United States” . Worklight.com . Retrieved 2013-10-09 .
  7. Jump up^ “ThemeRoller” .
  8. Jump up^ “JQuery Mobile Theming Overview” .
  9. Jump up^ “More news from MS Open Tech: open source Metro style theme for jQuery Mobile” .