JQuery Mobile
 |
|
| 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.
...
Wikipedia