1. 程式人生 > >layer載入遮罩層使用 Ajax&nb…

layer載入遮罩層使用 Ajax&nb…

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