jQuery Mobile is a touch-optimized web framework, more specifically a JavaScript library, 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.
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 codebase 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.
Example usage
$.on;
$.ready
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. 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. 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. Lastly, icons can be added to elements via the data-icon attribute. jQuery Mobile has fifty 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 – Specifies 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 render at the top or bottom. data-transition – Specifies one of ten built-in animations to use when loading new pages. data-icon – Specifies one of fifty built-in icons that can be added to an element.
jQuery Mobile provides a theming framework that allows developers to customize color schemes and certain CSS aspects of UI features. Developers can use the jQuery Mobile ThemeRoller application to customize these appearances and create branded experiences. After developing a theme in the ThemeRoller application, programmers can download a custom CSS file and include it in their project to use their custom theme. Each theme can contain up to 26 unique color "swatches," each of which consists of a header bar, content body, and button states. Combining different swatches allows developers to create a wider range of visual effects than they would be able to with just one swatch per theme. Switching between different swatches within a theme is as 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:
Page Title
There are already a handful of open source style themes that are developed and supported by third-party organizations. One such open source style theme is the Metro style theme that was developed and released by Microsoft Open Technologies, Inc. The Metro style theme is meant to mimic the UI of the Metro that Microsoft uses in its mobile operating systems.
' A browser that’s capable of, at minimum, utilizing media queries. These browsers will be actively tested against, but may not receive the full capabilities of jQuery Mobile.
' A capable browser that doesn’t have enough market share to warrant day-to-day testing. Bug fixes will still be applied to help these browsers.
A browser that is not capable of utilizing media queries. They will not be provided any jQuery Mobile scripting or CSS.
* - Upcoming browser. This browser is not yet released but is in alpha/beta testing.
