layer加载遮罩层使用 Ajax Loading Demo

发布时间：2020-12-16 01:44:54 所属栏目：百科来源：网络整理

导读：!DOCTYPE htmlhtmlhead titleAjax 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"

<!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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!