Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-05-02 20:04:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

position loader fixed by default, then check if it's positioned correctly and if not, switch to an absolute positioned scheme, with updates on scroll (or scrollstop in iOS 4).

Browse source
This commit is contained in:
scottjehl 2011-12-30 13:02:10 +07:00
parent 41d63056c6
commit 0a267cea64
2 changed files with 34 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
css/structure/jquery.mobile.core.css
View file

@ -67,7 +67,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
.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-fakefix { position: absolute; }
/*fouc*/
.ui-mobile-rendering > * { visibility: hidden; }

41
js/jquery.mobile.init.js
View file

@ -31,10 +31,33 @@ define( [ "jquery.mobile.core", "jquery.mobile.navigation", "jquery.mobile.navig
// 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>" );
// For non-fixed supportin browsers. Position at y center (if scrollTop supported), above the activeBtn (if defined), or just 100px from top
function fakeFixLoader(){
$loader
.css({
top: $.support.scrollTop && $window.scrollTop() + $window.height() / 2 ||
activeBtn.length && activeBtn.offset().top || 100
});
}
// check position of loader to see if it appears to be "fixed" to center
// if not, use abs positioning
function checkLoaderPosition(){
if( $loader.offset().top < $window.scrollTop() ){
$loader.addClass( "ui-loader-fakefix" );
fakeFixLoader();
$window
.unbind( "scroll", checkLoaderPosition )
.bind( "scroll", fakeFixLoader );
}
}
$.extend($.mobile, {
// turn on/off page loading message.
showPageLoadingMsg: function() {
$html.addClass( "ui-loading" );
if ( $.mobile.loadingMessage ) {
var activeBtn = $( "." + $.mobile.activeBtnClass ).first();
@ -42,19 +65,21 @@ define( [ "jquery.mobile.core", "jquery.mobile.navigation", "jquery.mobile.navig
.find( "h1" )
.text( $.mobile.loadingMessage )
.end()
.appendTo( $.mobile.pageContainer )
// position at y center (if scrollTop supported), above the activeBtn (if defined), or just 100px from top
.css({
top: $.support.scrollTop && $window.scrollTop() + $window.height() / 2 ||
activeBtn.length && activeBtn.offset().top || 100
});
.appendTo( $.mobile.pageContainer );
checkLoaderPosition();
$window.bind( "scroll", checkLoaderPosition );
}
$html.addClass( "ui-loading" );
},
hidePageLoadingMsg: function() {
$html.removeClass( "ui-loading" );
if( $.mobile.loadingMessage ){
$loader.removeClass( "ui-loader-fakefix" );
}
$( window ).unbind( "scroll", fakeFixLoader );
},
// find and enhance the pages in the dom and transition to the first page.