jQuery 遮罩层插件blockUI

查看次数20652 发表时间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个汉字)

内容：

发 表