Added inline loading indicator (a fake delay is set in the AJAX callback).

This commit is contained in:
Mat Marquis 2011-12-06 14:06:09 -05:00
parent 52e4799076
commit 612d1be179
2 changed files with 8 additions and 3 deletions

View file

@ -55,7 +55,9 @@ div.ui-mobile-viewport { overflow-x: hidden; }
/* loading screen */
.ui-loading .ui-mobile-viewport { overflow: hidden !important; }
.ui-loading .ui-loader { display: block; }
.ui-loading .ui-page { overflow: hidden; }
.ui-loader-inline .ui-icon-loading { display: block; margin: 1em auto; width: 35px; height: 35px; background-color: rgba(0,0,0,.1); }
.ui-loading .ui-page { overflow: hidden; }
.ui-loader { display: none; position: absolute; opacity: .85; z-index: 100; left: 50%; width: 200px; margin-left: -130px; margin-top: -35px; padding: 10px 30px; }
.ui-loader h1 { font-size: 15px; text-align: center; }
.ui-loader .ui-icon { position: static; display: block; opacity: .9; margin: 0 auto; width: 35px; height: 35px; background-color: transparent; }

View file

@ -9,12 +9,15 @@ $.widget( "mobile.fetchlink", $.mobile.widget, {
// Prototyping.
// $( this.element.data( 'fragment' ) ).hide();
console.log( $(":jqmData(role='page')") );
$( this.element ).click(function() {
var el = $( this ),
url = el.attr( 'href' ),
target = el.data( "target" ),
targetEl = target && $( target ) || el,
load = el.data( "fragment" ) /* Needs a proper default (page, most likely). */,
load = el.data( "fragment" ) || $(":jqmData(role='page')") /* Needs a proper default (page, most likely). */,
threshold = screen.width > parseInt( el.data( "breakpoint" ) || 0 ),
methods = [ "append", "prepend", "replace", "before", "after" ],
method = "html",
@ -60,7 +63,7 @@ $.widget( "mobile.fetchlink", $.mobile.widget, {
});
$( document ).bind( "inlineLoader", function( e ){
$( e.target ).html( "<div class='ui-loader' style='display: block; position: static; float: none; width: 100%; padding: 1em 0 .5em 0; margin: 0;'><span class='ui-icon ui-icon-loading spin' style='top: 0; border: 1px solid red;'></span><h1></h1></div>" );
$( e.target ).html( "<div class='ui-loader-inline'><span class='ui-icon ui-icon-loading spin'></span></div>" );
});