jQuery BlockUI

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

jQueryBlockUI使用:

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

首先当然是要引入blockUI,由于笔者项目使用jQuery1.6,以下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>

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

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

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

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

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

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

总结:

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