jQuery插件 blockUI

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种方式：

• 一、全局设置, 经过直接指定$.blockUI.defaults对象的值来设置。
• 二、局部设置, 将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