Developer(s) | The jQuery Project |
---|---|
Initial release | October 16, 2010 |
Stable release |
1.4.5 / October 31, 2014
|
Development status | Active |
Written in | JavaScript |
Size | 351 KB / 142 KB (minified) / 40 KB (minified, gzipped) |
Type | Mobile application framework |
License | MIT |
Website | jquerymobile |
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 on creating a framework compatible with a wide variety of smartphones and tablet computers, made necessary by the growing but heterogeneous tablet and smartphone market. The jQuery Mobile framework is compatible with other mobile app frameworks and platforms such as PhoneGap, Worklight and more.
(Source: from the jQuery Mobile website)
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 jQuery CDN).
A screen of the project is defined by a section
HTML5 element, and data-role
of page
. Note that data-role
is an example of the HTML5 data
attribute, in this case being defined by jQuery Mobile. A page may have header
and footer
elements with data-role
of header
and footer
, respectively. In between, there may be an article
element, with a role
of main
and a class
of ui-content
. Lastly, a nav
element, with data-role
of navbar
may be present.
One HTML document can contain more than one section
element, 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 (e.g. href="#second"
).
In the example below, two other data- attributes are used. The data-theme
attribute tells the browser what theme to render. The data-add-back-btn
attribute adds a back button to the page if set to true
.