jquery ajax load mask

起床已经10点了，烧了烧水、吃了点年糕、洗了洗；没多少时间，就做个ajax load mask吧，呵呵！

反正用了jquery ui了 再使用第三方的load mask反而增加了下载的js、css文件数量，所以自己写一个，可以用 ok！ 

html页面加入下面部分： 

1  < div  title ="操作进行中"  id ="dlgAJAXMask" >< div  id ="pbAJAXMask" ></ div ></ div >

 

接下来是js代码：

 1         function fnPbAJAXMaskProcess(){

 2               var  pbValue  =  parseInt($( " #pbAJAXMask " ).progressbar(  " option " ,  " value "  ));
 3              pbValue  =  (pbValue  +   25 ) % 100 ;
 4              $( " #pbAJAXMask " ).progressbar( " option " ,  " value " , pbValue);
 5          }
 6          
 7          $( function  () {
 8               var  $dlgAJAXMask  =  $( " #dlgAJAXMask " ).dialog({ autoOpen:  false , modal:  true  });
 9               var  $pbAJAXMask  =  $( " #pbAJAXMask " ).progressbar({
10                  value:  25
11              });
12               var  pbAJAXTimer;
13              $.ajaxSetup({
14                  cache: false , // 放置ajax的get请求IE缓存
15                  beforeSend: function (){
16                      pbAJAXTimer  =  setInterval( " fnPbAJAXMaskProcess() " , " 250 " );
17                      $dlgAJAXMask.dialog( " open " );
18                       return   true ; // jquery doc - Returning false in the beforeSend function will cancel the request. 
19                  },
20                  complete: function (){
21                      $dlgAJAXMask.dialog( " close " );
22                      console.log(pbAJAXTimer);
23                      clearInterval(pbAJAXTimer);
24                  }
25              });
26          });

 

转载于:https://www.cnblogs.com/yuyingjian/archive/2011/02/09/jquery-ui-custom-ajax-load-mask.html