页面异步过程中的遮罩

           原本是要继续发自定义控件形式的分页，但是我看了好一会觉得大概思路是利用委托实现事件调用重新绑定数据，我个人不太推荐这种，所以在此也就发了。

　　　　采用AJAX异步方式请求在现在页面中非常普遍，原本延迟加载是异步加载的优势。但在不同情况下，如果用户已经发起一个异步请求，再去触发其他的请求可能会导致一些页面错误，假如能在第一次异步后加个页面遮罩就能很好的处理这个情况了。

　　　　介绍的第一个遮罩是利用easyui的messager.progress，效果如下：

                     

 　　<link href="jquery-easyui-1.3.5/themes/default/easyui.css" rel="stylesheet" />
    <script src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
   function func2() { 
                 $.messager.progress({
                     title: '请稍后',
                     msg: '',
                     text: '正在请求后台'
                 }); 
                 setTimeout(function () {
                     $.messager.progress('close');//关闭遮罩 
                         alert(123); 
                 }, 4000);  
         }

　　　　 第二种是利用jquery的mask()方法，给某个元素添加遮罩，效果如下：

                  

 　　　　<script src="jquery-min-1.9.1.js"></script>
　　　　　<link href="jquery.loadmask.css" rel="stylesheet" />
　　　　　function Func () {  
                 $("body").mask("正在请求后台。。。"); 
                 setTimeout(function () {
                     $("body").unmask();//取消遮罩
                     if (result == "ok") {
                         alert(123);
                     }
                 },4000);  
         }

 　　　　其中mask()这个方法需要注意我引用的是1.9.1的版本，  如果引用1.7.2是不会显示遮罩的（具体是那个版本开始支持的我不太清楚，需要查下）

　　　　最后再介绍一个插件我用的比较多的blockUI，还是先看效果：

         

       <script src="jquery-1.7.2.min.js"></script>
　　　　<script src="jquery.blockUI.js"></script> 
　　　　function func3() {
            $.blockUI({
                message: "<div style='float:left;margin-left:35%'><img src='bg.gif'  width='30px';height='30px' />
　　　　　　　　　　　　　　  </div><div style='line-height:30px;float:left;margin-left:10%'>请稍候</div>",
                css: {
                    border: 'none',
                    padding: '15px',
                    backgroundColor: 'Grey',
                    "300px",
                    opacity: .5,
                    color: 'Red'
                }
            });
            setTimeout($.unblockUI, 2000);
        } 

 　　　  其他还有很多，我列的是我以前整理的，仅供参考。