6 docs/api/globalconfig.html
View file
@@ -115,19 +115,19 @@ <h2>Configurable options</h2>
<dt><code>loadingMessage</code> <em>string</em>, default: "loading"</dt>
<dd>
Set the text that appears when a page is loading. If set to false, the message will not appear at all.
<p class="ui-bar-e">Deprecated in 1.2 - use <code>$.mobile.loading.text</code> instead</p>
<p class="ui-bar-e">Deprecated in 1.2 - use <code>$.mobile.loader.prototype.options.text</code> instead. See the <a href="../../docs/pages/loader.html">loader docs</a> for more.</p>
</dd>

<dt><code>loadingMessageTextVisible</code> <em>boolean</em>, default: false</dt>
<dd>
Whether the text should be visible when a loading message is shown. The text is always visible for loading errors.
<p class="ui-bar-e">Deprecated in 1.2 - use <code>$.mobile.loading.textVisible</code> instead</p>
<p class="ui-bar-e">Deprecated in 1.2 - use <code>$.mobile.loader.prototype.options.textVisible</code> instead. See the <a href="../../docs/pages/loader.html">loader docs</a> for more.</p>
</dd>

<dt><code>loadingMessageTheme</code> <em>string</em>, default: "a"</dt>
<dd>
The theme that the loading message box uses when text is visible.
<p class="ui-bar-e">Deprecated in 1.2 - use <code>$.mobile.loading.theme</code> instead</p>
<p class="ui-bar-e">Deprecated in 1.2 - use <code>$.mobile.loader.prototype.options.theme</code> instead. See the <a href="../../docs/pages/loader.html">loader docs</a> for more.</p>
</dd>

<dt><code>minScrollBack</code> <em>string</em>, default: 250</dt>
35 docs/api/methods.html
View file
@@ -183,8 +183,35 @@ <h1>Methods</h1>
</dl>
</dd>

<dt><code>$.mobile.loading</code> (<em>method</em>)</dt>
<dd>Show or hide the page loading message, which is configurable via <code>$.mobile.loader</code> prototype options as described in the <a href="../docs/pages/loader.html">widget docs</a> or can be controlled via a params object.</dd>
<dd>
<dl>
<dt><code>&#183;</code> Object Param Arguments</dt>
<dd><code>theme</code> (<em>string</em>, default: "a") The theme swatch for the message.</dd>
<dd><code>text</code> (<em>string</em>, default: "loading") The text of the message.</dd>
<dd><code>textonly</code> (<em>boolean</em>, default: false) If true, the "spinner" image will be hidden when the message is shown.</dd>
<dd><code>textVisible</code> (<em>boolean</em>, default: false) If true, the text value will be used under the spinner.</dd>
<dd><code>html</code> (<em>boolean</em>, default: "") If this is set to a non empty string value it will be used to replace the entirety of the loader's inner html</dd>
</dl>
</dd>
<dd>Examples:
<pre>
<code>
<strong>//cue the page loader</strong>
$.mobile.loading( 'show' );

<strong>//use theme swatch "b", a custom message, and no spinner</strong>
$.mobile.loading( 'show', { theme: "b", text: "foo", textonly: true });
</code>
</pre>

</dd>

<dt><code>$.mobile.showPageLoadingMsg</code> (<em>method</em>)</dt>
<dd>Show the page loading message, which is configurable via $.mobile.loadingMessage.</dd>
<dd>
<p class="ui-bar-e">Deprecated in 1.2 - use <code>$.mobile.loading( 'show' )</code> instead, see examples above</p>
Show the page loading message, which is configurable via $.mobile.loadingMessage.</dd>
<dd>
<dl>
<dt><code>&#183;</code> Arguments</dt>
@@ -209,9 +236,13 @@ <h1>Methods</h1>




<dt><code>$.mobile.hidePageLoadingMsg</code> (<em>method</em>)</dt>
<dd>Hide the page loading message, which is configurable via $.mobile.loadingMessage.</dd>
<dd>
<p class="ui-bar-e">Deprecated in 1.2 - use <code>$.mobile.loading( 'hide' )</code> instead, see examples above</p>
Hide the page loading message, which is configurable via $.mobile.loadingMessage.

</dd>
<dd>Example:
<pre>
<code>
1 docs/pages/index.html
View file
@@ -34,6 +34,7 @@ <h1>Pages</h1>
<li><a href="page-titles.html">Page titles</a></li>
<li><a href="page-links.html">Linking pages</a></li>
<li><a href="page-transitions.html">Page transitions</a></li>
<li><a href="loader.html">Page loading widget</a></li>
<li><a href="page-dialogs.html">Dialogs</a></li>
<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
95 docs/pages/loader.html
View file
@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Page Loading Widget</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

<script src="../../js/jquery.js"></script>
<script src="../../docs/_assets/js/jqm-docs.js"></script>
<script src="../../js/"></script>

</head>
<body>

<div data-role="page" class="type-interior">

<div data-role="header" data-theme="f">
<h1>Page Loading Widget</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div><!-- /header -->

<div data-role="content">
<div class="content-primary">
<h2>The Page Loading Widget</h2>

<p>The page loading dialog was previously configured globally with three settings <code>$.mobile.loadingMessage</code>, <code>$.mobile.loadingMessageTextVisible</code>, and <code>$.mobile.loadingMessageTheme</code> which are now deprecated. In addition the methods for showing and hiding, <code>$.mobile.showPageLoadingMsg</code> and <code>$.mobile.hidePageLoadingMsg</code> are also deprecated</p>

<p>The page loading widget handles the task of displaying the loading dialog when jQuery Mobile pulls in content via ajax. It can also be displayed manually for custom loading actions. Using the <code>$.mobile.loading</code> helper method (See the <a href="../api/methods.html">global method docs</a>).</p>

<p>To configure the loading dialog globally the following settings can be defined on its prototype during the <code>mobileinit</code> event.</p> Below are the defaults:

<pre>
<code>
$( document ).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = false;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "";
});
</code>
</pre>

<p>These settings will be overridden by the deprecated settings to preserve backward compatibility. Once the deprecated settings are removed these defaults will only be superseded by the method params object described in the <a href="../api/methods.html">global method docs</a> under <code>$.mobile.loading</code>.</p>

<pre>
<code>
$.mobile.loading( 'show', {
text: 'foo',
textVisible: true,
theme: 'z',
html: ""
});
</code>
</pre>
</div><!--/content-primary -->

<div class="content-secondary">

<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">

<h3>More in this section</h3>

<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Pages &amp; Dialogs</li>
<li><a href="page-anatomy.html">Anatomy of a page</a></li>
<li><a href="page-template.html" data-ajax="false">Single page template</a></li>
<li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
<li><a href="page-titles.html">Page titles</a></li>
<li><a href="page-links.html">Linking pages</a></li>
<li><a href="page-transitions.html">Page transitions</a></li>
<li data-theme="a"><a href="loader.html">Page loading widget</a></li>
<li><a href="page-dialogs.html">Dialogs</a></li>
<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
<li><a href="page-dynamic.html">Dynamically injecting pages</a></li>
<li><a href="page-scripting.html">Scripting pages</a></li>
<li><a href="phonegap.html">PhoneGap apps</a></li>
<li><a href="touchoverflow.html">touchOverflow feature</a></li>
<li><a href="pages-themes.html">Theming pages</a></li>
</ul>
</div>
</div>

</div><!-- /content -->

<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy; 2011-12 The jQuery Foundation</p>
</div>
</div><!-- /page -->
</body>
</html>

1 docs/pages/page-anatomy.html
View file
@@ -200,6 +200,7 @@ <h3>More in this section</h3>
<li><a href="page-titles.html">Page titles</a></li>
<li><a href="page-links.html">Linking pages</a></li>
<li><a href="page-transitions.html">Page transitions</a></li>
<li><a href="loader.html">Page loading widget</a></li>
<li><a href="page-dialogs.html">Dialogs</a></li>
<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
1 docs/pages/page-cache.html
View file
@@ -100,6 +100,7 @@ <h3>More in this section</h3>
<li><a href="page-titles.html">Page titles</a></li>
<li><a href="page-links.html">Linking pages</a></li>
<li><a href="page-transitions.html">Page transitions</a></li>
<li><a href="loader.html">Page loading widget</a></li>
<li><a href="page-dialogs.html">Dialogs</a></li>
<li data-theme="a"><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
1 docs/pages/page-customtransitions.html
View file
@@ -278,6 +278,7 @@ <h3>More in this section</h3>
<li><a href="page-titles.html">Page titles</a></li>
<li><a href="page-links.html">Linking pages</a></li>
<li><a href="page-transitions.html">Page transitions</a></li>
<li><a href="loader.html">Page loading widget</a></li>
<li><a href="page-dialogs.html">Dialogs</a></li>
<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
1 docs/pages/page-dialogs.html
View file
@@ -105,6 +105,7 @@ <h3>More in this section</h3>
<li><a href="page-titles.html">Page titles</a></li>
<li><a href="page-links.html">Linking pages</a></li>
<li><a href="page-transitions.html">Page transitions</a></li>
<li><a href="loader.html">Page loading widget</a></li>
<li data-theme="a"><a href="page-dialogs.html">Dialogs</a></li>
<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
1 docs/pages/page-dynamic.html
View file
@@ -276,6 +276,7 @@ <h3>More in this section</h3>
<li><a href="page-titles.html">Page titles</a></li>
<li><a href="page-links.html">Linking pages</a></li>
<li><a href="page-transitions.html">Page transitions</a></li>
<li><a href="loader.html">Page loading widget</a></li>
<li><a href="page-dialogs.html">Dialogs</a></li>
<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
1 docs/pages/page-links.html
View file
@@ -123,6 +123,7 @@ <h3>More in this section</h3>
<li><a href="page-titles.html">Page titles</a></li>
<li data-theme="a"><a href="page-links.html">Linking pages</a></li>
<li><a href="page-transitions.html">Page transitions</a></li>
<li><a href="loader.html">Page loading widget</a></li>
<li><a href="page-dialogs.html">Dialogs</a></li>
<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
1 docs/pages/page-navmodel.html
View file
@@ -158,6 +158,7 @@ <h3>More in this section</h3>
<li><a href="page-titles.html">Page titles</a></li>
<li><a href="page-links.html">Linking pages</a></li>
<li><a href="page-transitions.html">Page transitions</a></li>
<li><a href="loader.html">Page loading widget</a></li>
<li><a href="page-dialogs.html">Dialogs</a></li>
<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
<li data-theme="a"><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
1 docs/pages/page-scripting.html
View file
@@ -136,6 +136,7 @@ <h3>More in this section</h3>
<li><a href="page-titles.html">Page titles</a></li>
<li><a href="page-links.html">Linking pages</a></li>
<li><a href="page-transitions.html">Page transitions</a></li>
<li><a href="loader.html">Page loading widget</a></li>
<li><a href="page-dialogs.html">Dialogs</a></li>
<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
1 docs/pages/page-titles.html
View file
@@ -58,6 +58,7 @@ <h3>More in this section</h3>
<li data-theme="a"><a href="page-titles.html">Page titles</a></li>
<li><a href="page-links.html">Linking pages</a></li>
<li><a href="page-transitions.html">Page transitions</a></li>
<li><a href="loader.html">Page loading widget</a></li>
<li><a href="page-dialogs.html">Dialogs</a></li>
<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
45 docs/pages/page-transitions.html
View file
@@ -1,18 +1,18 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Transitions</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Transitions</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

<script src="../../js/jquery.js"></script>
<script src="../../docs/_assets/js/jqm-docs.js"></script>
<script src="../../js/"></script>

</head>
<body>
</head>
<body>

<div data-role="page" class="type-interior">

@@ -23,8 +23,8 @@ <h1>Transitions</h1>
</div><!-- /header -->

<div data-role="content">
<div class="content-primary">
<h2>Page transitions</h2>
<div class="content-primary">
<h2>Page transitions</h2>

<p>The jQuery Mobile framework includes a set of CSS-based transition effects that can be applied to any page link or form submission with Ajax navigation: </p>

@@ -101,39 +101,39 @@ <h2>Setting a transition on a link or form submit</h2>
<code><code>
&lt;a href=&quot;index.html&quot; <strong>data-transition=&quot;pop&quot;</strong>&gt;I'll pop&lt;/a&gt;
</code></code>

<p>When the Back button is pressed, the framework will automatically apply the reverse version of the transition that was used to show the page. To specify that the reverse version of a transition should be used, add the <code>data-direction="reverse"</code> attribute to a link.</p>

<h2>Global configuration of transitions</h2>

<p>Set the <code>defaultPageTransition</code> <a href="../api/globalconfig.html">global option</a> if you'd prefer a different default transition. Dialogs have a different option called <code>defaultDialogTransition</code> that can also be configured.</p>


<h2>Browser support and performance</h2>
<p>All transitions are built with CSS keyframe animations and include both <code>-webkit</code> vendor prefixed rules for iOS, Blackberry, Android, Safari and Chrome browsers and <code>-moz</code> rules for Firefox browsers. Support for keyframe animations and transition smoothness is determined by the browser version and hardware and will safely fall back to no transition if animations aren't supported. To proactively exclude transition in situations with poor performance, we exclude browsers that lack 3D transforms and provide a fallback transition and apply a max width for when transitions are applied.</p>

<h2>Defining fallback transitions for non-3D support</h2>
<p>By default, all transitions except fade require 3D transform support. Devices that lack 3D support will fall back to a fade transition, regardless of the transition specified. We do this to proactively exclude poorly-performing platforms like Android 2.x from advanced transitions and ensure they still have a smooth experience. Note that there are platforms such as Android 3.0 that technically support 3D transforms, but still have poor animation performance so this won't guarantee that every browser will be 100% flicker-free but we try to target this responsibly.</p>

<p>The fallback transition for browsers that don't support 3D transforms can be configured for each transition type, but by default we specify "fade" as the fallback. For example, this will set the fallback transition for the slideout transition to "none":</p>
<code>$.mobile.transitionFallbacks.slideout = "none"</code>

<h2>Setting a max width for transitions</h2>
<p>By default, transitions can be disabled (set to "none") when the window width is greater than a certain pixel width. This feature is useful because transitions can be distracting or perform poorly on larger screens. This value is configurable via the global option <code>$.mobile.maxTransitionWidth</code>, which defaults to <code>false</code>. The option accepts any number representing a pixel width or <code>false</code> value. If it's not <code>false</code>, the handler will use a "none" transition when the window width is wider than the specified value.</p>







<h2>Creating custom transitions</h2>

<p>jQuery Mobile allows for the addition of <a href="page-customtransitions.html">custom transitions</a> to the <code>$.mobile.transitionHandlers</code> dictionary so you can expand the selection of transitions on your site or app.
<p>jQuery Mobile allows for the addition of <a href="page-customtransitions.html">custom transitions</a> to the <code>$.mobile.transitionHandlers</code> dictionary so you can expand the selection of transitions on your site or app.







</div><!--/content-primary -->
</div><!--/content-primary -->

<div class="content-secondary">

@@ -149,6 +149,7 @@ <h3>More in this section</h3>
<li><a href="page-titles.html">Page titles</a></li>
<li><a href="page-links.html">Linking pages</a></li>
<li data-theme="a"><a href="page-transitions.html">Page transitions</a></li>
<li><a href="loader.html">Page loading widget</a></li>
<li><a href="page-dialogs.html">Dialogs</a></li>
<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
@@ -159,7 +160,7 @@ <h3>More in this section</h3>
<li><a href="pages-themes.html">Theming pages</a></li>
</ul>
</div>
</div>
</div>

</div><!-- /content -->

1 docs/pages/pages-themes.html
View file
@@ -126,6 +126,7 @@ <h3>More in this section</h3>
<li><a href="page-titles.html">Page titles</a></li>
<li><a href="page-links.html">Linking pages</a></li>
<li><a href="page-transitions.html">Page transitions</a></li>
<li><a href="loader.html">Page loading widget</a></li>
<li><a href="page-dialogs.html">Dialogs</a></li>
<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
1 docs/pages/phonegap.html
View file
@@ -91,6 +91,7 @@ <h3>More in this section</h3>
<li><a href="page-titles.html">Page titles</a></li>
<li><a href="page-links.html">Linking pages</a></li>
<li><a href="page-transitions.html">Page transitions</a></li>
<li><a href="loader.html">Page loading widget</a></li>
<li><a href="page-dialogs.html">Dialogs</a></li>
<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>