jQuery BlockUI 实现锁屏

标签：

           当我们在前端通过ajax调用后台的时候,由于数据量各有不同,可能会造成长时间的等待,但此时等待的用户仍然可以操作界面上的其他元素,例如重新点击一个按钮,这种情况是不被允许的.或者有时候需要执行某些操作后,对用户界面进行锁屏,经过一段时间后重新恢复,此时当然会想到在页面上增加一层div来进行遮挡,但jQuery的BlockUI已经帮你完成了这样的工作,我们可以通过简单的js代码来达到各种各样的效果.jQuery BlockUI使用: 通过以下地址可以访问BlockUI的官网,上面有众多的Demo可供参考http://www.malsup.com/jquery/block/

         首先当然是要引入blockUI,以下Demo就使用1.6

            <script type="text/javascript" src="jquery-1.6.1.min.js"></script> 

            <script type="text/javascript" src="jquery-block-ui.js"></script>

 11111111111111111111111111111111111

• $(function(){  
•     //当加载完后立刻锁屏,并显示hello world为锁屏信息  
•     //若然只想锁屏但不显示任何信息,可以设置为null  
•     $.blockUI({  
•         message:"hello world";  
•     })  
• })

22222222222222222222222222222222222222222222222222

• $(function(){    
•         //可以为BlockUI增加样式    
•         $.blockUI({ css : {  
•             border : "none",    
•             padding : "15px",    
•             backgroundColor : "#000",    
•             "-webkit-border-radius" : "10px",    
•             "-moz-border-radius" : "10px",    
•             opacity : .5,    
•             color : "#fff"    
•         }})    
•     })

33333333333333333333333333333333333333333333333333333333

• $(function(){  
•     /*  
•      * 可直接获取id为loginForm的表单来进行弹出,  
•      * 实现类似popup的功能  
•      */ 
•     $.blockUI({  
•         message : $("#loginForm")  
•     })  
•     //2秒后关闭遮挡  
•     setTimeout($.unblockUI,2000);  
• })

4444444444444444444444444444444444444444444444444444

• $(function(){  
•         $.blockUI();  
•           
•         setTimeout(function(){  
•             $.unblockUI({  
•                 //执行解除锁屏的回调函数  
•                 onUnblock : function(){  
•                     alert("onUnblockUI");  
•                 }  
•             })  
•         },2000);  
•     });

5555555555555555555555555555555555555555555555555555555

• $(function(){  
•         $.blockUI({  
•             //当锁屏后点击其他地方触发的事件,这里触发为解除锁屏  
•             onOverlayClick : $.unblockUI  
•         });  
•     });

66666666666666666666666666666666666666666666666666666666

• $(function(){  
•         //设置全局ajax开始时锁屏  
•         $(document).ajaxStart(function () {  
•             blocks();  
•         });  
•           
•         //设置全局ajax结束时解锁  
•         $(document).ajaxStop(function () {  
•             $.unblockUI();  
•         });  
•     });

jQuery BlockUI 实现锁屏

标签：

原文地址：http://www.cnblogs.com/wushuishui/p/4326240.html