Users of jQuery Mobile build applications out of HTML components with custom data attributes (
data-*). For example, a jQuery Mobile header is an HTML div element with a
data-role="header" attribute and a jQuery Mobile list view widget is an unordered HTML list with a
jQuery Mobile defines the structure of a page and the navigation model between pages. A jQuery Mobile page is an HTML div element with a
data-role="page" attribute. Each page can have a header, content and a footer. The pages of an app can be contained in a single or multiple source files. The jQuery Mobile framework enables an Ajax-style page navigation system by default. It loads the first page of the app to start, then injects all subsequent pages into the DOM. Each page can be referenced as a hashtag ('#') off of the main url or, optionally, as a full document path on newer web runtimes that support HTML5 history.
All clicks on links are handled by the jQuery Mobile framework to override the standard page navigation behavior. Programmatic page navigation is performed using the
$.mobile.changePage() function. The framework keeps track of all page navigation history, and provides back navigation behavior via the
data-rel="back" attribute on a link. The framework also enables various CSS-based effects to transition between pages. Additionally, the framework provides page initialization and transition
events to enable the timely processing of an application's various DOM interaction scripts. In particular, jQuery users who are familiar with handling
$(document).ready() should switch to the
pageinit event because subsequent page loads will not trigger the
For more information, please see these jQuery Mobile samples:
- List Navigation: A multi-page scaffold using list-based navigation. This simple sample can help familiarize you with using jQuery Mobile pages and basic widgets like toolbars and list views.
- Springboard Navigation: A multi-page scaffold using springboard-based navigation. This sample demonstrates custom styling techniques to adapt to various screen sizes and rotations, and achieve a different look and feel than jQuery Mobile defaults.
- Tab Navigation: A multi-page scaffold using tab-based navigation. This sample demonstrates how to create a custom options menu widget that maintains state across page transitions, and how to dynamically inject widgets into the DOM.
- Listview: A paginated list of current DVD rentals using the Rotten Tomatoes* API. This sample demonstrates how to populate a listview with live data from a web API, and how to dynamically generate pages.