JQuery Block UI V2

 

JQuery Block UI V2

概述

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

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

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

$.blockUI();

自定义提示信息：

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

自定义显示样式：

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

解除对页面的锁定：

$.unblockUI();

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

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

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

锁定页面的例子

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

页面代码如下：

<script type="text/javascript">

    // unblock when ajax 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 id="domMessage" style="display:none;">
    <h1>正在处理，请稍侯...</h1>
</div>

正在处理，请稍侯...

锁定元素的例子

这里展示了如何锁定页面中的元素，而不是整个页面。 请点击block/unblock按钮查看效果。

测试链接 - 请点击!

Option 1 Option 2 lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo lorem leo consectetuer adipiscing elit sed lorem leo rhoncus sit amet Option 1 Option 2 lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo 测试链接 - 请点击!
<!-- google广告开始--><script type="text/javascript">&lt;!-- google_ad_client = &quot;pub-0545040803774316&quot;; /* 468x60, 创建于 08-6-5 */ google_ad_slot = &quot;9087368421&quot;; google_ad_width = 468; google_ad_height = 60; //--&gt; </script><script style="display: none;" src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script><!-- google广告结束-->
输入域测试

这段文字不会被锁定。 测试链接 - 请点击!

下面是这个页面的代码：

<script type="text/javascript">
    $(function() {
        $('#blockButton').click(function() {
            $('div.test').block({ message: null });
        });

        $('#blockButton2').click(function() {
            $('div.test').block({ 
                message: '<h1>处理中...</h1>', 
                css: { border: '3px solid #a00' } 
            });
        });

        $('#unblockButton').click(function() {
            $('div.test').unblock();
        });

        $('a.test').click(function() {
            alert('link clicked');
            return false;
        });
    });
</script>

简单的对话框示例

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

下面是这个页面的代码：

<script type="text/javascript">
    $(function() {
        $('#test').click(function() {
            $.blockUI({ message: $('#question'), css: { width: '275px' } });
        });

        $('#yes').click(function() {
            // update the block message
            $.blockUI({ message: "<h1>正在进行通信...</h1>" });

            $.ajax({
                url: 'wait.php',
                cache: false,
                complete: function() {
                    // unblock when remote call returns
                    $.unblockUI();
                }
            });
        });

        $('#no').click($.unblockUI);
    });
</script>

...

<input id="test" type="submit" value="显示对话框" />

...

<div id="question" style="display:none; cursor: default">
        <h1>你确信要继续么？.</h1>
        <input type="button" id="确认" value="Yes" />
        <input type="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!' });

常见问题

BlockUI插件需要那个jQuery版本的支持？

BlockUI兼容jQuery v1.2.3以上的版本

BlockUI插件的V2版本有那些变化？

• 解除锁定的时候，用于提示信息的元素不会从DOM中移除
• 默认的遮罩层为黑色
• 可用的选项设置进行了统一和清理
• 设置插件选项的方法改变了
• 放弃了对Opera 8的支持
• 提高了源代码的可读性
• 移除了displayBox 功能 (其他 plugins 会做的更好)

我的原代码中的blockUI插件与新的2.00版兼容么？

不兼容，如果原代码改变了blockUI的默认属性，那么会出现兼容问题。如何设置选项的语法发生了细微的改变。请查看Options页 来了解新版本的选项设置方法。

BlockUI插件还依赖于其他的插件么？

不依赖

我如何使用外部样式表来格式化提示信息？

请查看 demo页 .

我可以改变页面锁定时默认的提示信息么？

可以。默认的提示信息储存在$.blockUI.defaults.message 中。你可以以一个新的值来替换它，例如：

$.blockUI.defaults.message = "Please be patient...";

我能够改变遮罩层的颜色和透明度么？

可以。默认的遮罩层样式储存在 $.blockUI.defaults.overlayCSS 中。 你可以指定一个不同的颜色和透明度，例如

// 使用黄色遮罩层
$.blockUI.defaults.overlayCSS.backgroundColor = '#ff0';

// 使遮罩层更透明
$.blockUI.defaults.overlayCSS.opacity = '.2';

BlockUI支持Opera 8么？

不支持

在linux的FF上我为什么看不到遮罩层？

有几个人告诉我，在FF/Linux上整个页面的透明度渲染慢的让人发疯，所以默认情况下，在这些平台上遮罩层不透明。你可以重设applyPlatformOpacityRules 值来启用透明度。 例如:

// 在FF/Linux下启用遮罩层透明
$.blockUI.defaults.applyPlatformOpacityRules = false;

下载

新版本的blockUI v2.00可以在这里得到: jquery.blockUI.js .

旧版本的blockUI仍然可以在这里得到： http://jqueryjs.googlecode.com/svn/trunk/plugins/blockUI/jquery.blockUI.js .
旧版本的文档在这里 .

支持

BlockUI插件的支持请访问 jQuery Google Group .

BlockUI插件和文档由Mike Alsup制作完成。 意见或建议请发送至 jquery @ malsup . com.

中文化： transping.com

<!-- google广告开始-->

<script type="text/javascript">&lt;!-- google_ad_client = &quot;pub-0545040803774316&quot;; /* 728x90, 创建于 08-6-5 */ google_ad_slot = &quot;7034803449&quot;; google_ad_width = 728; google_ad_height = 90; //--&gt; </script><script style="display: none;" src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script>

<!-- google广告结束-->