jQuery Mobile Basics

jQuery Mobile is a cross-platform UI framework for smartphones and tablets, built on the foundations of the jQuery library.

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 data-role="listview" attribute. The jQuery Mobile framework then automatically enhances this markup, behind the scenes, by applying styling and behavior to these elements using the framework's included CSS and JavaScript*. This enhancement happens progressively in order to support a wide range of devices with varying capabilities.

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 ready event.

jQuery Mobile also provides a set of touch-friendly UI widgets: buttons, toolbars, search, list views, form elements, accordions, and dialogs.

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.
For more complete information about compiler optimizations, see our Optimization Notice.