2010-04-26

jQuery BlockUI 页面遮挡插件

Views: 45982 | 3 Comments

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/

Related posts:

  1. jQuery 设置复选框选中状态的 BUG
  2. Nginx 499 错误码以及 AJAX 调用失败
  3. 获取动态加载的图片大小的正确方法
  4. 程序员, 不要过度封装!
  5. jQuery延时绑定事件(lazy-bind)
Posted by ideawu at 2010-04-26 11:47:00 Tags: , , ,

3 Responses to "jQuery BlockUI 页面遮挡插件"

  • 确实很实用的插件 Reply
  • 迷茫的小妞儿 2010-12-13 at 14:22:39
    你好
    我想请教一下,下面的内容

    我写的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"&gt;
    <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
    Hi, 小妞: 你加载了太多的js, 只需要这两个即可并确保这两个文件的路径正确, 其它的删除.

    &lt;script type="text/javascript" src="&lt;s:url value="/js/jquery-1.3.2.js"/&gt;"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="&lt;s:url value="/js/jquery.blockUI.js"/&gt;"&gt;&lt;/script&gt; Reply

Leave a Comment