1.首先要准备好关于jquery的js文件
包括jquery-1.2.3.js和jquery.blockUI.js
2.在前台JSP页面中调用Jquery
<%@ page language="java" import="java.util.*" 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">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'JqueryShowBlock.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script language="JavaScript" type="text/javascript"
src="<%=path %>/jquery/jquery-1.2.3.js"></script>
<script type="text/javascript" src="<%=path %>/jquery/jquery.blockUI.js"></script>
<script language="JavaScript">
function showBlock(){
jQuery.blockUI({ message: "处理中，请稍候...", css: {color:'#fff',border:'3px solid
#aaa',backgroundColor:'#CC3300'},overlayCSS: { opacity:'0.0' }});
setTimeout('hideBlock()',2000);//2000毫秒后调用hideBlock()
}
function hideBlock(){
jQuery.unblockUI();
}
</script>
</head>
<body>
This is my JSP page. <br>
ShowJqueryBlock Start:<input type="button" id="showBlock" value="ShowBlock"
onclick="showBlock()"/><br/>
</body>
</html>
关于jquery文件的目录结构如下：
---WebRoot
--------jquery
-----------jquery-1.2.3.js
-----------jquery.blockUI.js
3.页面执行结果如下：
当点击"ShowBlock"按钮时会调用jquery的jQuery.blockUI方法，"处理中，请稍后..."的jquery的block信息会显示，并且将页面锁定；过2000毫秒后调用jQuery.unblockUI()将jquery的block信息取消。
此文章为转载：
http://wl-ldy.iteye.com/blog/1038803
分享到：
相关推荐
本文将深入探讨jQuery BlockUI的使用方法、核心功能以及实际应用场景。 一、BlockUI的基本使用 1. 引入库文件 首先，确保你的HTML页面中引入了jQuery库（例如`jquery-1.7.min.js`）以及BlockUI插件（例如`jquery....
The jQuery BlockUI 插件是用于进行AJAX 操作时模拟同步传输时锁定浏览器操作[1] 。当它被激活时，它会阻止使用者与页面（或页面的一部分）进行交互，直至它被取消。 BlockUI以在DOM 中添加元素的方法来实现阻止用户...
使用jQuery BlockUI的基本步骤如下： 1. **引入资源**：首先，你需要在页面中引入jQuery库和jQuery BlockUI插件的JavaScript文件。例如： ```html <script src="path/to/jquery.min.js"> <script src="path/to/...
jQuery blockUI plugin Version 2.39 (23-MAY-2011) Demos: $(document).ready(function() { $('#demo1').click(function() { $.blockUI({ message: $('#loginForm') }); setTimeout($.unblockUI, 2000); ...
《JQuery Blockui 遮罩功能详解及应用实践》 在Web开发中，我们经常需要在用户进行某些操作（如提交表单、加载数据）时显示一个加载提示或者阻止用户交互，这时JQuery Blockui插件就派上了用场。Blockui允许我们在...
`jQuery.blockUI` 是一个非常实用的 jQuery 插件，用于在网页上模拟各种阻塞效果，例如加载提示、弹出对话框等，使得用户在等待页面处理时不会误操作。这个插件广泛应用于需要暂时禁用用户界面，或者显示等待动画的...
`jQuery BlockUI` 是一个非常实用的jQuery插件，它允许开发者轻松地在网页上创建各种页面遮罩效果，常用于模拟页面加载或阻止用户与页面的交互。这个插件在许多网页应用中广泛使用，特别是在需要进行异步操作如数据...
最新版本的jquery blockUI 2.7.0，官方完整版，测试通过，想要自定义设置一些东西可以直接百度或者查看官网demo
**jQuery BlockUI 插件详解** 在前端开发中，我们经常需要在进行异步操作（如Ajax请求）时，防止用户交互对正在进行的过程造成干扰。这时，就需要用到一种称为“遮罩”或“锁定”的功能，使得用户界面在特定时段内...
这时，我们可以使用jQuery BlockUI.js插件来创建一个加载提示，告诉用户数据正在加载，提高交互体验。BlockUI.js是jQuery的一个扩展，它能够方便地阻止用户与页面的交互，同时显示自定义的提示信息。 ## 一、jQuery...
一旦这两个文件被正确引入，我们就可以开始使用jQuery.blockUI.js了。基本用法非常简单，调用`$.blockUI()`方法即可显示遮罩层： ```javascript $(document).ready(function() { $.blockUI(); }); ``` 这将阻塞...
首先，要使用jQuery BlockUI，你需要在页面中引入jQuery库以及BlockUI的JavaScript文件。你可以通过CDN或者本地文件来引入。例如： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ...
jQuery.blockUI.js可以与各种jQuery事件结合使用，如`click`、`submit`或`ajaxStart`。例如，当用户点击一个按钮时，可以自动触发遮罩效果： ```javascript $('#myButton').click(function() { $.blockUI(); //...
BlockUI可以无缝地与其它jQuery插件结合使用，例如AJAX请求。当发起异步请求时，你可以先调用`$.blockUI`，在请求完成后调用`$.unblockUI`： ```javascript $.ajax({ url: 'myAjaxUrl', type: 'POST', data: ...
官方最新版的 jquery-blockUI，本人没有对其进行任何的修改，完全是从官网上下载了。
在项目中使用 BlockUI，首先需要确保已经安装了 jQuery。然后可以通过以下方式引入 BlockUI： ```html <!-- 引入 jQuery --> <script src="https://code.jquery.com/jquery-3.x.y.min.js"></script> <!-- 引入 ...
BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定...当它被激活时，它会阻止使用者与页面（或页面的一部分）进行交互，直至它被取消。 BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为。