前言

使用$.messager.defaults重寫(xiě)默認(rèn)值對(duì)象。下載該插件翻譯源碼

消息窗口提供了不同的消息框風(fēng)格，包含alert(警告框), confirm(確認(rèn)框), prompt(提示框), progress(進(jìn)度框)等。所有的消息框都是異步的。用戶可以在交互消息之后使用回調(diào)函數(shù)去處理結(jié)果或做一些自己需要處理的事情。

源碼

/*** 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);};//在屏幕右下角顯示一條消息窗口。該選項(xiàng)參數(shù)是一個(gè)可配置的對(duì)象：//showType：定義將如何顯示該消息。可用值有：null,slide,fade,show。默認(rèn)：slide。//showSpeed：定義窗口顯示的過(guò)度時(shí)間。默認(rèn)：600毫秒。//width：定義消息窗口的寬度。默認(rèn)：250px。//height：定義消息窗口的高度。默認(rèn)：100px。//title：在頭部面板顯示的標(biāo)題文本。//msg：顯示的消息文本。//style：定義消息窗體的自定義樣式。//timeout：如果定義為0，消息窗體將不會(huì)自動(dòng)關(guān)閉，除非用戶關(guān)閉他。如果定義成非0的樹(shù)，消息窗體將在超時(shí)后自動(dòng)關(guān)閉。默認(rèn)：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;};//創(chuàng)建對(duì)話框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 = {//在屏幕右下角顯示一條消息窗口。該選項(xiàng)參數(shù)是一個(gè)可配置的對(duì)象：//showType：定義將如何顯示該消息。可用值有：null,slide,fade,show。默認(rèn)：slide。//showSpeed：定義窗口顯示的過(guò)度時(shí)間。默認(rèn)：600毫秒。//width：定義消息窗口的寬度。默認(rèn)：250px。//height：定義消息窗口的高度。默認(rèn)：100px。//title：在頭部面板顯示的標(biāo)題文本。//msg：顯示的消息文本。//style：定義消息窗體的自定義樣式。//timeout：如果定義為0，消息窗體將不會(huì)自動(dòng)關(guān)閉，除非用戶關(guān)閉他。如果定義成非0的樹(shù)，消息窗體將在超時(shí)后自動(dòng)關(guān)閉。默認(rèn)：4秒show: function (options) {return _showMassager(options);},//顯示警告窗口。參數(shù)：//title：在頭部面板顯示的標(biāo)題文本。//msg：顯示的消息文本。//icon：顯示的圖標(biāo)圖像。可用值有：error,question,info,warning。//fn: 在窗口關(guān)閉的時(shí)候觸發(fā)該回調(diào)函數(shù)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;},//顯示一個(gè)包含“確定”和“取消”按鈕的確認(rèn)消息窗口。參數(shù)：//title：在頭部面板顯示的標(biāo)題文本。//msg：顯示的消息文本。//fn(b): 當(dāng)用戶點(diǎn)擊“確定”按鈕的時(shí)侯將傳遞一個(gè)true值給回調(diào)函數(shù)，否則傳遞一個(gè)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;},//顯示一個(gè)用戶可以輸入文本的并且?guī)А按_定”和“取消”按鈕的消息窗體。參數(shù)：//title：在頭部面板顯示的標(biāo)題文本。//msg：顯示的消息文本。//fn(val): 在用戶輸入一個(gè)值參數(shù)的時(shí)候執(zhí)行的回調(diào)函數(shù)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;},//顯示一個(gè)進(jìn)度消息窗體。//屬性定義為：//title：在頭部面板顯示的標(biāo)題文本。默認(rèn)：空。//msg：顯示的消息文本。默認(rèn)：空。 //text：在進(jìn)度條上顯示的文本。默認(rèn)：undefined。//interval：每次進(jìn)度更新的間隔時(shí)間。默認(rèn)：300毫秒。//方法定義為：//bar：獲取進(jìn)度條對(duì)象。//close：關(guān)閉進(jìn)度窗口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;}};//默認(rèn)屬性$.messager.defaults = {ok: "Ok",//確定按鈕文本cancel: "Cancel"//取消按鈕文本
    };
})(jQuery);

View Code

?

示例代碼

<!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>

View Code

?

插件效果

轉(zhuǎn)載于:https://www.cnblogs.com/DemoLee/p/3500791.html

總結(jié)

以上是生活随笔為你收集整理的easyui源码翻译1.32--Messager（消息窗口）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。