/*** jQuery EasyUI 1.3.2* *翻译 ：qq 1364386878 消息窗口*/
(function ($) {function show(el, type, speed, timeout) {var win = $(el).window("window");if (!win) {return;}switch (type) {case null:win.show();break;case "slide":win.slideDown(speed);break;case "fade":win.fadeIn(speed);break;case "show":win.show(speed);break;}var timer = null;if (timeout > 0) {timer = setTimeout(function () {hide(el, type, speed);}, timeout);}win.hover(function () {if (timer) {clearTimeout(timer);}}, function () {if (timeout > 0) {timer = setTimeout(function () {hide(el, type, speed);}, timeout);}});};function hide(el, type, speed) {if (el.locked == true) {return;}el.locked = true;var win = $(el).window("window");if (!win) {return;}switch (type) {case null:win.hide();break;case "slide":win.slideUp(speed);break;case "fade":win.fadeOut(speed);break;case "show":win.hide(speed);break;}setTimeout(function () {$(el).window("destroy");}, speed);};//在屏幕右下角显示一条消息窗口。该选项参数是一个可配置的对象：//showType：定义将如何显示该消息。可用值有：null,slide,fade,show。默认：slide。//showSpeed：定义窗口显示的过度时间。默认：600毫秒。//width：定义消息窗口的宽度。默认：250px。//height：定义消息窗口的高度。默认：100px。//title：在头部面板显示的标题文本。//msg：显示的消息文本。//style：定义消息窗体的自定义样式。//timeout：如果定义为0，消息窗体将不会自动关闭，除非用户关闭他。如果定义成非0的树，消息窗体将在超时后自动关闭。默认：4秒function _showMassager(_c) {var options = $.extend({}, $.fn.window.defaults, {collapsible: false,minimizable: false,maximizable: false,shadow: false,draggable: false,resizable: false,closed: true,style: {left: "",top: "",right: 0,zIndex: $.fn.window.defaults.zIndex++,bottom: -document.body.scrollTop - document.documentElement.scrollTop},onBeforeOpen: function () {show(this, options.showType, options.showSpeed, options.timeout);return false;},onBeforeClose: function () {hide(this, options.showType, options.showSpeed);return false;}},{title: "",width: 250,height: 100,showType: "slide",showSpeed: 600,msg: "",timeout: 4000}, _c);options.style.zIndex = $.fn.window.defaults.zIndex++;var body = $("<div class=\"messager-body\"></div>").html(options.msg).appendTo("body");body.window(options);body.window("window").css(options.style);body.window("open");return body;};//创建对话框function createDialog(title, content, buttons) {var win = $("<div class=\"messager-body\"></div>").appendTo("body");win.append(content);if (buttons) {var tb = $("<div class=\"messager-button\"></div>").appendTo(win);for (var button in buttons) {$("<a></a>").attr("href", "javascript:void(0)").text(button).css("margin-left", 10).bind("click", eval(buttons[button])).appendTo(tb).linkbutton();}}win.window({title: title,noheader: (title ? false : true),width: 300,height: "auto",modal: true,collapsible: false,minimizable: false,maximizable: false,resizable: false,onClose: function () {setTimeout(function () {win.window("destroy");}, 100);}});win.window("window").addClass("messager-window");win.children("div.messager-button").children("a:first").focus();return win;};//方法配置$.messager = {//在屏幕右下角显示一条消息窗口。该选项参数是一个可配置的对象：//showType：定义将如何显示该消息。可用值有：null,slide,fade,show。默认：slide。//showSpeed：定义窗口显示的过度时间。默认：600毫秒。//width：定义消息窗口的宽度。默认：250px。//height：定义消息窗口的高度。默认：100px。//title：在头部面板显示的标题文本。//msg：显示的消息文本。//style：定义消息窗体的自定义样式。//timeout：如果定义为0，消息窗体将不会自动关闭，除非用户关闭他。如果定义成非0的树，消息窗体将在超时后自动关闭。默认：4秒show: function (options) {return _showMassager(options);},//显示警告窗口。参数：//title：在头部面板显示的标题文本。//msg：显示的消息文本。//icon：显示的图标图像。可用值有：error,question,info,warning。//fn: 在窗口关闭的时候触发该回调函数alert: function (title, msg, icon, fn) {var content = "<div>" + msg + "</div>";switch (icon) {case "error":content = "<div class=\"messager-icon messager-error\"></div>" + content;break;case "info":content = "<div class=\"messager-icon messager-info\"></div>" + content;break;case "question":content = "<div class=\"messager-icon messager-question\"></div>" + content;break;case "warning":content = "<div class=\"messager-icon messager-warning\"></div>" + content;break;}content += "<div style=\"clear:both;\"/>";var buttons = {};buttons[$.messager.defaults.ok] = function () {win.window("close");if (fn) {fn();return false;}};var win = createDialog(title, content, buttons);return win;},//显示一个包含“确定”和“取消”按钮的确认消息窗口。参数：//title：在头部面板显示的标题文本。//msg：显示的消息文本。//fn(b): 当用户点击“确定”按钮的时侯将传递一个true值给回调函数，否则传递一个false值。confirm: function (title, msg, fn) {var content = "<div class=\"messager-icon messager-question\"></div>" + "<div>" + msg + "</div>" + "<div style=\"clear:both;\"/>";var buttons = {};buttons[$.messager.defaults.ok] = function () {win.window("close");if (fn) {fn(true);return false;}};buttons[$.messager.defaults.cancel] = function () {win.window("close");if (fn) {fn(false);return false;}};var win = createDialog(title, content, buttons);return win;},//显示一个用户可以输入文本的并且带“确定”和“取消”按钮的消息窗体。参数：//title：在头部面板显示的标题文本。//msg：显示的消息文本。//fn(val): 在用户输入一个值参数的时候执行的回调函数prompt: function (title, msg, fn) {var content = "<div class=\"messager-icon messager-question\"></div>" + "<div>" + msg + "</div>" + "<br/>" + "<div style=\"clear:both;\"/>" + "<div><input class=\"messager-input\" type=\"text\"/></div>";var buttons = {};buttons[$.messager.defaults.ok] = function () {win.window("close");if (fn) {fn($(".messager-input", win).val());return false;}};buttons[$.messager.defaults.cancel] = function () {win.window("close");if (fn) {fn();return false;}};var win = createDialog(title, content, buttons);win.children("input.messager-input").focus();return win;},//显示一个进度消息窗体。//属性定义为：//title：在头部面板显示的标题文本。默认：空。//msg：显示的消息文本。默认：空。 //text：在进度条上显示的文本。默认：undefined。//interval：每次进度更新的间隔时间。默认：300毫秒。//方法定义为：//bar：获取进度条对象。//close：关闭进度窗口progress: function (options) {var methods = {bar: function () {return $("body>div.messager-window").find("div.messager-p-bar");},close: function () {var win = $("body>div.messager-window>div.messager-body:has(div.messager-progress)");if (win.length) {win.window("close");}}};if (typeof options == "string") {var method = methods[options];return method();}var opts = $.extend({ title: "", msg: "", text: undefined, interval: 300 }, options || {});var pbar = "<div class=\"messager-progress\"><div class=\"messager-p-msg\"></div><div class=\"messager-p-bar\"></div></div>";var win = createDialog(opts.title, pbar, null);win.find("div.messager-p-msg").html(opts.msg);var bar = win.find("div.messager-p-bar");bar.progressbar({ text: opts.text });win.window({closable: false, onClose: function () {if (this.timer) {clearInterval(this.timer);}$(this).window("destroy");}});if (opts.interval) {win[0].timer = setInterval(function () {var v = bar.progressbar("getValue");v += 10;if (v > 100) {v = 0;}bar.progressbar("setValue", v);}, opts.interval);}return win;}};//默认属性$.messager.defaults = {ok: "Ok",//确定按钮文本cancel: "Cancel"//取消按钮文本
    };
})(jQuery);

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Basic Messager - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../../themes/icon.css"><link rel="stylesheet" type="text/css" href="../demo.css"><script type="text/javascript" src="../../jquery-1.8.0.min.js"></script><script src="../../plugins/jquery.parser.js"></script><script src="../../plugins/jquery.linkbutton.js"></script><script src="../../plugins/jquery.draggable.js"></script><script src="../../plugins/jquery.resizable.js"></script><script src="../../plugins/jquery.panel.js"></script><script src="../../plugins/jquery.window.js"></script><script src="../../plugins/jquery.progressbar.js"></script><script src="../../plugins/jquery.messager.js"></script>
</head>
<body><h2>Basic Messager</h2><div class="demo-info"><div class="demo-tip icon-tip"></div><div>Click on each button to see a distinct message box.</div></div><div style="margin:10px 0;"><a href="#" class="easyui-linkbutton" onclick="show()">Show</a><a href="#" class="easyui-linkbutton" onclick="slide()">Slide</a><a href="#" class="easyui-linkbutton" onclick="fade()">Fade</a><a href="#" class="easyui-linkbutton" onclick="progress()">Progress</a></div><script type="text/javascript">function show(){$.messager.show({title:'My Title',msg:'Message will be closed after 4 seconds.',showType:'show'});}function slide(){$.messager.show({title:'My Title',msg:'Message will be closed after 5 seconds.',timeout:5000,showType:'slide'});}function fade(){$.messager.show({title:'My Title',msg:'Message never be closed.',timeout:0,showType:'fade'});}function progress(){var win = $.messager.progress({title:'Please waiting',msg:'Loading data...'});setTimeout(function(){$.messager.progress('close');},5000)}</script>
</body>
</html>