Easy UI 遮罩

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');

效果如下:

image

注意,三個屬性不是必選的。屬性 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); 
        } 
    }); 
};

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章