Как сделать jqm «загрузка spinner» заполнить полный экран

Question

jQuery Mobile предлагает простой загрузчик, но он не предлагает способ отключения элементов на странице во время процесса загрузки.

мой список пожеланий:

1 - если метод $ .mobile.loading предложил вариант наложения-темы (вроде jqm всплывающего окна)

2 - если метод $ .mobile.loading принят целевой элемент положить блесну в, например, <div> набора в полноэкранном режиме

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

Однако, я хочу, чтобы избежать решения, в котором я должен сделать свой <div> и переключить его Separ но в синхронизации с вызовами $ .mobile.loading ('show/hide', ...), например, это предлагает SO.

Answer 1

После игры с классом UI-погрузчик в Firebug на некоторое время, я, наконец, отказался от такого подхода и решил сделать полноэкранный-Див подход:

//------------------------------------------------- 
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') ; 
     } 
    } 

Answer 2

Это мои изменения для Jquery мобильных 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; 
}