前端之家收集整理的这篇文章主要介绍了
layer加载遮罩层使用 Ajax Loading Demo,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<!DOCTYPE html>
<html>
<head>
<title>Ajax Loading Demo</title>
<Meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript">
;!function(){
layer.config({//加载扩展模块
extend: 'extend/layer.ext.js'
});
layer.ready(function(){
});
}();
function ityzl_SHOW_LOAD_LAYER(){
return layer.msg('努力中...',{icon: 16,shade: [0.5,'#f5f5f5'],scrollbar: false,offset: '0px',time:100000}) ;
}
function ityzl_CLOSE_LOAD_LAYER(index){
layer.close(index);
}
function ityzl_SHOW_TIP_LAYER(){
layer.msg('恭喜您,加载完成!',{time: 1000,offset: '10px'});
}
</script>
<script type="text/javascript">
$(function(){
$("#btnRequest").bind("click",function () {
var i ;
$.ajax({
type: "POST",dataType: "text",url: "admin/index.action",beforeSend: function () {
i = ityzl_SHOW_LOAD_LAYER();
},success: function (msg) {
ityzl_CLOSE_LOAD_LAYER(i);
ityzl_SHOW_TIP_LAYER();
},error: function (e,jqxhr,settings,exception) {
ityzl_CLOSE_LOAD_LAYER(i);
}
});
});
});
</script>
</head>
<body>
<a href="javascript:void(0);" id="btnRequest" >请求数据</a>
</body>
</html>