Query EasyUI 消息框Messager和Loading加載效果

Loading效果

方法一

//采用jquery easyui loading css效果 
function ajaxLoading(){ 
　　$("<div class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body"); 
　　$("<div class=\"datagrid-mask-msg\"></div>").html("正在處理，請稍候。。。").appendTo("body").css({display:"block",left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2}); 
} 
function ajaxLoadEnd(){ 
　　$(".datagrid-mask").remove(); 
　　$(".datagrid-mask-msg").remove(); 
}

$.ajax({ 
　　type: 'POST', 
　　dataType : 'json',
　　url: url, 
　　data: param, 
　　beforeSend: ajaxLoading,//發送請求前打開進度條
　　success: function(json){ 
　　ajaxLoadEnd();//任務執行成功，關閉進度條
　　} 
});

原文：http://blog.csdn.net/wwwyuanliang10000/article/details/22577579

方法二

(function () {
　　$.extend($.fn.tabs.methods, {
　　　　//顯示遮罩
　　　　loading: function (jq, msg) {
　　　　return jq.each(function () {
　　　　var panel = $(this).tabs("getSelected");
　　　　if (msg == undefined) {
　　　　msg = "正在加載數據，請稍候...";
　　　　}
　　　　$("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: panel.width(), height: panel.height() }).appendTo(panel);
　　　　$("<div class=\"datagrid-mask-msg\"></div>").html(msg).appendTo(panel).css({ display: "block", left: (panel.width() - $("div.datagrid-mask-msg", panel).outerWidth()) / 2, top: (panel.height() - $("div.datagrid-mask-msg", panel).outerHeight()) / 2 });
　　　　});
　　}
　　,
　　//隱藏遮罩
　　loaded: function (jq) {
    　　return jq.each(function () {
    　　var panel = $(this).tabs("getSelected");
    　　panel.find("div.datagrid-mask-msg").remove();
    　　panel.find("div.datagrid-mask").remove();
　　});
}
});
})(jQuery);

 

使用方法：

顯示遮罩：$("#tabID").tabs("loading",msg) msg--要顯示的信息

隱藏遮罩：$("#tabID").tabs("loaded")

原文：http://blog.csdn.net/littlewolf766/article/details/7331973

 

Messager

Query EasyUI Messager基本使用（消息框）

參考鏈接：http://www.cnblogs.com/libingql/archive/2011/07/17/2109020.html

Common.ShowInfo = function (str) {
    $.messager.alert('系統提示', str, 'info');
};
Common.ShowError = function (str) {
    $.messager.alert('系統提示', str, 'error');
};
Common.ShowWarning = function (str) {
    $.messager.alert('系統提示', str, 'warning');
};

Common.ShowQuestion = function (str) {
    $.messager.alert('系統提示', str, 'question');
};

$.messager.confirm('系統提示', "確認要值機刪除嗎？", function (data) {
            if (data) {//"確定"、"是"
                //代碼
            }
            else {
                return;
            }
        });

 

 

方法

名稱	參數	說明
$.messager.show	options	在屏幕的右下角顯示一個消息窗口，options 是一個配置對象： showType： 定義消息窗口如何顯示。可用的值是： null、slide、fade、show。默認是 slide。 showSpeed： 定義消息窗口完成顯示所需的以毫秒為單位的時間。默認是 600。 width： 定義消息窗口的寬度。默認是250。 height： 定義消息窗口的高度。默認是100。 msg： 顯示的消息文字。 title： 頭部面板上顯示的標題文字。 timeout： 如果定義為 0，除非用戶關閉，消息窗口將不會關閉。如果定義為非 0 值，消息窗口將在超時后自動關閉。
$.messager.alert	title, msg, icon, fn	顯示一個提示窗口。參數： title： 顯示在頭部面板的標題文字。 msg： 顯示的消息文字。 icon： 顯示圖標的圖片。可用的值是： error、question、info、warning。 fn： 窗口關閉時觸發的回調函數。
$.messager.confirm	title, msg, fn	顯示一個帶“確定”和“取消”按鈕的確認消息。參數： title： 顯示在頭部面板上的標題文字。 msg： 顯示的消息文字。 fn(b)： 回調函數，當用戶點擊確認按鈕時傳遞一個 true 參數，否則給它傳遞一個 false 參數。
$.messager.prompt	title, msg, fn	顯示一個帶確定和取消按鈕的消息窗口，提示用戶輸入一些文字。參數： title： 顯示在頭部面板上的標題文字。 msg： 顯示的消息文字。 fn(val)：回調函數，使用用戶輸入的數值參數。
$.messager.progress	options or method	顯示一個進度的消息窗口。 options 這樣定義： title： 顯示在頭部面板上的標題文字，默認值是 '' 。 msg： 消息框的文本，默認值是 '' 。 text： 顯示在進度條里的文字，默認值是 undefined 。 interval： 每次進度更新之間以毫秒為單位的時間長度。默認值是 300 。 方法這樣定義： bar： 獲取 progressbar 對象。 close： 關閉進度窗口。 代碼示例 顯示進度消息窗口：           $.messager.progress(); 現在關閉消息窗口：           $.messager.progress('close');