jquery 堵塞显示 jquery block

• 博客分类： 
• jQueryUI

jquery 

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

jQuery BlockUI使用: 
    通过以下地址可以访问BlockUI的官网,由于天朝长城的原因,有时需要VPN才能正常访问,上面有众多的Demo可供参考http://www.malsup.com/jquery/block/ 


     首先当然是要引入blockUI,由于笔者项目使用jQuery1.6,以下Demo就使用1.6 

 

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

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

1. $(function(){    
2. //可以为BlockUI增加样式  
3.         $.blockUI({ css : {  
4. "none",    
5. "15px",    
6. "#000",    
7. "-webkit-border-radius" : "10px",    
8. "-moz-border-radius" : "10px",    
9.             opacity : .5,    
10. "#fff"
11.         }})    
12.     })

1. $(function(){  
2. /*
3.      * 可直接获取id为loginForm的表单来进行弹出,
4.      * 实现类似popup的功能
5.      */
6.     $.blockUI({  
7. "#loginForm")  
8.     })  
9. //2秒后关闭遮挡
10.     setTimeout($.unblockUI,2000);  
11. })

 

1. $(function(){  
2.         $.blockUI();  
3.           
4. function(){  
5.             $.unblockUI({  
6. //执行解除锁屏的回调函数
7. function(){  
8. "onUnblockUI");  
9.                 }  
10.             })  
11.         },2000);  
12.     });

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

 

1. $(function(){  
2. //设置全局ajax开始时锁屏
3. function
4.             blocks();  
5.         });  
6.           
7. //设置全局ajax结束时解锁
8. function
9.             $.unblockUI();  
10.         });  
11.     });

总结: 

    使用BlockUI只需要编写少量代码就能实现轻松方便的锁屏和解锁,还可以设置自定义的样式去控制BlcokUI样式的显示,作为jQueryUI的小工具,极其易学和使用方便