JQuery Block UI V2

最好参考地址: http://www.cssrain.cn/demo/blockUI-V2/jQuery/blockUI/jQueryBlockUI.html
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按钮查看效果。

   

测试链接 - 请点击!

lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo lorem leo consectetuer adipiscing elit sed lorem leo rhoncus sit amet  lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo 测试链接 - 请点击!

 


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

下面是这个页面的代码：

<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!' });