Web应用中常常需要这样的功能: 当用户点击"提交"按钮, 或者点击"刷新"链接AJAX获取新数据时, 都需要显示一个提示Loading的提示信息, 并且锁住按钮和某个区域, 避免用户重复操作. 使用 jQuery 的 BlockUI 插件可能轻松地达到该功能. 而且, BlockUI 的功能不仅如此, 它还能实现"弹出"窗口(如登录窗口), 气泡提示信息的功能.
1. 遮挡整个页面
直接调用 $.blockUI(), 即可锁定整个页面, 并提示信息:
$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });
要解锁只需要简单地调用 unblockUI():
$.unblockUI();
2. 遮挡部分(某个元素)
对一个 jQuery DOM 对象调用 blockUI 方法, 便可锁定该对象的显示区域, 如 div 块.
$('#my_div').blockUI();
3. 显示登录窗口(模式窗口)
bockUI 函数的参数对象的 message 字段, 可以接受任意的 HTML 代码, 或者某个 DOM 对象. 我们可以这样实现, 生成一个隐藏的登录表单, 当用户点击"登录"链接时, 对整个页面调用 blockUI(), 并把登录表单作为参数传递, 即可实现一个登录窗口:
$('#login_link').click(function() {
$.blockUI({ message: $('#loginForm') });
});
4. 自动隐藏的气泡提示信息
$.growlUI('操作成功!', '您的评论已经成功保存! 感谢您的参与!');
如果你需要更强大的气泡提示功能, 可以试试这个插件: jGrowl.
5. 自定义样式
jQuery blockUI 提供的默认样式, 你可以在每一次调用 blockUI() 函数时进行修改. 如果你觉得这样比较麻烦的话, 可以直接修改库文件 jquery.blockUI.js, 修改 $.blockUI.defaults 对象相关的代码即可.
jQuery blockUI 项目主页: http://jquery.malsup.com/block/
Loading ...
我想请教一下，下面的内容
我写的js的内容
$(document).ready(function() {
$(‘#test1234′).click(function() {
$.blockUI({ message: "<h1>WAIT 3s ….</h1>"});
});
})
jsp的内容
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link type="text/css" href="<s:url value="/css/publish/tdnet/tdiResult.css"/>" rel="stylesheet" />
<link type="text/css" href="<s:url value="/css/smoothness/jquery-ui-1.7.2.custom.css"/>" rel="stylesheet"/>
<script type="text/javascript" src="<s:url value="/js/jquery.blockUI.js"/>"></script>
<script type="text/javascript" src="<s:url value="/js/jquery-1.3.2.js"/>"></script>
<script type="text/javascript" src="<s:url value="/js/jquery-ui-1.7.2.custom.min.js"/>"></script>
<script type="text/javascript" src="<s:url value="/js/jquery-1.3.2.min.js"/>"></script>
<script type="text/javascript" src="<s:url value="/js/jquery-1.3.2.pack.js"/>"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<input id="test1234" value="clickShow" type="submit">
<div id="question" style="cursor: default; display: none;">
<h1>Would you like to contine?.</h1>
<input id="yes" value="Yes" type="button">
<input id="no" value="No" type="button">
</div>
</body>
</html>
但是为什么显示页面后，点击按钮clickShow，页面没有反应，怎么才能实现被遮罩呢，希望大家帮帮忙！！！！ Reply
<script type="text/javascript" src="<s:url value="/js/jquery-1.3.2.js"/>"></script>
<script type="text/javascript" src="<s:url value="/js/jquery.blockUI.js"/>"></script> Reply