mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-16 22:10:25 +00:00
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.
This commit is contained in:
scottjehl
parent
45eb085167
commit
8232059164
5 changed files with 47 additions and 17 deletions
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -121,9 +121,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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 );
|
||||
|
||||
|
|
@ -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 );
|
||||
},
|
||||
|
|
|
|||
|
|
@ -863,18 +863,15 @@ define( [
|
|||
|
||||
// Remove loading message.
|
||||
if ( settings.showLoadMsg ) {
|
||||
|
||||
|
||||
// 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 );
|
||||
|
|
|
|||
Loading…
Reference in a new issue