1. 程式人生 > >jquey 蒙版載入中特效

jquey 蒙版載入中特效

1 工具類:

/**  

 * 使用方法:  
 * 開啟:MaskUtil.mask("載入中");  
 * 關閉:MaskUtil.unmask();  
 *   
 * MaskUtil.mask('其它提示文字...');  
 */  
// MaskUtil Start  
var MaskUtil = (function(){  
      
    var $mask,$maskMsg;  
      
    var defMsg = '正在處理,請稍待。。。';  
      
    function init(){  
        if(!$mask){  
            $mask = $("<div></div>")  
            .css({  
              'position' : 'absolute'  
              ,'left' : '0'  
              ,'top' : '0'  
              ,'width' : '100%'  
              ,'height' : '100%'  
              ,'opacity' : '0.3'  
              ,'filter' : 'alpha(opacity=30)'  
              ,'display' : 'none'  
              ,'background-color': '#ccc'  
            })  
            .appendTo("body");  
        }  
        if(!$maskMsg){  
            $maskMsg = $("<div></div>")  
                .css({  
                  'position': 'absolute'  
                  ,'top': '50%'  
                  ,'margin-top': '-20px'  
                  ,'padding': '5px 20px 5px 20px'  
                  ,'width': 'auto'  
                  ,'border-width': '1px'  
                  ,'border-style': 'solid'  
                  ,'display': 'none'  
                  ,'background-color': '#ffffff'  
                  ,'font-size':'14px'  
                })  
                .appendTo("body");  
        }  
          
        $mask.css({width:"100%",height:$(document).height()});  
          
        var scrollTop = $(document.body).scrollTop();  
          
        $maskMsg.css({  
            left:( $(document.body).outerWidth(true) - 190 ) / 2  
            ,top:( ($(window).height() - 45) / 2 ) + scrollTop  
        });   
                  
    }  
      
    return {  
        mask:function(msg){  
            init();  
            $mask.show();  
            $maskMsg.html(msg||defMsg).show();  
        }  
        ,unmask:function(){  
            $mask.hide();  
            $maskMsg.hide();  
        }  
    }  
      

}()); 


2 使用方法:

function importOrder(){
var file=$("#orderImportFile").val();
if(file!=""){
$("#errorInfo").html("");
       var options = {
           url:ctx+'/orderImport/parseExcel',
        data:{},
        type:'post',

        beforeSubmit:function() { 
        MaskUtil.mask("正在解析...");  
        },
           success:function(data){    
            if(data.result=="1"){
           
orderVersion = data.orderVersion;
            MaskUtil.unmask();  
            alert("解析成功!");
           
            $('#table').bootstrapTable('destroy');
            $('#table').bootstrapTable({
            url:ctx+"/orderImport/loadParseExcel",
            queryParams:"queryParamsForOrderImport"
            });
            }else{
            alert("解析失敗!");
            }
           },
           error:function(result) { 
               alert("解析失敗!");
           } 
       };    
       $("#importOrderFrom").ajaxSubmit(options);
}else{
alert("請選擇檔案!");
}

  }