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();
• });
• });