Added an optional 1.0-style loading box design, configurable via a new loadingMessageTextVisible option, which defaults to false for regular loading messages, but is true for internal error messages. In order to support this change, the show loader method was modified with 3 arguments: theme, text, and text-only. Other new core options have been added to configure the theme for default and error message boxes: loadingMessageTheme and pageLoadErrorMessageTheme.

css/structure/jquery.mobile.core.css

@@ -26,9 +26,15 @@ div.ui-mobile-viewport { overflow-x: hidden; }
 
 /* loading screen */
 .ui-loading .ui-loader { display: block; }
-.ui-loader { background-color: #000; opacity: .18; display: none; z-index: 9999999; position: fixed; width: 46px; height: 46px; top: 50%; box-shadow: 0 1px 1px -1px #fff; margin-left: -18px; margin-top: -18px; left: 50%; padding: 1px; border:0; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; }
-.ui-loader h1 { font-size: 0px; width: 0; height: 0; overflow: hidden; }
-.ui-loader .ui-icon {  display: block; margin: 0; width: 46px; height: 46px;  background-color: transparent; }
+.ui-loader { display: none; z-index: 9999999; position: fixed; top: 50%; box-shadow: 0 1px 1px -1px #fff; left: 50%; border:0; }
+.ui-loader-default { background: none; opacity: .18; width: 46px; height: 46px; margin-left: -18px; margin-top: -18px; padding: 1px; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; }
+.ui-loader-verbose { width: 200px; opacity: .88; height: auto; margin-left: -110px; padding: 10px; }
+.ui-loader-default h1 { font-size: 0; width: 0; height: 0; overflow: hidden; }
+.ui-loader-verbose h1 { font-size: 16px; margin: 0; text-align: center; }
+.ui-loader .ui-icon {  display: block; margin: 0; width: 46px; height: 46px; background-color: transparent; }
+.ui-loader-verbose .ui-icon { margin: 0 auto 10px; }
+.ui-loader-textonly { padding: 15px; margin-left: -115px;  }
+.ui-loader-textonly .ui-icon { display: none; }
 .ui-loader-fakefix { position: absolute; }
 /*fouc*/
 .ui-mobile-rendering > * { visibility: hidden; }

docs/api/globalconfig.html

@@ -122,9 +122,20 @@ $(document).bind("mobileinit", function(){
 	<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.</dd>
 	
+	<dt><code>loadingMessageTheme</code> <em>string</em>, default: "a"</dt>
+	<dd>Set the theme that the loading message box uses, when text is visible.</dd>
+
 	<dt><code>pageLoadErrorMessage</code> <em>string</em>, default: "Error Loading Page"</dt>
 	<dd>Set the text that appears when a page fails to load through Ajax.</dd>
 	
+	<dt><code>pageLoadErrorMessageTheme</code> <em>string</em>, default: "e"</dt>
+	<dd>Set the theme that the error message box uses.</dd>
+	
+	<dt><code>loadingMessageTextVisible</code> <em>string</em>, default: false</dt>
+	<dd>Should the text be visible when loading message is shown. (note: currently, the text is always visible for loading errors)</dd>
+	
+	
+
 	<dt><code>gradeA</code> <em>function that returns a boolean</em>, default: a function returning the value of $.support.mediaquery</dt>
 	<dd>Any support conditions that must be met in order to proceed.</dd>
 

js/jquery.mobile.core.js

@@ -64,6 +64,15 @@ define( [ "jquery", "text!../version.txt", "./jquery.mobile.widget" ], function(
 		// Error response message - appears when an Ajax page request fails
 		pageLoadErrorMessage: "Error Loading Page",
 		
+		// Should the text be visble in the loading message?
+		loadingMessageTextVisible: false,
+		
+		// When the text is visible, what theme does the loading box use?
+		loadingMessageTheme: "a",
+		
+		// For error messages, which theme does the box uses?
+		pageLoadErrorMessageTheme: "e",
+
 		//automatically initialize the DOM when it's ready
 		autoInitializePage: true,
 

js/jquery.mobile.init.js

@@ -30,7 +30,8 @@ define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.navigation", "./jqu
 
 	// loading div which appears during Ajax requests
 	// will not appear if $.mobile.loadingMessage is false
-	var $loader = $( "<div class='ui-loader '><span class='ui-icon ui-icon-loading'></span><h1></h1></div>" );
+	var loaderClass = "ui-loader",
+		$loader = $( "<div class='" + loaderClass + "'><span class='ui-icon ui-icon-loading'></span><h1></h1></div>" );
 	
 	// For non-fixed supportin browsers. Position at y center (if scrollTop supported), above the activeBtn (if defined), or just 100px from top
 	function fakeFixLoader(){
@@ -56,14 +57,20 @@ define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.navigation", "./jqu
 
 	$.extend($.mobile, {
 		// turn on/off page loading message.
-		showPageLoadingMsg: function() {
+		showPageLoadingMsg: function( theme, msgText, textonly ) {
 			$html.addClass( "ui-loading" );
+			
 			if ( $.mobile.loadingMessage ) {
-				var activeBtn = $( "." + $.mobile.activeBtnClass ).first();
+				var activeBtn = $( "." + $.mobile.activeBtnClass ).first(),
+					theme = theme || $.mobile.loadingMessageTheme,
+					// text visibility from argument takes priority
+					textVisible = textonly || $.mobile.loadingMessageTextVisible;
+					
 
 				$loader
+					.attr( "class", loaderClass + " ui-body-" + ( theme || "a" ) + " ui-loader-" + ( textVisible ? "verbose" : "default" ) + ( textonly ? " ui-loader-textonly" : "" ) )
 					.find( "h1" )
-						.text( $.mobile.loadingMessage )
+						.text( msgText || $.mobile.loadingMessage )
 						.end()
 					.appendTo( $.mobile.pageContainer );
 					

js/jquery.mobile.navigation.js

@@ -867,14 +867,11 @@ define( [
 						// Remove loading message.
 						hideMsg();
 
-						//show error message
-						$( "<div class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all'><h1>"+ $.mobile.pageLoadErrorMessage +"</h1></div>" )
-							.css({ "display": "block", "opacity": 0.96, "top": $window.scrollTop() + 100 })
-							.appendTo( settings.pageContainer )
-							.delay( 800 )
-							.fadeOut( 400, function() {
-								$( this ).remove();
-							});
+						// show error message
+						$.mobile.showPageLoadingMsg( $.mobile.pageLoadErrorMessageTheme, $.mobile.pageLoadErrorMessage, true );
+						
+						// hide after delay
+						setTimeout( $.mobile.hidePageLoadingMsg, 1500 );
 					}
 
 					deferred.reject( absUrl, options );