layer加载遮罩层使用 Ajax&nb…

1. >  
2. <</span>html>  
3. <</span>head>  
4.     <</span>title>Ajax Loading Demo</</span>title>  
5.     <</span>meta http-equiv="content-type" content="text/html; charset=utf-8" />  
6. <</span>style type="text/css">  
7. </</span>style>  
8.     <</span>script type="text/javascript" src="jquery-1.8.3.min.js"></</span>script>  
9.     <</span>script type="text/javascript" src="layer/layer.js"></</span>script>  
10.     <</span>script type="text/javascript">  
11.         ;!function(){  
12.             layer.config({//加载扩展模块  
13.                 extend: 'extend/layer.ext.js'  
14.             });  
15.             layer.ready(function(){   
16.             });  
17.         }();  
18.           
19.         function ityzl_SHOW_LOAD_LAYER(){  
20.             return layer.msg('努力中...', {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false,offset: '0px', time:100000}) ;  
21.         }  
22.         function ityzl_CLOSE_LOAD_LAYER(index){  
23.             layer.close(index);  
24.         }  
25.         function ityzl_SHOW_TIP_LAYER(){  
26.             layer.msg('恭喜您，加载完成！',{time: 1000,offset: '10px'});  
27.         }  
28.     </</span>script>  
29.       
30. <</span>script type="text/javascript">  
31. $(function(){  
32.     $("#btnRequest").bind("click", function () {  
33.         var i ;  
34.         $.ajax({  
35.             type: "POST",  
36.             dataType: "text",  
37.             url: "admin/index.action",  
38.             beforeSend: function () {  
39.                 i = ityzl_SHOW_LOAD_LAYER();  
40.             },  
41.             success: function (msg) {  
42.                 ityzl_CLOSE_LOAD_LAYER(i);  
43.                 ityzl_SHOW_TIP_LAYER();  
44.             },  
45.             error: function (e, jqxhr, settings, exception) {  
46.                 ityzl_CLOSE_LOAD_LAYER(i);  
47.             }  
48.         });  
49.     });  
50. });  
51. </</span>script>  
52.       
53. </</span>head>  
54. <</span>body>  
55.     <</span>a href=";" id="btnRequest" >请求数据</</span>a>  
56. </</span>body>  
57. </</span>html>