首页 > 代码库 > Jquery blockUI用法

Jquery blockUI用法

1 锁定页面的例子

<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="http://www.mamicode.com/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>

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

<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>

------------------------------------------------------------------------------------
3 简单的对话框示例
此页展示了如何显示一个简单的模拟对话框。以下按钮将激活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>

 



Jquery blockUI用法