diff --git a/css/structure/jquery.mobile.core.css b/css/structure/jquery.mobile.core.css index 8b24297f..1e2670a7 100644 --- a/css/structure/jquery.mobile.core.css +++ b/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; } diff --git a/docs/api/globalconfig.html b/docs/api/globalconfig.html index da1f1f61..edac11c9 100755 --- a/docs/api/globalconfig.html +++ b/docs/api/globalconfig.html @@ -121,9 +121,20 @@ $(document).bind("mobileinit", function(){
loadingMessage string, default: "loading"
Set the text that appears when a page is loading. If set to false, the message will not appear at all.
+ +
loadingMessageTheme string, default: "a"
+
Set the theme that the loading message box uses, when text is visible.
pageLoadErrorMessage string, default: "Error Loading Page"
Set the text that appears when a page fails to load through Ajax.
+ +
pageLoadErrorMessageTheme string, default: "e"
+
Set the theme that the error message box uses.
+ +
loadingMessageTextVisible string, default: false
+
Should the text be visible when loading message is shown. (note: currently, the text is always visible for loading errors)
+ +
gradeA function that returns a boolean, default: a function returning the value of $.support.mediaquery
Any support conditions that must be met in order to proceed.
diff --git a/js/jquery.mobile.core.js b/js/jquery.mobile.core.js index 2bb3b6a0..db61d189 100644 --- a/js/jquery.mobile.core.js +++ b/js/jquery.mobile.core.js @@ -63,6 +63,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, diff --git a/js/jquery.mobile.init.js b/js/jquery.mobile.init.js index c5b45a93..0e14b11e 100644 --- a/js/jquery.mobile.init.js +++ b/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 = $( "

" ); + var loaderClass = "ui-loader", + $loader = $( "

" ); // 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 ); @@ -77,7 +84,7 @@ define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.navigation", "./jqu if( $.mobile.loadingMessage ){ $loader.removeClass( "ui-loader-fakefix" ); - } + } $( window ).unbind( "scroll", fakeFixLoader ); }, diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index f9cea378..6c3ba3c1 100755 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -863,18 +863,15 @@ define( [ // Remove loading message. if ( settings.showLoadMsg ) { - + // Remove loading message. hideMsg(); - //show error message - $( "

"+ $.mobile.pageLoadErrorMessage +"

" ) - .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 );