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