新浪微博 登陆  注册   设为首页 加入收藏

学PHP >> JQUERY >> jQuery 遮罩层插件blockUI

jQuery 遮罩层插件blockUI

查看次数15655 发表时间2012-12-21 21:52:17

       blockUI 是一个用来提示等待信息的 jQuery 插件,当要执行某个较长操作时候(大数据查询等),通过 blockUI 显示一个遮罩层或者图片来阻止当前用户继续操作。我也是今天才使用blockUI,说的不对的地方请多指教,先给一个具体的实例(JS部分)


$('#serch_button').click(function() {
	$.blockUI({ 
            message: '<h3 style="margin-top: 10px;">正在执行,请稍候...</h3>',
	    css: {
	          border: '1px solid black',
	          height: '40px'
	     }
	 });
         setTimeout($.unblockUI, 2000);   
 });


点击按钮后会在所在页面或iframe内显示上图,并且鼠标也是等待状态,不能在页面上操作,两秒后效果消失

message设置等待信息,也可以用jquery选择器选择,默认的等待信息是:Please wait...

css设置等待信息的样式

setTimeout设置取消遮罩层效果的时间,但是像大多数情况下我们都不知道我的操作能执行多久,我就可以用$.unblockUI()方法在执行操作完后取消效果,比如在ajax执行前使用blockUI方法,执行完后使用unblockUI方法。

这几个个属性方法是最常用的,还有overlayCSS(设置遮罩层样式)等很多属性方法,详见Demo



(转发请注明转自:学PHP)    


  相关推荐



1楼 Jazlyn说: 2016-12-22 09:13:51
Ah, i see. Well tha'ts not too tricky at all!"
2楼 Jazlyn说: 2016-12-22 09:14:13
Ah, i see. Well tha'ts not too tricky at all!"

  发表评论
昵称:
(不超过20个字符或10个汉字)
内容: