2

jQuery Mobile offers a simple loader, but it does not offer a way to disable elements on the page while the loading process is occurring.

my wishlist:

1 - if the $.mobile.loading method offered a overlay-theme option (like the jqm popup)

2 - if the $.mobile.loading method accepted a target element to put the spinner into, such as a <div> set to fullscreen

$.mobile.loading( 'show', { text : "loading" ,
                            textVisible : true  ,
                            theme       : 'b'   ,
                            html        : ""     
                      }) ;

However, I want to avoid the solution where I have to make my own <div> and toggle it separately but in synch with the $.mobile.loading( 'show/hide' , ... ) calls such as this SO suggests.

4

2 回答 2

1

在 Firebug 中玩了一段时间的 ui-loader 类后，我终于放弃了这种方法，决定做 fullscreen-div 的方法：

//-------------------------------------------------
var gvn_loader_bg_class = "jqm_loader_bg"       ;

//--------------------------------------------------
function gf_jqm_loader_setup()
  { 
    var lvo_loader          = jQuery( ".ui-loader" ) ;
    var lvi_loader_z        = lvo_loader.css('z-index') ;    

    var lvs_style  = "" ;
        lvs_style += "position         : fixed                         ;" ;
        lvs_style += "left             : 0%                            ;" ;
        lvs_style += "top              : 0%                            ;" ;
        lvs_style += "width            : 100%                          ;" ;
        lvs_style += "height           : 100%                          ;" ;
        lvs_style += "background-color : white                         ;" ;
        lvs_style += "opacity          : .3                            ;" ;
        lvs_style += "display          : none                          ;" ;
        lvs_style += "z-index          : " + ( lvi_loader_z - 1 ) + "  ;" ;

        lvo_loader.before( "<div class='" + gvn_loader_bg_class  + "' style='" + lvs_style + "'></div>" ) ;
  }

//-------------------------------------------------
function gf_toggle_jqm_loader( argb )
  { if( argb )
      { jQuery.mobile.loading( 'show') ;
        jQuery( "." + gvn_loader_bg_class ).css( 'display' , 'block' ) ;
      }
    else
      { jQuery.mobile.loading( 'hide') ;
        jQuery( "." + gvn_loader_bg_class ).css( 'display' , 'none' ) ;
      }
  }
于 2013-05-14T11:30:48.703 回答
0

这是我对 jquery mobile css（版本 1.4.2）的更改，以便加载 div 填充全屏

.ui-loader .ui-icon-loading {
    background-color: #000;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -1.375em;
    margin-top: -1.375em;
    width: 2.75em;
    height: 2.75em;
    padding: .0625em;
    -webkit-border-radius: 2.25em;
    border-radius: 2.25em;
}

.ui-loader-default {
    background: none;
    filter: Alpha(Opacity=18);
    opacity: .18;
}

.ui-loader {
    display: none;
    z-index: 9999999;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border:0;
}
于 2014-04-07T12:30:08.150 回答