jQuery Mobile exposes several methods and properties on the $.mobile object for use in your applications.
$.mobile.changePage
(method)to
(string or object, required)
$("#about")
)options
(object, optional)
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.
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.
//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)url
(string or object, required) A relative or absolute URL.options
(object, optional)
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.
//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)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).: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
()
//cue the page loader
$.mobile.showPageLoadingMsg();
$.mobile.hidePageLoadingMsg
()
//cue the page loader
$.mobile.hidePageLoadingMsg();
$.mobile.path.parseUrl
(method)url
(string, required) A relative or absolute URL.This function returns an object that contains the various components of the URL as strings. The properties on the object mimic the browser's location object:
But it also contains additional properties that provide access to additional components as well as some common forms of the URL developers access:
// Parsing the Url below results an object that is returned with the
// following properties:
//
// obj.href: http://jblas:[email protected]:8080/mail/inbox?msg=1234&type=unread#msg-content
// obj.hrefNoHash: http://jblas:[email protected]:8080/mail/inbox?msg=1234&type=unread
// obj.hrefNoSearch: http://jblas:[email protected]:8080/mail/inbox
// obj.domain: http://jblas:[email protected]:8080
// obj.protocol: http:
// obj.authority: jblas:[email protected]:8080
// obj.username: jblas
// obj.password: password
// obj.host: mycompany.com:8080
// obj.hostname: mycompany.com
// obj.port: 8080
// obj.pathname: /mail/inbox
// obj.directory: /mail/
// obj.filename: inbox
// obj.search: ?msg=1234&type=unread
// obj.hash: #msg-content
var obj = $.mobile.path.parseUrl("http://jblas:[email protected]:8080/mail/inbox?msg=1234");
$.mobile.path.makePathAbsolute
(method)relPath
(string, required) A relative file or directory path.absPath
(string, required) An absolute file or relative path to resolve against.
// Returns: /a/b/c/file.html
var absPath = $.mobile.path.makePathAbsolute("file.html", "/a/b/c/bar.html");
// Returns: /a/foo/file.html
var absPath = $.mobile.path.makePathAbsolute("../../foo/file.html", "/a/b/c/bar.html");
$.mobile.path.makeUrlAbsolute
(method)relUrl
(string, required) A relative URL.absUrl
(string, required) An absolute URL to resolve against.
// Returns: http://foo.com/a/b/c/file.html
var absUrl = $.mobile.path.makeUrlAbsolute("file.html", "http://foo.com/a/b/c/test.html");
// Returns: http://foo.com/a/foo/file.html
var absUrl = $.mobile.path.makeUrlAbsolute("../../foo/file.html", "http://foo.com/a/b/c/test.html");
// Returns: http://foo.com/bar/file.html
var absUrl = $.mobile.path.makeUrlAbsolute("//foo.com/bar/file.html", "http://foo.com/a/b/c/test.html");
// Returns: http://foo.com/a/b/c/test.html?a=1&b=2
var absUrl = $.mobile.path.makeUrlAbsolute("?a=1&b=2", "http://foo.com/a/b/c/test.html");
// Returns: http://foo.com/a/b/c/test.html#bar
var absUrl = $.mobile.path.makeUrlAbsolute("#bar", "http://foo.com/a/b/c/test.html");
$.mobile.path.isSameDomain
(method)url1
(string, required) A relative URL.url2
(string, required) An absolute URL to resolve against.
// Returns: true
var same = $.mobile.path.isSameDomain("http://foo.com/a/file.html", "http://foo.com/a/b/c/test.html");
// Returns: false
var same = $.mobile.path.isSameDomain("file://foo.com/a/file.html", "http://foo.com/a/b/c/test.html");
// Returns: false
var same = $.mobile.path.isSameDomain("https://foo.com/a/file.html", "http://foo.com/a/b/c/test.html");
// Returns: false
var same = $.mobile.path.isSameDomain("http://foo.com/a/file.html", "http://bar.com/a/b/c/test.html");
$.mobile.path.isRelativeUrl
(method)url
(string, required) A relative or absolute URL.
// Returns: false
var isRel = $.mobile.path.isRelativeUrl("http://foo.com/a/file.html");
// Returns: true
var isRel = $.mobile.path.isRelativeUrl("//foo.com/a/file.html");
// Returns: true
var isRel = $.mobile.path.isRelativeUrl("/a/file.html");
// Returns: true
var isRel = $.mobile.path.isRelativeUrl("file.html");
// Returns: true
var isRel = $.mobile.path.isRelativeUrl("?a=1&b=2");
// Returns: true
var isRel = $.mobile.path.isRelativeUrl("#foo");
$.mobile.path.isAbsoluteUrl
(method)url
(string, required) A relative or absolute URL.
// Returns: true
var isAbs = $.mobile.path.isAbsoluteUrl("http://foo.com/a/file.html");
// Returns: false
var isAbs = $.mobile.path.isAbsoluteUrl("//foo.com/a/file.html");
// Returns: false
var isAbs = $.mobile.path.isAbsoluteUrl("/a/file.html");
// Returns: false
var isAbs = $.mobile.path.isAbsoluteUrl("file.html");
// Returns: false
var isAbs = $.mobile.path.isAbsoluteUrl("?a=1&b=2");
// Returns: false
var isAbs = $.mobile.path.isAbsoluteUrl("#foo");
$.mobile.base
(methods, properties)$.mobile.silentScroll
(method)yPos
(number, defaults to 0). Pass any number to scroll to that Y location.
//scroll to Y 100px
$.mobile.silentScroll(100);
$.mobile.addResolutionBreakpoints
(method)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.
//add a 400px breakpoint
$.mobile.addResolutionBreakpoints(400);
//add 2 more breakpoints
$.mobile.addResolutionBreakpoints([600,800]);
$.mobile.activePage
(property)