Question

jQuery Mobile提供了一个简单的加载器，但它没有提供在加载过程中禁用页面上的元素的方法。

我的愿望清单：

1 - 如果$ .mobile.loading方法提供了overlay-theme选项（如jqm弹出窗口）

2 - 如果$ .mobile.loading方法接受了一个目标元素来放置微调器，例如<div>设置为全屏

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

但是，我想避免解决方案，我必须自己创建<div>并单独切换它，但与$ .mobile.loading（'show / hide'，...）调用同步正如SO所暗示的那样。

Answer 1

在Firebug中使用ui-loader类一段时间后，我终于放弃了这种方法并决定采用全屏-did方法：

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

如何制作jqm＆＃34;加载微调器＆＃34;填满全屏

2 个答案: