BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。当它被激活时,它会阻止使用者与页面(或页面的一部分)进行交互,直至它被取消。 BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为。
这个插件的用法很简单。
1 阻止用户与页面交互:
$.blockUI();
2 自定义提示信息:
$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });
3 自定义显示样式:
$.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} });
4 解除对页面的锁定:
$.unblockUI();
5 如果要使用默认设置来同步所有的AJAX请求动作,代码如下:
$().ajaxStart($.blockUI).ajaxStop($.unblockUI);
----------------------------------------------------------------------------------
BlockUI的默认选项设置如下:
// 可以使用以下代码来自定义行为和样式 $.blockUI.defaults = { //锁定时显示的提示信息(无提示信息时设置为null) message: '<h1>Please wait...</h1>', // 可以用CSS来格式化锁定时显示的信息 // 如果你希望使用一个外部样式表,请使用一下代码 // $.blockUI.defaults.css = {}; css: { padding: 0, margin: 0, width: '30%', top: '40%', left: '35%', textAlign: 'center', color: '#000', border: '3px solid #aaa', backgroundColor:'#fff' }, // 设置遮罩层的样式 overlayCSS: { backgroundColor:'#000', opacity: '0.6' }, // 允许在ie6中缩放body元素。这会使较短的页面看上去好一些 // 如果你不想body元素的高度被改变,请设置为disable allowBodyStretch: true, // 默认情况下blockUI会禁止tab导航 constrainTabKey: true, // fadeOut时间单位为毫秒。设为0的话,在解除锁定时不使用fadeout效果。 fadeOut: 400, // 禁止在FF/Linux上使用遮罩层样式(由于透明度的性能问题) applyPlatformOpacityRules: 1 };
改变blockUI的设置非常简单,有2种方式:
- 1、全局设置, 通过直接指定
$.blockUI.defaults
对象的值来设置。 - 2、局部设置, 将options对象放到
blockUI
(或block
) 函数内部。
全局设置
你可以通过直接的赋值来改变默认的选项。例如:
// 改变提示信息的边框 $.blockUI.defaults.css.border = '5px solid red'; // 缩短fadeOut效果的时间 $.blockUI.defaults.fadeOut = 200;
局部设置
局部设置是将options对象放到 blockUI
(或 block
) 函数内部。这会强制使用局部设置来代替全局设置的值。例如:
// 改变提示信息的边框 $.blockUI({ css: { border = '5px solid red'} }); ... // 缩短fadeOut效果的时间 $.blockUI({ fadeOut: 200 }); ... // 使用一个不同的提示信息 $.blockUI({ message: 'Hold on!' });
原文转自:http://www.cnblogs.com/kiter/archive/2012/02/23/2365251.html
转载于:https://blog.51cto.com/frabbit/805875