JQuery blockUI 的使用方法

JQueryBlock UI V2

概述

The jQuery BlockUI 插件是用于进行AJAX 操作时模拟同步传输时锁定浏览器操作^[1] 。当它被激活时，它会阻止使用者与页面（或页面的一部分）进行交互，直至它被取消。 BlockUI以在DOM 中添加元素的方法来实现阻止用户与浏览器交互的外观和行为。

在翻译过程中，本人进行了测试。目前V2版本不能用于IE8测试版。

这个插件的用法很简单。阻止用户与页面交互：

$.blockUI();

自定义提示信息：

$.blockUI({ message: '<h1><imgsrc="busy.gif" /> Just a moment...</h1>' });

自定义显示样式：

$.blockUI({ css: { backgroundColor: '#f00', color: '#fff'}});

解除对页面的锁定：

$.unblockUI();

如果要使用默认设置来同步所有的AJAX请求动作，代码如下：

$().ajaxStart($.blockUI).ajaxStop($.unblockUI);

[1] 以同步传输的方式来使用XMLHttpRequest对象会在请求结束前阻止用户与浏览器的交互，直到请求结束。通常情况下，这不是一种好的用户体验。

锁定页面的例子

下面显示了几种锁定页面的方法。每个按钮都会激活blockUI并进行一次远程通信。

页面代码如下：

// unblock whenajax activity stops

$().ajaxStop($.unblockUI);

function test() {

$.ajax({ url:'wait.php', cache: false });

}

$(document).ready(function() {

$('#pageDemo1').click(function() {

$.blockUI();

test();

});

$('#pageDemo2').click(function() {

$.blockUI({ message: '<h1><img src="busy.gif" /> 请稍后...</h1>' });

test();

});

$('#pageDemo3').click(function() {

$.blockUI({ css: { backgroundColor: '#f00', color: '#fff' } });

test();

});

$('#pageDemo4').click(function() {

$.blockUI({ message: $('#domMessage') });

test();

});

</script>

</div>

简单的对话框示例

此页展示了如何显示一个简单的模拟对话框。以下按钮将激活blockUI 显示一段自定义信息。这个AJAX请求将根据用户的反应（是或否）来发送或取消，在用户决定的这段时间内，会一直保持页面的锁定状态。

下面是这个页面的代码：

$(function() {

$('#test').click(function() {

$.blockUI({ message: $('#question'), css: { width: '275px' } });

});

$('#yes').click(function() {

// updatethe block message

$.blockUI({ message: "<h1>正在进行通信...</h1>"});

$.ajax({

url:'wait.php',

cache:false,

complete: function() {

//unblock when remote call returns

$.unblockUI();

}

});

$('#no').click($.unblockUI);

});

</script>

...

...

<h1>你确信要继续么？.</h1>

<inputtype="button" id="确认"value="Yes" />

<inputtype="button" id="取消"value="No" />

</div>

全功能的模拟对话框支持请访问 jqModal Plugin，作者是Brice Burgess。

你确信要继续么？

选项

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!' });

JQuery blockUI 的使用方法相关推荐

弹出层之2：JQuery.BlockUI
JQuery.BlockUI是众多JQuery插件弹出层中的一个,它小巧(原版16k,压缩后10左右),容易使用, 功能齐全,支持Iframe,支持Modal,可定制性高也意味他默认谦虚的外表. jQ ...
jQuery遮罩插件jQuery.blockUI.js简介
概述: jQuery BlockUI插件可以在不锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为.该插件激活时,会阻止用户在页面进行的操作,直到插件被关闭.BlockUI通过向DOM中添加元素实 ...
jQuery CSS 操作 - css() 方法
实例设置 <p> 元素的颜色: $(".btn1").click(function(){$("p").css("color", ...
JQuery 的跨域方法可跨任意网站
JS的跨域问题,很多人在网上找其解决方法,教其用IFRAME去解决的文章很多,真有那么复杂吗?其实很简单的,如果你用JQUERY,一个GETJSON方法就搞定了,而且是一行代码搞定. 下面开始贴出方法 ...
javascript:jquery.history.js使用方法
javascript:jquery.history.js使用方法 step1:download jquery.history.js step2:create a test page as follow ...
在 ASP.NET 使用 jQuery BlockUI 插件
BlockUI 是一个相当不错的jQuery插件,它可以轻易设定页面指定区域显示执行中文字(如 Loading...)并锁定该区域限制输入.简单的说,若我们希望网页在执行PostBack 或 Ajax ...
关于使用jQuery时$(document).ready()方法失效问题
关于使用jQuery时$(document).ready()方法失效问题 <script type="text/javascript">//页面加载后自动执行,不需要按 ...
用JQuery中的Ajax方法获取web service等后台程序中的方法
用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...
[jQuery] 针对jQuery性能的优化方法有哪些？
[jQuery] 针对jQuery性能的优化方法有哪些? show slide animate 等频繁修改 dom 很耗性能,可采用 jquery.transit 插件等使用单个 id 或 class ...
[jQuery] jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this
[jQuery] jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this init()方法中返回的this指向init的实例对象,而init.prototype等于jQue ...

JQuery blockUI 的使用方法

JQuery blockUI 的使用方法相关推荐

最新文章

热门文章