一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

jQuery EasyUI 页面加载等待及页面等待层

时间:2017-03-16 编辑:简简单单 来源:一聚教程网

下面一个代码片段是 easyUI 页面加载等待,代码如下所示:

 代码如下复制代码

functionajaxLoading() {

 varid ="#textboxDiv";

 varleft = ($(window).outerWidth(true) - 190) / 2;

 vartop = ($(window).height() - 35) / 2;

 varheight = $(window).height() * 2;

 $("").css({ display:"block", width:"100%", height: height }).appendTo(id);

 $("").html("正在加载,请稍候...").appendTo(id).css({ display:"block", left: left, top: top });

}

functionajaxLoadEnd() {

 $(".datagrid-mask").remove();

 $(".datagrid-mask-msg").remove();

}

下面看个工具类 基于easyui的页面等待提示层,即mask

 代码如下复制代码
/**

 * 使用方法:

 * 开启:MaskUtil.mask();

 * 关闭:MaskUtil.unmask();

 *

 * MaskUtil.mask('其它提示文字...');

 */

varMaskUtil = (function(){

 var$mask,$maskMsg;

 vardefMsg ='正在处理,请稍待。。。'

 functioninit(){

  if(!$mask){

   $mask = $("").appendTo("body");

  }

  if(!$maskMsg){

   $maskMsg = $("

"+defMsg+"

")

    .appendTo("body").css({'font-size':཈px'});

  }

  $mask.css({width:"100%",height:$(document).height()});

  varscrollTop = $(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();

  }

 }

}());

效果图:

热门栏目