Methods

Home

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 transitions that occur as a result of clicking a link or submitting a form, when those features are enabled.

Arguments

to

• String, url to transition to ("about/us.html")
• jQuery object ($("#about"))
• Array specifying two page references [from,to] for transitioning from a known page. From is otherwise assumed to be the current page in view (or $.mobile.activePage ).
• Object for sending form data. ({url: url, data: serialized form data, type: "get" or "post"}

transition (string, examples: "pop", "slide"," "none")

reverse (boolean, default: false). True will cause a reverse-direction transition.

changeHash (boolean, default: true). Update the hash to the to page's URL when page change is complete.

Examples:

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

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

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

			
			

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.pageLoading (method)

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

Arguments:

Done (boolean, defaults to false, meaning loading has started). True will hide the loading message.

Examples:

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

//hide the page loader
$.mobile.pageLoading( true );
			
			

$.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.