对jQuery blockUI插件进行了小的封装扩展，支持confirm、alert、dialog弹出窗口提示信息，支持按钮回调事件。可以自定义css样式、覆盖blockUI的样式等
首先要到jquery blockUI 官方网址：http://malsup.com/jquery/block/
官网提供各种各样的demos 可以根据官网提供的样式和格式设计自己的提示框，官方demos如下：http://malsup.com/jquery/block/#demos
test.jsp<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="resources/js/jquery.blockUI.js"></script>
<script type="text/javascript">
$(function(){
ajax请求前触发和结束后触发
$(document).ajaxStart($.blockUI({
message:$('#loading"),
css:{
top:($(window).height()-400)/2+'px',
left:($(window).width()-400)/2+'px',
width:'400px',
border:'none'
},
overlatCSS:{backgroundColor:'fff'}
}).ajaxStop($.unblockUI);
//默认样式
var a1 = $("a:eq(0)");
a1.click(function(){
a1.css("color","green");
$.blockUI();
});
//自定义内容
var a2 = $("a:eq(1)");
a2.click(function(){
$.blockUI({message:'正在处理，请等待...'});
});
//自定义样式
var a3 = $("a:eq(2)");
a3.click(function(){
$.blockUI({ css: {
border:'solid green 2px',
backgroundColor:'blue'
}
});
});
//蓝色背景
var a4 = $("a:eq(3)");
a4.click(function(){
$.blockUI({
overlayCSS:{backgroundColor:'blue'},
message:'正在处理，请等待。。。',
css:{
backgroundColor:'#F0FF00',
height:40
}
});
});
//停滞2秒
var a5 = $("a:eq(4)");
a5.click(function(){
$.blockUI({message:'Processing...'});
setTimeout($.unblockUI,2000);
});
//防止一个表单
var a6 = $("a:eq(5)");
a6.click(function(){
$.blockUI({message:$('#loginForm')});
});
//通知（Notification）
var a7 = $("a:eq(6)");
a7.click(function(){
$.growlUI('Hi','Have a nice day!');
});
//onBlock callback
a8 = $("a:eq(7)");
a8.click(function(){
$.blockUI({
fadeIn: 1000,
timeout: 2000,
onBlock: function() {
alert('Page is now blocked; fadeIn complete');
}
});
});
//Theme
var a9 = $("a:last");
a9.click(function(){
$.blockUI(
{
theme:true,
title:'<p style="font-size:25px" mce_style="font-size:25px">This is your title<p>',
message:'<p style="font-size:22px;background-color:green;" mce_style="font-size:22px;background-color:green;">This is your message.</p>',
timeout:2000
}
);
});
});
</script>
</head>
<body>
<img alt="" id"Loading" src="images/Loading.gif" style="display:none">
<a href="#" mce_href="#">DEFAULT</a>
<a href="#" mce_href="#">自定义内容</a>
<a href="#" mce_href="#">自定义样式</a>
<a href="#" mce_href="#">蓝色背景</a>
<a href="#" mce_href="#">停滞2秒</a>
<a href="#" mce_href="#">放置一个表单</a>
<a href="#" mce_href="#">通知（Notification）</a>
<a href="#" mce_href="#">onBlock callback</a>
<a href="#" mce_href="#">Theme</a>
<div id="login" style="display:none" mce_style="display:none">
<form action="#" id="loginForm">
<table>
<thead>
<th>用户登录</th>
</thead>
<tr>
<td>用户名：</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="pwd"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="登录"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
如果是ajax想提示一直加载的图标，官方有一句话：
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);在ajax执行前执行$.blockUI 在$.unblockUI后执行，这就会触发你定义的ajax提示框，如上述实例
相关推荐
一旦这两个文件被正确引入，我们就可以开始使用jQuery.blockUI.js了。基本用法非常简单，调用`$.blockUI()`方法即可显示遮罩层： ```javascript $(document).ready(function() { $.blockUI(); }); ``` 这将阻塞...
jQuery.blockUI.js可以与各种jQuery事件结合使用，如`click`、`submit`或`ajaxStart`。例如，当用户点击一个按钮时，可以自动触发遮罩效果： ```javascript $('#myButton').click(function() { $.blockUI(); //...
使用BlockUI.js非常简单，首先需要引入jQuery库和BlockUI.js插件的JavaScript文件，例如： ```html <script src="path/to/jquery.js"> <script src="path/to/jquery.blockui.js"> ``` 然后，可以通过调用$.blockUI...
The jQuery BlockUI 插件是用于进行AJAX 操作时模拟同步传输时锁定浏览器操作[1] 。当它被激活时，它会阻止使用者与页面（或页面的一部分）进行交互，直至它被取消。 BlockUI以在DOM 中添加元素的方法来实现阻止用户...
最新的jquery.blockUI
BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定...当它被激活时，它会阻止使用者与页面（或页面的一部分）进行交互，直至它被取消。 BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为。
弹出框，旋转等待框用到的js，jQuery自带弹出框框架js
在这个压缩包里，包含的三个文件——`jackson.jar`、`jquery-blockUI.js`和`jquery.js`，都是在开发Ajax应用程序时非常重要的工具。 首先，`jackson.jar`是Jackson库的一部分，这是一个Java对象映射框架，主要用于...
《jQuery.blockUI.Demo与dialog.js的深度解析》 在Web开发中，用户界面的交互性和用户体验至关重要。jQuery.blockUI插件就是一个强大的工具，用于在网页上实现页面元素的锁定和提示功能，常用于加载提示、弹窗警告...
从提供的文件列表来看，`jquery-1.6.1.min.js` 是 jQuery 的库文件，而 `jquery.blockUI.js` 则是 blockUI 插件本身。在 HTML 页面中，需要在 `<head>` 或者 `<body>` 标签内添加这两个脚本的引用，确保它们在页面...
jQuery blockUI plugin Version 2.39 (23-MAY-2011) Demos: $(document).ready(function() { $('#demo1').click(function() { $.blockUI({ message: $('#loginForm') }); setTimeout($.unblockUI, 2000); ...
要使用jQuery.blockUI，首先需要在页面中引入jQuery库（如jquery.min.js）和jQuery.blockUI插件（如jquery.blockUI.js）。在HTML文档的`<head>`部分添加以下代码： ```html <script src="jquery.min.js"> ...
BlockUI.js是一款基于jQuery的JavaScript库，主要用于网页中的页面或者元素阻塞，即在特定操作进行时，如数据加载或提交表单，显示一个遮罩层以阻止用户与页面其他部分的交互。这个库在网络开发中非常实用，因为它...
附件包含jquery.blockUI.JS，将其添加进引用，即可使用。
本文将深入探讨jQuery BlockUI的使用方法、核心功能以及实际应用场景。 一、BlockUI的基本使用 1. 引入库文件 首先，确保你的HTML页面中引入了jQuery库（例如`jquery-1.7.min.js`）以及BlockUI插件（例如`jquery....