一、遮罩用途及效果
ShowLoading這個(gè)jQuery插件設(shè)計(jì)用于當(dāng)運(yùn)行Ajax請(qǐng)求時(shí)，可以在屏幕某一特殊區(qū)域(id,class或者h(yuǎn)tml標(biāo)簽)覆一張正在加載中的圖片。
有時(shí)候我們頁面調(diào)用后臺(tái)程序時(shí)間比較長時(shí)，前臺(tái)頁面暴露在用戶之下，如果用戶點(diǎn)擊可能會(huì)造成邏輯混亂。這時(shí)候，遮罩就起到了很好的效果，在觸發(fā)后臺(tái)程序時(shí)我們將前臺(tái)頁面遮住，不讓操作，同時(shí)給予一個(gè)程序運(yùn)行請(qǐng)等待的效果。
遮罩效果：
二、JQuery遮罩UI實(shí)現(xiàn)
showLoading.css
jquery.showLoading.js
<link href="style/showLoading.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.showLoading.min.js"></script>
三、使用方法
假設(shè)html頁面有有一個(gè)class為add_test_img的標(biāo)簽，需要通過ajax訪問后臺(tái)，并在add_test_img標(biāo)簽中顯示一些相關(guān)內(nèi)容，在內(nèi)容顯示之前，可對(duì)add_test_img標(biāo)簽使用遮罩，防止在數(shù)據(jù)顯示之前，被修改其中的內(nèi)容
復(fù)制代碼
//顯示遮罩
$(".add_test_img").showLoading();
//ajax調(diào)用
$.ajax({
type: "GET",
url: "Api.php",
data: {ApiTarget: 'TestImage', op: 'paginateByClassId', prj_id: prj_id, class_id:class_id, page: index, per_page: items_per_page, user_id: user_id, start_date:start_date_str, end_date:end_date_str},
success: function(response){
//對(duì)返回?cái)?shù)據(jù)進(jìn)行處理，并顯示
//......
//去除遮罩
$(".add_test_img").hideLoading();
},
error: function(xhr) {
//顯示失敗信息
//......
//去除遮罩
$(".add_test_img").hideLoading();
}
});