jQuery 遮罩层插件blockUI
查看次数28550 发表时间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)
相关推荐
- js和jquery穿梭iframe获取元素 (2012-12-21 21:52:33)
- jquery中焦点图插件kinslideshow (2012-12-21 21:52:37)
- 10 款高质量的 jQuery 表单验证插件 (2013-01-04 17:41:37)
- jquery实现复选框多选、单选、全不选功能,很实用 (2013-03-02 22:54:15)
- 8 款简单大气的 jQuery/CSS3 图片特效 (2013-05-16 10:07:29)
- jQuery源码分析 (2012-12-15 20:40:11)
- js、jquery图片动画,图片动态切换 (2012-12-15 20:39:56)
- jQuery页面加载初始化的3种方法 (2012-12-14 22:21:28)
- JQuery输入框选中加亮效果 (2012-12-14 22:19:22)
- JQuery回转图片展示(鼠标交互式) (2012-12-14 21:48:54)
- 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!"
发表评论