注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

╰此情可待成追忆

当没有阳光时,我自己便是阳光,当没有快乐时,我自己便是快乐

 
 
 

日志

 
 

easyui 加载、等待效果 遮罩层  

2014-09-12 13:57:35|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
http://sdfcbs91.blog.163.com/blog/static/197242203201287111054954/
还没实现加载消息水平居中,自己调整下
页面上加上这2个样式================================================:
<style type="text/css">
/* 加载等待的遮罩层样式 */
.datagrid-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  filter: alpha(opacity=30);
  display: none;
  background:#000;
}
/* 加载等待的样式 */
.datagrid-mask-msg {
  position: absolute;
  top: 50%;
  width: auto;
  height: 16px;
  margin-top: -20px;
  padding: 10px 5px 10px 30px;  
  border: 5px solid #f6c1bc; /* #f6c1bc; */
  color:#000;
  display: none;
  background: #ffffff url('resources/images/loading.gif') no-repeat scroll 5px center;
}
</style>

js中================================================================:
/**********************************************************
 * easyui的加载效果调用:showLoad(控件id,'内容'); closeLoad();
 * 页面需有easyui的datagrid的2个样式:datagrid-mask(2个) ,datagrid-mask-msg(3个)
 * 以及缓冲图片:loading.gif
 **********************************************************/
// 开启“加载等待”,id-控件id,msg-缓冲消息
function showLoad(id, msg){
// 遮罩层
    $('<div class="datagrid-mask"></div>').css({
    display:"block",
    width:"100%",
    height:$(window).height()
    }).appendTo('#'+id); 
    
    // 等待效果显示在“id”的控件上
    $('<div class="datagrid-mask-msg"></div>').html(msg).appendTo("#"+id)
    .css({display:"block", left:($(window).width()/2)}); //,left:40,top:180
}

// 关闭“加载等待”
function closeLoad(id){
// 关闭“加载等待” 
    $('#'+id).find("div.datagrid-mask-msg").remove();
    $('#'+id).find("div.datagrid-mask").remove();
}
  评论这张
 
阅读(524)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017