mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-17 06:20:26 +00:00
250 lines
No EOL
9.2 KiB
HTML
Executable file
250 lines
No EOL
9.2 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>jQuery Mobile Docs - Methods</title>
|
|
<link rel="stylesheet" href="../../themes/default/" />
|
|
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
|
<script src="../../js/jquery.js"></script>
|
|
<script src="../../js/"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page" data-theme="b">
|
|
|
|
<div data-role="header">
|
|
<h1>Methods</h1>
|
|
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
|
|
|
|
<p>jQuery Mobile exposes several methods and properties on the $.mobile object for use in your applications.</p>
|
|
|
|
|
|
<dl>
|
|
<dt><code>$.mobile.changePage</code> (<em>method</em>)</dt>
|
|
<dd>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.</dd>
|
|
|
|
<dd>
|
|
|
|
<dl>
|
|
<dt>Arguments</dt>
|
|
<dd><code>to</code> (<em>string or object</em>, required)
|
|
<ul>
|
|
<li>String: Absolute or relative URL. ("about/us.html")</li>
|
|
<li>Object: jQuery collection object. (<code>$("#about")</code>)</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dd><code>options</code> (<em>object</em>, optional)
|
|
<ul>
|
|
<li>Properties:
|
|
<ul>
|
|
<li><code>transition</code> (<em>string</em>, default: $.mobile.defaultPageTransition) The transition to use when showing the page. </li>
|
|
<li><code>reverse</code> (<em>boolean</em>, default: false) Decides what direction the transition will run when showing the page. </li>
|
|
<li><code>changeHash</code> (<em>boolean</em>, default: true) Decides if the hash in the location bar should be updated. </li>
|
|
<li><code>role</code> (<em>string</em>, default: "page") The data-role value to be used when displaying the page. </li>
|
|
<li><code>pageContainer</code> (jQuery collection, default: $.mobile.pageContainer) Specifies the element that should contain the page. </li>
|
|
<li><code>type</code> (<em>string</em>, default: "get") Specifies the method ("get" or "post") to use when making a page request.
|
|
<ul>
|
|
<li>Used only when the 'to' argument of changePage() is a URL.</li>
|
|
</ul>
|
|
</li>
|
|
<li><code>data</code> (<em>object</em> or string, default: undefined) The data to send with an Ajax page request.
|
|
<ul>
|
|
<li>Used only when the 'to' argument of changePage() is a URL.</li>
|
|
</ul>
|
|
</li>
|
|
<li><code>reloadPage</code> (<em>boolean</em>, default: false) Forces a reload of a page, even if it is already in the DOM of the page container.
|
|
<ul>
|
|
<li>Used only when the 'to' argument of changePage() is a URL.</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
</dl>
|
|
</dd>
|
|
|
|
<dd>Examples:
|
|
<pre>
|
|
<code>
|
|
<strong>//transition to the "about us" page with a slideup transition</strong>
|
|
$.mobile.changePage( "about/us.html", { transition: "slideup"} );
|
|
|
|
<strong>//transition to the "search results" page, using data from a form with an ID of "search"" </strong>
|
|
$.mobile.changePage( "searchresults.php", {
|
|
type: "post",
|
|
data: $("form#search").serialize()
|
|
});
|
|
|
|
<strong>//transition to the "confirm" page with a "pop" transition without tracking it in history </strong>
|
|
$.mobile.changePage( "../alerts/confirm.html", {
|
|
transition: "pop",
|
|
reverse: false,
|
|
changeHash: false
|
|
});
|
|
|
|
</code>
|
|
</pre>
|
|
|
|
</dd>
|
|
|
|
|
|
<dt><code>$.mobile.loadPage</code> (<em>method</em>)</dt>
|
|
<dd>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.</dd>
|
|
|
|
<dd>
|
|
|
|
<dl>
|
|
<dt>Arguments</dt>
|
|
<dd><code>url</code> (<em>string or object</em>, required) A relative or absolute URL.</dd>
|
|
|
|
<dd><code>options</code> (<em>object</em>, optional)
|
|
<ul>
|
|
<li>Properties:
|
|
<ul>
|
|
<li><code>role</code> (<em>string</em>, default: "page") The data-role value to be used when displaying the page. </li>
|
|
<li><code>pageContainer</code> (jQuery collection, default: $.mobile.pageContainer) Specifies the element that should contain the page after it is loaded. </li>
|
|
<li><code>type</code> (<em>string</em>, default: "get") Specifies the method ("get" or "post") to use when making a page request.
|
|
</li>
|
|
<li><code>data</code> (<em>object</em> or string, default: undefined) The data to send with an Ajax page request. </li>
|
|
<li><code>reloadPage</code> (<em>boolean</em>, default: false) Forces a reload of a page, even if it is already in the DOM of the page container. </li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
</dl>
|
|
</dd>
|
|
|
|
<dd>Examples:
|
|
<pre>
|
|
<code>
|
|
<strong>//load the "about us" page into the DOM</strong>
|
|
$.mobile.loadPage( "about/us.html" );
|
|
|
|
<strong>//load a "search results" page, using data from a form with an ID of "search"" </strong>
|
|
$.mobile.loadPage( "searchresults.php", {
|
|
type: "post",
|
|
data: $("form#search").serialize()
|
|
});
|
|
</code>
|
|
</pre>
|
|
|
|
</dd>
|
|
|
|
|
|
<dt><code>jqmData(), jqmRemoveData(), and jqmHasData()</code> (<em>method</em>)</dt>
|
|
<dd>When working with jQuery Mobile, <code>jqmData</code> and <code>jqmRemoveData</code> should be used in place of jQuery core's <code>data</code> and <code>removeData</code> 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).</dd>
|
|
<dd>
|
|
<dl>
|
|
<dt>Arguments:</dt>
|
|
<dd>See jQuery's <a href="http://api.jquery.com/jQuery.data/">data</a> and <a href="http://api.jquery.com/jQuery.removeData/">removeData</a> methods</dd>
|
|
<dt>Also:</dt>
|
|
<dd>When finding elements by their jQuery Mobile data attribute, please use the custom selector <code>:jqmData()</code>, as it automatically incorporates namespaced data attributes into the lookup when they are in use. For example, instead of calling <code>$("div[data-role='page']")</code>, you should use <code>$("div:jqmData(role='page')")</code>, which internally maps to <code>$("div[data-"+ $.mobile.ns +"role='page']")</code> without forcing you to concatenate a namespace into your selectors manually.</dd>
|
|
</dl>
|
|
</dd>
|
|
|
|
|
|
|
|
|
|
<dt><code>$.mobile.showPageLoadingMsg</code> (<em></em>)</dt>
|
|
<dd>Show the page loading message, which is configurable via $.mobile.loadingMessage.</dd>
|
|
|
|
<dd>Example:
|
|
<pre>
|
|
<code>
|
|
<strong>//cue the page loader</strong>
|
|
$.mobile.showPageLoadingMsg();
|
|
</code>
|
|
</pre>
|
|
|
|
</dd>
|
|
|
|
|
|
|
|
|
|
<dt><code>$.mobile.hidePageLoadingMsg</code> (<em></em>)</dt>
|
|
<dd>Hide the page loading message, which is configurable via $.mobile.loadingMessage.</dd>
|
|
|
|
<dd>Example:
|
|
<pre>
|
|
<code>
|
|
<strong>//cue the page loader</strong>
|
|
$.mobile.hidePageLoadingMsg();
|
|
</code>
|
|
</pre>
|
|
|
|
</dd>
|
|
|
|
|
|
<dt><code>$.mobile.path</code> (<em>methods, properties</em>)</dt>
|
|
<dd>Utilities for getting, setting, and manipulating url paths. TODO: document as public API is finalized.</dd>
|
|
|
|
<dt><code>$.mobile.base</code> (<em>methods, properties</em>)</dt>
|
|
<dd>Utilities for working with generated base element. TODO: document as public API is finalized.</dd>
|
|
|
|
|
|
|
|
<dt><code>$.mobile.silentScroll</code> (<em>method</em>)</dt>
|
|
<dd>Scroll to a particular Y position without triggering scroll event listeners.</dd>
|
|
<dd>
|
|
<dl>
|
|
<dt>Arguments:</dt>
|
|
<dd><code>yPos</code> (<em>number</em>, defaults to 0). Pass any number to scroll to that Y location.</dd>
|
|
</dl>
|
|
</dd>
|
|
|
|
<dd>Examples:
|
|
<pre>
|
|
<code>
|
|
<strong>//scroll to Y 100px</strong>
|
|
$.mobile.silentScroll(100);
|
|
</code>
|
|
</pre>
|
|
|
|
</dd>
|
|
|
|
|
|
<dt><code>$.mobile.addResolutionBreakpoints</code> (<em>method</em>)</dt>
|
|
<dd>Add width breakpoints to the min/max width classes that are added to the HTML element.</dd>
|
|
<dd>
|
|
<dl>
|
|
<dt>Arguments:</dt>
|
|
<dd><code>values</code> (<em>number or array</em>). Pass any number or array of numbers to add to the resolution classes. Read more about this feature here: <a href="mediahelpers.html">Orientation & resolution targeting</a>.</dd>
|
|
</dl>
|
|
</dd>
|
|
|
|
<dd>Examples:
|
|
<pre>
|
|
<code>
|
|
<strong>//add a 400px breakpoint</strong>
|
|
$.mobile.addResolutionBreakpoints(400);
|
|
<strong>//add 2 more breakpoints</strong>
|
|
$.mobile.addResolutionBreakpoints([600,800]);
|
|
</code>
|
|
</pre>
|
|
|
|
</dd>
|
|
|
|
|
|
|
|
<dt><code>$.mobile.activePage</code> (<em>property</em>)</dt>
|
|
<dd>Reference to the page currently in view.</dd>
|
|
|
|
|
|
|
|
|
|
</dl>
|
|
</div><!-- /content -->
|
|
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |