BlockUI详细用法

jQuery BlockUI Plugin概述：

jQuery BlockUI插件可以在不锁定浏览器的同时，模拟同步模式下发起Ajax请求的行为。该插件激活时，会阻止用户在页面进行的操作，直到插件被关闭。BlockUI通过向DOM中添加元素实现其外观和组织用户交互的行为。

使用jQuery BlockUI，首先需要添加插件js源码的引用：

<script type="text/javascript" src="http://malsup.github.io/min/jquery.blockUI.min.js"></script>

 
 
1

用法很简单，阻止用户对页面的交互：

$.blockUI();

 
 
1

使用自定义信息阻塞UI：

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

 
 
1

使用自定义样式阻塞UI：

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

 
 
1

解除对页面的遮罩：

$.unblockUI();

 
 
1

如果你想要使用缺省设置对所有的ajax请求都使用UI遮罩，只需添加下面的语句即可：

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

 
 
1

重要地方

我项目中使用的方式是如下：

$(".update").click(function(){

if(window.confirm("您确定禁用这个用户账号吗？")){

    $blockUI.defaults.message='<h2 style="font-size:16px"><img src="<%=path%>/image/busy.gif"/>正在处理中.......<h2>'//自定义默认情况！！！！

    $blockUI(); -----------------------------------//使用

    var userId = $(this).attr("name");

    var state = 1;

    $ajax(

        url:'<%=path%>/system/userManage.do?method=update',

        type:'post',

        data:{userId:userId,state:state},

        dataType:'text',

        error:function(){

                alert("用户账号出问题了")

        },

        success:function(data){

        $unblockUI();---------------------------------------------//关闭

         alert("用户账号禁用成功")

        }

    )

}

}

)

详细的可以参考：http://bookshadow.com/weblog/2014/09/26/jquery-blockui-js-introduction/