jQuery遮罩插件jQuery.blockUI.js簡介

 

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>

 

用法很簡單，阻止用戶對頁面的交互：

$.blockUI();

 

使用自定義信息阻塞UI：

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

 

使用自定義樣式阻塞UI：

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

 

解除對頁面的遮罩：

$.unblockUI();

 

如果你想要使用缺省設置對所有的ajax請求都使用UI遮罩，只需添加下面的語句即可：

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

 

 

本文轉自：http://bookshadow.com/weblog/2014/09/26/jquery-blockui-js-introduction/