Methods

jQuery Mobile exposes several methods and properties on the $.mobile object for use in your applications.

$.mobile.changePage (method)

Programmatically change from one page to another. This method is used internally for the page loading and transitioning that occurs as a result of clicking a link or submitting a form, when those features are enabled.

Arguments

to (string or object, required)

String: Absolute or relative URL. ("about/us.html")
Object: jQuery collection object. ($("#about"))

options (object, optional)

Properties:
- transition (string, default: $.mobile.defaultPageTransition) The transition to use when showing the page.
- reverse (boolean, default: false) Decides what direction the transition will run when showing the page.
- changeHash (boolean, default: true) Decides if the hash in the location bar should be updated.
- role (string, default: undefined) The data-role value to be used when displaying the page. By default this is undefined which means rely on the value of the @data-role attribute defined on the element.
- pageContainer (jQuery collection, default: $.mobile.pageContainer) Specifies the element that should contain the page.
- type (string, default: "get") Specifies the method ("get" or "post") to use when making a page request.
  - Used only when the 'to' argument of changePage() is a URL.
- data (object or string, default: undefined) The data to send with an Ajax page request.
  - Used only when the 'to' argument of changePage() is a URL.
- reloadPage (boolean, default: false) Forces a reload of a page, even if it is already in the DOM of the page container.
  - Used only when the 'to' argument of changePage() is a URL.

Examples:

			
//transition to the "about us" page with a slideup transition 			
$.mobile.changePage( "about/us.html", { transition: "slideup"} );	

//transition to the "search results" page, using data from a form with an ID of "search"" 		
$.mobile.changePage( "searchresults.php", {
	type: "post", 
	data: $("form#search").serialize()
});		

//transition to the "confirm" page with a "pop" transition without tracking it in history			
$.mobile.changePage( "../alerts/confirm.html", {
	transition: "pop",
	reverse: false,
	changeHash: false
});

$.mobile.loadPage (method)

Load an external page, enhance its content, and insert it into the DOM. This method is called internally by the changePage() function when its first argument is a URL. This function does not affect the current active page so it can be used to load pages in the background. The function returns a deferred promise object that gets resolved after the page has been enhanced and inserted into the document.

Arguments

url (string or object, required) A relative or absolute URL.

options (object, optional)

Properties:
- role (string, default: undefined) The data-role value to be used when displaying the page. By default this is undefined which means rely on the value of the @data-role attribute defined on the element.
- pageContainer (jQuery collection, default: $.mobile.pageContainer) Specifies the element that should contain the page after it is loaded.
- type (string, default: "get") Specifies the method ("get" or "post") to use when making a page request.
- data (object or string, default: undefined) The data to send with an Ajax page request.
- reloadPage (boolean, default: false) Forces a reload of a page, even if it is already in the DOM of the page container.

Examples:

			
//load the "about us" page into the DOM			
$.mobile.loadPage( "about/us.html" );	

//load a "search results" page, using data from a form with an ID of "search"" 		
$.mobile.loadPage( "searchresults.php", {
	type: "post", 
	data: $("form#search").serialize()
});

jqmData(), jqmRemoveData(), and jqmHasData() (method)

When working with jQuery Mobile, jqmData and jqmRemoveData should be used in place of jQuery core's data and removeData methods (note that this includes $.fn.data, $.fn.removeData, and the $.data, $.removeData, and $.hasData utilities), as they automatically incorporate getting and setting of namespaced data attributes (even if no namespace is currently in use).

Arguments:: See jQuery's data and removeData methods
Also:: When finding elements by their jQuery Mobile data attribute, please use the custom selector :jqmData(), as it automatically incorporates namespaced data attributes into the lookup when they are in use. For example, instead of calling $("div[data-role='page']"), you should use $("div:jqmData(role='page')"), which internally maps to $("div[data-"+ $.mobile.ns +"role='page']") without forcing you to concatenate a namespace into your selectors manually.

$.mobile.showPageLoadingMsg ()

Show the page loading message, which is configurable via $.mobile.loadingMessage.

Example:

			
//cue the page loader 			
$.mobile.showPageLoadingMsg();

$.mobile.hidePageLoadingMsg ()

Hide the page loading message, which is configurable via $.mobile.loadingMessage.

Example:

			
//cue the page loader 			
$.mobile.hidePageLoadingMsg();

$.mobile.path (methods, properties)

Utilities for getting, setting, and manipulating url paths. TODO: document as public API is finalized.

$.mobile.base (methods, properties)

Utilities for working with generated base element. TODO: document as public API is finalized.

$.mobile.silentScroll (method)

Scroll to a particular Y position without triggering scroll event listeners.

Arguments:: yPos (number, defaults to 0). Pass any number to scroll to that Y location.

Examples:

			
//scroll to Y 100px 			
$.mobile.silentScroll(100);

$.mobile.addResolutionBreakpoints (method)

Add width breakpoints to the min/max width classes that are added to the HTML element.

Arguments:: values (number or array). Pass any number or array of numbers to add to the resolution classes. Read more about this feature here: Orientation & resolution targeting.

Examples:

			
//add a 400px breakpoint 			
$.mobile.addResolutionBreakpoints(400);	
//add 2 more breakpoints 			
$.mobile.addResolutionBreakpoints([600,800]);

$.mobile.activePage (property)

Reference to the page currently in view.