easyui源码翻译1.32--Messager（消息窗口）

前言

使用$.messager.defaults重写默认值对象。下载该插件翻译源码

消息窗口提供了不同的消息框风格，包含alert(警告框), confirm(确认框), prompt(提示框), progress(进度框)等。所有的消息框都是异步的。用户可以在交互消息之后使用回调函数去处理结果或做一些自己需要处理的事情。

源码

/**
 * 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>

插件效果