Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge remote-tracking branch 'upstream/master' into responsiveCollapse

  • Loading branch information...
commit eea517fa5a64c3bb764581f366d864330108f9a0 2 parents 6ed905e + 504fe1a
Jason Scott authored
View
4 docs/api/data-attributes.html
@@ -458,6 +458,10 @@
<th>data-title</th>
<td>string (title used when page is shown)</td>
</tr>
+ <tr>
+ <th>data-url</th>
+ <td>url (value for updating the URL, instead of the url used to request the page)</td>
+ </tr>
</table>
<h2><a href="../forms/radiobuttons/">Radio button</a></h2>
View
2  docs/api/events.html
@@ -104,7 +104,7 @@ <h4 style="margin:.5em 0">Canceling an elements default click behavior</h4>
<h2>Orientation change event</h2>
<dl>
<dt><code>orientationchange</code></dt>
- <dd>Triggers when a device orientation changes (by turning it vertically or horizontally). When bound to this event, your callback function can leverage a second argument, which contains an <code>orientation</code> property equal to either "portrait" or "landscape". These values are also added as classes to the HTML element, allowing you to leverage them in your CSS selectors. Note that we currently bind to the resize event when <code>orientationchange</code> is not natively supported, or when <code>$.mobile.orientationChangeEnabled</code> is set to false.</dd>
+ <dd>Triggers when a device orientation changes (by turning it vertically or horizontally). When bound to this event, your callback function can leverage a second argument, which contains an <code>orientation</code> property equal to either "portrait" or "landscape". Note that we currently bind to the resize event when <code>orientationchange</code> is not natively supported, or when <code>$.mobile.orientationChangeEnabled</code> is set to false.</dd>
<div class="ui-body ui-body-e">
<h4>orientationchange timing</h4>
View
2  docs/api/methods.html
@@ -85,7 +85,7 @@
<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>
+<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()
View
2  docs/content/content-collapsible.html
@@ -93,7 +93,7 @@
</div>
<h2>Icon positioning</h2>
- <p>Collapsible headings’ default icon positioing can be overridden by using the <code>data-iconpos</code> attribute. In the below case, <code>data-iconpos="right"</code>.</p>
+ <p>Collapsible headings’ default icon positioning can be overridden by using the <code>data-iconpos</code> attribute. In the below case, <code>data-iconpos="right"</code>.</p>
<div data-role="collapsible" data-iconpos="right">
<h3>I'm a header</h3>
View
2  docs/lists/docs-lists.html
@@ -65,7 +65,7 @@
<h2>Split button lists</h2>
<p>In cases where there is more than one possible action per list item, a split button can be used to offer two independently clickable items -- the list item and a small arrow icon in the far right. To make a split list item, simply add a second link inside the <code>li</code> and the framework will add a vertical divider line, style the link as an icon-only arrow button, and set the <code>title</code> attribute of the link to the text the link for accessibility. </p>
- <p>You can set the icon for the right split icon by specifying a <code>data-split-icon</code> attribute with the <a href="../buttons/buttons-themes.html">icon name</a> you want. The theme swatch color of the split button can be set by specifying a swatch letter in the <code>data-split-theme</code> attribute</p>
+ <p>You can set the icon for the right split icon by specifying a <code>data-split-icon</code> attribute with the <a href="../buttons/buttons-icons.html">icon name</a> you want. The theme swatch color of the split button can be set by specifying a swatch letter in the <code>data-split-theme</code> attribute</p>
<a href="lists-split.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Split list example</a>
View
6 docs/lists/lists-autodividers.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - List Dividers</title>
+ <title>jQuery Mobile Docs - List Autodividers</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
@@ -23,7 +23,7 @@
<div data-role="content">
<div class="content-primary">
- <ul data-role="listview" data-autodividers="alpha">
+ <ul data-role="listview" data-autodividers="true">
<li><a href="index.html">Adam Kinkaid</a></li>
<li><a href="index.html">Alex Wickerham</a></li>
<li><a href="index.html">Avery Johnson</a></li>
@@ -91,7 +91,7 @@
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
- <p>&copy; 2011 The jQuery Project</p>
+ <p>&copy; 2011-12 The jQuery Foundation</p>
</div>
</div><!-- /page -->
View
24 docs/lists/lists-options.html
@@ -39,7 +39,7 @@
<dt><code>countTheme</code> <em>string</em></dt>
<dd>
<p class="default">default: "c"</p>
- <p>Sets the color scheme (swatch) for list item <a href="lists-count.html">count bubbles</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+ <p>Sets the color scheme (swatch) for list item <a href="lists-count.html">count bubbles</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
<strong>$.mobile.listview.prototype.options.countTheme = "a";</strong>
});
@@ -50,7 +50,7 @@
<dt><code>dividerTheme</code> <em>string</em></dt>
<dd>
<p class="default">default: "b"</p>
- <p>Sets the color scheme (swatch) for list <a href="lists-divider.html">dividers</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+ <p>Sets the color scheme (swatch) for list <a href="lists-divider.html">dividers</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
<strong>$.mobile.listview.prototype.options.dividerTheme = "a";</strong>
});
@@ -61,7 +61,7 @@
<dt><code>filter</code> <em>boolean</em></dt>
<dd>
<p class="default">default: false</p>
- <p>Adds a <a href="lists-search.html">search filter bar</a> to listviews. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+ <p>Adds a <a href="lists-search.html">search filter bar</a> to listviews. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
<strong>$.mobile.listview.prototype.options.filter = true;</strong>
});
@@ -71,7 +71,7 @@
<dt><code>filterCallback</code> <em>function</em></dt>
<dd>
- <p>The function to determine which rows to hide when the <a href="lists-search.html">search filter</a> textbox changes. The function accepts two arguments -- the text of the list item (or <code>data-filtertext</code> value if present), and the search string. Return <code>true</code> to hide the item, <code>false</code> to leave it visible. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+ <p>The function to determine which rows to hide when the <a href="lists-search.html">search filter</a> textbox changes. The function accepts two arguments -- the text of the list item (or <code>data-filtertext</code> value if present), and the search string. Return <code>true</code> to hide the item, <code>false</code> to leave it visible. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
<strong>$.mobile.listview.prototype.options.filterCallback = function( text, searchValue ) {
// only show items that *begin* with the search string
@@ -84,7 +84,7 @@
<dt><code>filterPlaceholder</code> <em>string</em></dt>
<dd>
<p class="default">default: "Filter items..."</p>
- <p>The placeholder text used in <a href="lists-search.html">search filter bars</a>. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+ <p>The placeholder text used in <a href="lists-search.html">search filter bars</a>. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
<strong>$.mobile.listview.prototype.options.filterPlaceholder = "Search...";</strong>
});
@@ -95,7 +95,7 @@
<dt><code>filterTheme</code> <em>string</em></dt>
<dd>
<p class="default">default: "c"</p>
- <p>Sets the color scheme (swatch) for the <a href="lists-search.html">search filter bar</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+ <p>Sets the color scheme (swatch) for the <a href="lists-search.html">search filter bar</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
<strong>$.mobile.listview.prototype.options.filterTheme = "a";</strong>
});
@@ -106,7 +106,7 @@
<dt><code>headerTheme</code> <em>string</em></dt>
<dd>
<p class="default">default: "b"</p>
- <p>Sets the color scheme (swatch) for headers of <a href="lists-nested.html">nested list</a> sub pages. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+ <p>Sets the color scheme (swatch) for headers of <a href="lists-nested.html">nested list</a> sub pages. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
<strong>$.mobile.listview.prototype.options.headerTheme = "a";</strong>
});
@@ -117,7 +117,7 @@
<dt><code>initSelector</code> <em>CSS selector string</em></dt>
<dd>
<p class="default">default: ":jqmData(role='listview')"</p>
- <p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as list views. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+ <p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as list views. To change which elements are initialized, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
<strong>$.mobile.listview.prototype.options.initSelector = ".mylistview";</strong>
});
@@ -127,7 +127,7 @@
<dt><code>inset</code> <em>boolean</em></dt>
<dd>
<p class="default">default: false</p>
- <p>Adds <a href="lists-inset.html">inset list</a> styles. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+ <p>Adds <a href="lists-inset.html">inset list</a> styles. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
<strong>$.mobile.listview.prototype.options.inset = true;</strong>
});
@@ -138,7 +138,7 @@
<dt><code>splitIcon</code> <em>string</em></dt>
<dd>
<p class="default">default: "arrow-r"</p>
- <p>Applies an icon from the <a href="../buttons/buttons-icons.html">icon set</a> to all <a href="lists-split.html">split list buttons</a>. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+ <p>Applies an icon from the <a href="../buttons/buttons-icons.html">icon set</a> to all <a href="lists-split.html">split list buttons</a>. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
<strong>$.mobile.listview.prototype.options.splitIcon = "star";</strong>
});
@@ -149,7 +149,7 @@
<dt><code>splitTheme</code> <em>string</em></dt>
<dd>
<p class="default">default: "b"</p>
- <p>Sets the color scheme (swatch) for <a href="lists-split.html">split list buttons</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+ <p>Sets the color scheme (swatch) for <a href="lists-split.html">split list buttons</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
<strong>$.mobile.listview.prototype.options.splitTheme = "a";</strong>
});
@@ -160,7 +160,7 @@
<dt><code>theme</code> <em>string</em></dt>
<dd>
<p class="default">default: null, inherited from parent</p>
- <p>Sets the color scheme (swatch) for this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as its parent container if not explicitly set. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+ <p>Sets the color scheme (swatch) for this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as its parent container if not explicitly set. To set the value for all instances of this widget, bind this option to the <a href="../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
<strong>$.mobile.listview.prototype.options.theme = "a";</strong>
});
View
2  docs/pages/dynamic-samples/sample-reuse-page-external.html
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>changePage JSON Sample</title>
-<link rel="stylesheet" href="../../../css/themes/default/">
+<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
<script src="../../../js/jquery.js"></script>
<script src="../../../docs/_assets/js/jqm-docs.js"></script>
<script src="../../../js/"></script>
View
2  docs/pages/page-dynamic.html
@@ -162,7 +162,7 @@
<li>Can be either a jQuery collection object containing the page to be transitioned to, <b>OR</b> a URL reference for a page to be loaded/transitioned to.</li>
</ul>
</li>
- <li>options
+ <li><code>options</code>
<ul>
<li>Object containing the options that were passed in by the caller of the <code>$.mobile.changePage()</code> function.</li>
<li>A list of the options can be found <a href="../api/methods.html">here</a>.</li>
View
22 docs/pages/page-scripting.html
@@ -55,13 +55,10 @@
alert('A page with an ID of "aboutPage" is about to be created by jQuery Mobile!');
});
</code></pre>
-
+ <div class="ui-body ui-body-e">
<h4 style="margin:.5em 0">Important note: <code>pageCreate()</code> vs <code>pageInit()</code></h4>
- <p>Prior to Beta 2 the recommendation to users wishing to manipulate jQuery Mobile enhanced page and child widget markup was to bind to the <code>pagecreate</code> event. In Beta 2 an internal change was made to decouple each of the widgets by binding to the <code>pagecreate</code> event in place of direct calls to the widget methods. As a result, users binding to the <code>pagecreate</code> in <code>mobileinit</code> would find their binding executing before the markup had been enhanced by each of the plugins. In keeping with the lifecycle of the jQuery UI Widget Factory, the initialization method is invoked <strong>after</strong> the create method, so the <code>pageinit</code> event provides the correct timing for post enhancement manipulation of the DOM and/or Javascript objects.
-
- In short, if you were previously using <code>pagecreate</code> to manipulate the enhanced markup before the page was shown, it's very likely you'll want to migrate to 'pageinit'.
- </p>
-
+ <p>Prior to Beta 2 the recommendation to users wishing to manipulate jQuery Mobile enhanced page and child widget markup was to bind to the <code>pagecreate</code> event. In Beta 2 an internal change was made to decouple each of the widgets by binding to the <code>pagecreate</code> event in place of direct calls to the widget methods. As a result, users binding to the <code>pagecreate</code> in <code>mobileinit</code> would find their binding executing before the markup had been enhanced by each of the plugins. In keeping with the lifecycle of the jQuery UI Widget Factory, the initialization method is invoked <strong>after</strong> the create method, so the <code>pageinit</code> event provides the correct timing for post enhancement manipulation of the DOM and/or Javascript objects. In short, if you were previously using <code>pagecreate</code> to manipulate the enhanced markup before the page was shown, it's very likely you'll want to migrate to 'pageinit'.</p>
+ </div>
<h2>Changing pages</h2>
<p>If you want to change the current active page with JavaScript, you can use the <a href="../api/methods.html"><code>changePage</code></a> method. There are a lot of methods and properties that you can set when changing pages, but here are two simple examples:</p>
@@ -69,7 +66,7 @@ <h4 style="margin:.5em 0">Important note: <code>pageCreate()</code> vs <code>pag
<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>
+<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()
@@ -87,8 +84,7 @@ <h4 style="margin:.5em 0">Important note: <code>pageCreate()</code> vs <code>pag
<p>The page plugin dispatches a <code>pageInit</code> event, which most widgets use to auto-initialize themselves. As long as a widget plugin script is referenced, it will automatically enhance any instances of the widgets it finds on the page.</p>
<p>However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the <code>create</code> event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page <code>div</code> itself), saving you the task of manually initializing each plugin (listview button, select, etc.).</p>
<p>For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the <code>create</code> event to automatically transform all the widgets it contains (<a href="http://jquerymobile.com/test/docs/forms/textinputs/index.html">inputs</a> and <a href="http://jquerymobile.com/test/docs/buttons/index.html">buttons</a> in this case) into the enhanced versions. The code for this scenario would be:</p>
-<pre style="margin: 25px 0;"><code style="font-size: 12px;">$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
-</code></pre>
+<pre><code>$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );</code></pre>
<h2>Create vs. refresh: An important distinction</h2>
<p>Note that there is an important difference between the <code>create</code> event and <code>refresh</code> method that some widgets have. The <code>create</code> event is suited for enhancing <em>raw markup</em> that contains one or more widgets. The <code>refresh</code> method should be used on existing (already enhanced) widgets that have been manipulated programmatically and need the UI be updated to match.</p>
@@ -96,6 +92,14 @@ <h4 style="margin:.5em 0">Important note: <code>pageCreate()</code> vs <code>pag
<p>For example, if you had a page where you dynamically appended a new unordered list with <code>data-role=listview</code> attribute after page creation, triggering <code>create</code> on a parent element of that list would transform it into a <a href="http://jquerymobile.com/test/docs/lists/index.html">listview</a> styled widget. If more list items were then programmatically added, calling the listview&#8217;s <code>refresh</code> method would update just those new list items to the enhanced state and leave the existing list items untouched.</p>
+ <h2>data-enhance="false" data attribute</h2>
+ <p>As of jQuery Mobile 1.0, all the markup within a page is scanned for elements to be enhanced. This is problematic for 3rd party widgets/libraries that don’t want anybody enhancing their markup or attaching behavior. We heard requests for a data-* attribute that can be placed on an element container to tell the framework not to enhance anything inside it for these situations. In 1.1, we’ve added a new <code>data-enhance="false"</code> attribute that can be added to a container to prevent both auto-initialization and link/form hijacking.
+ This is also available via <code>$.fn.jqmEnhanceable</code>. It’s important to note that because of the performance impact incurred by finding a parent element with the <code>data-enhance="false"</code> attribute this feature must be turned on explicitly with <code>$.mobile.ignoreContentEnabled=true</code>. </p>
+
+ <h2>data-ajax="false" now works on containers</h2>
+ <p>On a related topic, we’ve always offered the ability to disable the AJAX navigation system from hijacking a link or form submit via the <code>data-ajax="false"</code> attribute, but people have asked for a way to apply this exclusion more efficiently to a grouping of links. In 1.1, this is now possible by simply adding, and setting <code>$.mobile.ignoreContentEnabled=true</code>, the <code>data-ajax</code> attribute to a parent container and it will exclude all the child links or forms from the AJAX navigation system behavior.</p>
+
+
<h2>Scrolling to a position within a page</h2>
<p>Since we use the URL hash to preserve Back button behavior, using page anchors to jump down to a position on the page isn't supported by using the traditional anchor link (#foo). Use the <a href="../api/methods.html"><code>silentScroll</code></a> method to scroll to a particular Y position without triggering scroll event listeners. You can pass in a <code>yPos</code> arguments to scroll to that Y location. For example:</p>
<pre><code>
View
27 js/jquery.mobile.core.js
@@ -60,17 +60,34 @@ define( [ "jquery", "../external/requirejs/text!../version.txt", "./jquery.mobil
// Show loading message during Ajax requests
// if false, message will not appear, but loading classes will still be toggled on html el
- loadingMessage: "loading",
+ loading: {
+ // When the text is visible, what theme does the loading box use?
+ theme: undefined,
- // Error response message - appears when an Ajax page request fails
- pageLoadErrorMessage: "Error Loading Page",
+ // Should the text be visble in the loading message?
+ textVisible: undefined,
+
+ // by default the loading message is just text and an optional spinner
+ // here we provide for the replacement of the popup with markup
+ html: undefined,
+
+ // users updating this setting to custom values will override
+ // $.mobile.loadingMessage value otherwise it will default to it
+ text: undefined
+ },
- // Should the text be visble in the loading message?
+ // DEPRECATED Should the text be visble in the loading message?
loadingMessageTextVisible: false,
- // When the text is visible, what theme does the loading box use?
+ // DEPRECATED When the text is visible, what theme does the loading box use?
loadingMessageTheme: "a",
+ // DEPRECATED default message setting
+ loadingMessage: "loading",
+
+ // Error response message - appears when an Ajax page request fails
+ pageLoadErrorMessage: "Error Loading Page",
+
// For error messages, which theme does the box uses?
pageLoadErrorMessageTheme: "e",
View
52 js/jquery.mobile.init.js
@@ -73,22 +73,54 @@ define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.support", "./jquery
}
$.extend($.mobile, {
- // turn on/off page loading message.
+ // Turn on/off page loading message. Theme doubles as an object argument
+ // with the following shape: { theme: '', text: '', html: '', textVisible: '' }
+ // NOTE that the $.mobile.loading* settings and params past the first are deprecated
showPageLoadingMsg: function( theme, msgText, textonly ) {
+ var loadSettings = $.mobile.loading;
+
+ // support for object literal params
+ if( $.type(theme) == "object" ){
+ loadSettings = theme;
+
+ // prefer object property from the param or the $.mobile.loading object
+ // then the old theme setting
+ theme = loadSettings.theme || $.mobile.loadingMessageTheme;
+ } else {
+ theme = theme || loadSettings.theme || $.mobile.loadingMessageTheme;
+ }
+
$html.addClass( "ui-loading" );
- if ( $.mobile.loadingMessage ) {
+ // if any of these things are provided make the necessary alterations
+ if ( $.mobile.loadingMessage || msgText || loadSettings.text || loadSettings.html ) {
// text visibility from argument takes priority
- var textVisible = textonly || $.mobile.loadingMessageTextVisible;
+ var textVisible = textonly, message, $header;
+
+ // boolean values require a bit more work :P
+ // support object properties and old settings
+ if( loadSettings.textVisible != undefined ) {
+ textVisible = loadSettings.textVisible;
+ } else {
+ textVisible = $.mobile.loadingMessageTextVisible;
+ }
- theme = theme || $.mobile.loadingMessageTheme,
+ $loader.attr( "class", loaderClass + " ui-corner-all ui-body-" + theme + " ui-loader-" + ( textVisible ? "verbose" : "default" ) + ( textonly ? " ui-loader-textonly" : "" ) );
+
+ // TODO verify that jquery.fn.html is ok to use in both cases here
+ // this might be overly defensive in preventing unknowing xss
+ // if the html attribute is defined on the loading settings, use that
+ // otherwise use the fallbacks from above
+ if( loadSettings.html ) {
+ $loader.html( loadSettings.html );
+ } else {
+ // prefer the param, then the settings object then loading message
+ message = msgText || loadSettings.text || $.mobile.loadingMessage;
+ $loader.find( "h1" )
+ .text( message );
+ }
- $loader
- .attr( "class", loaderClass + " ui-corner-all ui-body-" + ( theme || "a" ) + " ui-loader-" + ( textVisible ? "verbose" : "default" ) + ( textonly ? " ui-loader-textonly" : "" ) )
- .find( "h1" )
- .text( msgText || $.mobile.loadingMessage )
- .end()
- .appendTo( $.mobile.pageContainer );
+ $loader.appendTo( $.mobile.pageContainer );
checkLoaderPosition();
$window.bind( "scroll", checkLoaderPosition );
View
72 tests/unit/init/init_core.js
@@ -150,79 +150,72 @@
same($("#bar").jqmData('url'), "bak");
});
- asyncTest( "showPageLoadingMsg doesn't add the dialog to the page when loading message is false", function(){
- expect( 1 );
+ test( "showPageLoadingMsg doesn't add the dialog to the page when loading message is false", function(){
$.mobile.loadingMessage = false;
$.mobile.showPageLoadingMsg();
- setTimeout(function(){
- ok(!$(".ui-loader").length, "no ui-loader element");
- start();
- }, 500);
+ ok(!$(".ui-loader").length, "no ui-loader element");
});
- asyncTest( "hidePageLoadingMsg doesn't add the dialog to the page when loading message is false", function(){
- expect( 1 );
+ test( "hidePageLoadingMsg doesn't add the dialog to the page when loading message is false", function(){
$.mobile.loadingMessage = true;
+ $.mobile.showPageLoadingMsg();
$.mobile.hidePageLoadingMsg();
- setTimeout(function(){
- same($(".ui-loading").length, 0, "page should not be in the loading state");
- start();
- }, 500);
+ same($(".ui-loading").length, 0, "page should not be in the loading state");
});
- asyncTest( "showPageLoadingMsg adds the dialog to the page when loadingMessage is true", function(){
- expect( 1 );
+ test( "showPageLoadingMsg adds the dialog to the page when loadingMessage is true", function(){
$.mobile.loadingMessage = true;
$.mobile.showPageLoadingMsg();
- setTimeout(function(){
- same($(".ui-loading").length, 1, "page should be in the loading state");
- start();
- }, 500);
+ same($(".ui-loading").length, 1, "page should be in the loading state");
});
- asyncTest( "page loading should contain default loading message", function(){
- expect( 1 );
+ test( "page loading should contain default loading message", function(){
reloadCoreNSandInit();
$.mobile.showPageLoadingMsg();
- setTimeout(function(){
- same($(".ui-loader h1").text(), "loading");
- start();
- }, 500);
+ same($(".ui-loader h1").text(), "loading");
});
- asyncTest( "page loading should contain custom loading message", function(){
+ test( "page loading should contain custom loading message", function(){
$.mobile.loadingMessage = "foo";
$.testHelper.reloadLib(libName);
$.mobile.showPageLoadingMsg();
- setTimeout(function(){
- same($(".ui-loader h1").text(), "foo");
- start();
- }, 500);
+ same($(".ui-loader h1").text(), "foo");
});
- asyncTest( "page loading should contain custom loading message when set during runtime", function(){
+ test( "page loading should contain custom loading message when set at runtime", function(){
$.mobile.loadingMessage = "bar";
$.mobile.showPageLoadingMsg();
- setTimeout(function(){
- same($(".ui-loader h1").text(), "bar");
- start();
- }, 500);
+ same($(".ui-loader h1").text(), "bar");
});
+ test( "page loading should contain custom loading message when used in param object", function() {
+ $.mobile.showPageLoadingMsg({ text: "bak" });
+ same($(".ui-loader h1").text(), "bak", "loader has custom message 'bak'");
+ });
+
+ test( "page loading should contain different theme when used in param object", function() {
+ $.mobile.showPageLoadingMsg({ theme: "l" });
+ ok($(".ui-loader").hasClass( "ui-body-l"), "loader has theme l");
+ });
- // NOTE: the next two tests work on timeouts that assume a page will be created within 2 seconds
- // it'd be great to get these using a more reliable callback or event
+ test( "page loading should contain new html when provided", function() {
+ $.mobile.showPageLoadingMsg({ html: "<div class='foo'>foo</div>" });
+ same($(".ui-loader > div.foo").length, 1, "loader has a custom html");
+ });
+ // NOTE the next two tests work on timeouts that assume a page will be
+ // created within 2 seconds it'd be great to get these using a more
+ // reliable callback or event
asyncTest( "page does auto-initialize at domready when autoinitialize option is true (default) ", function(){
- $( "<div />", { "data-nstest-role": "page", "id": "autoinit-on" } ).prependTo( "body" )
+ $( "<div />", { "data-nstest-role": "page", "id": "autoinit-on" } ).prependTo( "body" );
$(document).one("mobileinit", function(){
$.mobile.autoInitializePage = true;
@@ -245,7 +238,7 @@
$.mobile.autoInitializePage = false;
});
- $( "<div />", { "data-nstest-role": "page", "id": "autoinit-off" } ).prependTo( "body" )
+ $( "<div />", { "data-nstest-role": "page", "id": "autoinit-off" } ).prependTo( "body" );
location.hash = "";
@@ -264,8 +257,5 @@
start();
}, 2000);
});
-
-
-
});
})(jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.