jquery插件之jquery.lock异步锁定内容

ajax异步提交内容的时候,常常需要锁定某个区域, 避免用户重复操作。利用js加载一个绝对定位的遮罩层,并给以加载提示,锁定内容区域。使用jQuery.lock插件可能轻松地达到该功能,该插件自动添加遮罩层,锁定内容或解锁内容。源码16行不到1KB,调用起来非常方便。

1、锁定内容

	$('#lock').click(function(){
		$('.test').lock();
	})

2、解锁内容

	$('#lock').click(function(){
		$('.test').unlock();
	})

3、自定义样式

.lockUI{ background:url(loading.gif) center center no-repeat;}

jQuery.lock 插件源码:

(function($) {
$.fn.lock = function() {
	return this.unlock().each(function() {
		if ($.css(this,'position') == 'static')
			this.style.position = 'relative';
		if ($.browser.msie)
			this.style.zoom = 1;
		$(this).append('
') }); }; $.fn.unlock = function() { return this.each(function() { $('.lockUI',this).remove(); }); } })(jQuery);

查看演示

“jquery插件之jquery.lock异步锁定内容”的2个回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注