自定义查询数据加载缓冲样式

之前由于数据加载有点慢,公司需要在已有的查询功能上做一个自定义的加载缓冲效果

css:
/*查询数据加载缓冲样式*/
.ajax_loading { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 9999; background-color: transparent; }
.ajax_loading_inner { cursor: wait; text-align: center; background-color: rgba(0,0,0,0.5); color: #fff; position: fixed; top: 50%; left: 50%; margin-left: -70px; margin-top: -48px; width: 140px; border-radius: 6px !important; font-size: 14px; padding: 58px 0 10px 0; }

/*查询数据加载缓冲时,原有数据样式*/
.changeGray{
width:100%;
height:100%;
color: #fff; 
position: fixed;
top: 10%; 
left: 10%; 
bottom:10%;
right:10%;
border-radius: 6px !important; 
opacity:0.5;
background-color: #efefef;
}
html:

 <!--查询数据加载缓冲div-->      <div id="ajaxloading" class="ajax_loading  hide">      <div class="ajax_loading_inner" style='background:#666;'>      <!-- 加载缓冲的小图片,基本都是圈圈或者菊花等具有缓冲效果的图片 -->      <img style='width:20px;height:20px; position: absolute;top: 15px;left: 50%;margin-left: -16px;' src="${ctx}/static/jquery-easyui/themes/gray/images/loading.gif"/>数据加载中...</div>            </div>         <!--查询数据加载缓冲时,覆盖原有数据的div-->      <div id="KeepOut">      </div>
js:

ajaxloadbefore:function(){//加载前加入显示缓冲效果
			$("#ajaxloading").removeClass("hide");
			$("#KeepOut").addClass("changeGray");
		}
jaxloadend:function(){//加载结束消除显示缓冲效果
			$("#ajaxloading").addClass("hide");
			$(".changeGray").removeClass("changeGray");
		}

这样一个简单的查询数据加载缓冲效果就做好了

页面展示:

加缓冲样式之前:


加缓冲样式之后:


阅读更多
个人分类: css js
想对作者说点什么? 我来说一句

简易好看的树形列表开发

2015年01月27日 3.82MB 下载

没有更多推荐了,返回首页

不良信息举报

自定义查询数据加载缓冲样式

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭