Easy UI 的各類控件有些帶了遮罩功能,如 DataGrid,可以這樣使用:
//顯示遮罩
$("#dg").datagrid("loading", "數據加載中……");
//隱藏遮罩
$("#dg").datagrid("loaded");
在有些情況下,我們不能直接使用控件本身的遮罩效果,比如:
1:有些控件則沒有這樣的屬性,比如 Tabs;
2:頁面初始加載時;
3:通過 Ajax 異步獲取數據並刷新當前頁面;
這個時候,就要採用另外的辦法來進行遮罩。有一個方案是,使用:
//開啓遮罩
$.messager.progress({
title: 'Please waiting',
msg: 'Loading data...',
text: 'PROCESSING.......'
});
//關閉遮罩
$.messager.progress('close');
效果如下:
注意,三個屬性不是必選的。屬性 title 和 msg 如果不設置,則畫面中 1 和 2 不顯示,屬性 text 不設置,則 3 處顯示的一個自動變化的百分比。
以下是一個示例:
var step1Ok = function () {
$.messager.progress({
title: 'Please waiting',
msg: 'Loading data...',
text: 'PROCESSING.......'
});
$.ajax({
type: "GET",
url: "@ViewBag.Domain/Paper/GetQuestionUnit",
success: function (data) {
$.messager.progress('close');
alert(data);
}
});
};