jqm "loading spinner"만드는 방법 전체 화면 채우기

Question

jQuery Mobile은 간단한 로더를 제공하지만 로딩 프로세스가 진행되는 동안 페이지에서 요소를 비활성화하는 방법은 제공하지 않습니다.

은 내 위시리스트는 : -은 $ .mobile.loading 방법합니다 (JQM 팝업 등)를 오버레이 테마 옵션

2를 제공하는 경우 -은

1은 $의 .mobile.loading 방법을 허용하는 경우 대상 요소는 그러나, 나는 내 자신의 <div>을하고 separ 전환 할 경우 솔루션을 피하고 싶은

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

을 전체 화면으로 이러한 <div> 세트로,에 스피너를 넣어 ately하지만 $ .mobile.loading ('show/hide', ...) 호출과 동기화하여이 SO과 같은 제안을합니다.

Answer 1

잠시 동안 방화범의 UI 로더 클래스와 함께 연주 후, 나는 마침내 그 접근 방식을 포기하고 전체 화면-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') ; 
     } 
    } 

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; 
}