jquery.dialog.js

/*!
 * 通用对话框
 * @author shajunxing
 * @version 0.0.0.0
 */

(function ($) {
    /* 对话框类型，决定图标类型
     * 默认按钮为：
     * 空：[确定]
     * 信息：[确定]
     * 警告：[确定]
     * 错误：[确定]
     * 请选择：[是，否]
     */
    $.DIALOG_TYPE_NONE = '';
    $.DIALOG_TYPE_SUCCESS = '成功';
    $.DIALOG_TYPE_INFORMATION = '信息';
    $.DIALOG_TYPE_WARNING = '警告';
    $.DIALOG_TYPE_ERROR = '错误';
    $.DIALOG_TYPE_QUESTION = '请选择';

    // 对话框按钮
    $.DIALOG_BUTTON_OK = '确定';
    $.DIALOG_BUTTON_CANCEL = '取消';
    $.DIALOG_BUTTON_YES = '是';
    $.DIALOG_BUTTON_NO = '否';

    // 对话框按钮组合，注意要反转，因为对话框按钮是向右排列的
    $.DIALOG_BUTTONS_NONE = [];
    $.DIALOG_BUTTONS_OK = [$.DIALOG_BUTTON_OK];
    $.DIALOG_BUTTONS_OK_CANCEL = [$.DIALOG_BUTTON_CANCEL, $.DIALOG_BUTTON_OK];
    $.DIALOG_BUTTONS_YES_NO = [$.DIALOG_BUTTON_NO, $.DIALOG_BUTTON_YES];
    $.DIALOG_BUTTONS_YES_NO_CANCEL = [$.DIALOG_BUTTON_CANCEL, $.DIALOG_BUTTON_NO, $.DIALOG_BUTTON_YES];

    $.dialog = function (message, title, type, buttons, onClose) {
        // 待返回的对话框对象
        var obj = {};

        obj.onClose = onClose;

        obj.close = function (button) {
            $(document).unbind('keyup', obj.keyUp);
            obj.overlay.remove();
            if (obj.onClose && typeof obj.onClose == 'function') {
                obj.onClose(button);
            }
        };

        // ESC关闭对话框
        obj.keyUp = function (e) {
            // ESC关闭对话框统一返回DIALOG_BUTTON_CANCEL
            if (e.which == 27) obj.close($.DIALOG_BUTTON_CANCEL);
            return true;
        };

        // 覆盖层
        obj.overlay = jQuery('<div>', {
            'class':'dialog_overlay'
        });

        // 对话框
        var dialog = jQuery('<div>', {
            'class':'dialog'
        });

        dialog.appendTo(obj.overlay);

        // 根据类型决定默认的图标、按钮、标题
        var _title = null;
        var _class = null;
        var _buttons = null;
        switch (type) {
            case $.DIALOG_TYPE_SUCCESS:
                _title = null;
                _class = 'dialog_body dialog_icon dialog_success';
                _buttons = $.DIALOG_BUTTONS_OK;
                break;
            case $.DIALOG_TYPE_INFORMATION:
                _title = null;
                _class = 'dialog_body dialog_icon dialog_information';
                _buttons = $.DIALOG_BUTTONS_OK;
                break;
            case $.DIALOG_TYPE_WARNING:
                _title = null;
                _class = 'dialog_body dialog_icon dialog_warning';
                _buttons = $.DIALOG_BUTTONS_OK;
                break;
            case $.DIALOG_TYPE_ERROR:
                _title = null;
                _class = 'dialog_body dialog_icon dialog_error';
                _buttons = $.DIALOG_BUTTONS_OK;
                break;
            case $.DIALOG_TYPE_QUESTION:
                _title = null;
                _class = 'dialog_body dialog_icon dialog_question';
                _buttons = $.DIALOG_BUTTONS_OK_CANCEL;
                break;
            default:
                _title = null;
                _class = 'dialog_body';
                _buttons = $.DIALOG_BUTTONS_OK;
                break;
        }
        // 如果有自定义标题
        if (title) {
            _title = title;
        }
        // 如果有自定义按钮
        if (buttons && $.isArray(buttons)) {
            _buttons = buttons;
        }

        if (_title) {
            jQuery('<div>', {
                'class':'dialog_title'
            }).html(_title).appendTo(dialog);
        }

        var _message = jQuery('<div>', {
            'class':_class
        });

        jQuery('<div>').html(message).appendTo(_message);

        _message.appendTo(dialog);

        // 按钮
        if (_buttons != $.DIALOG_BUTTONS_NONE) {
            var button_bar = jQuery('<div>', {
                'class':'dialog_buttons'
            }).appendTo(dialog);
            $.each(_buttons, function (index, value) {
                jQuery('<a>', {
                    'href':'javascript:void(0)',
                    'class':'dialog_button' + index
                }).html(value).bind('click',
                    function () {
                        obj.close(value)
                    }).appendTo(button_bar);
            });
        }

        jQuery('<div>', {
            'style':'clear:both'
        }).appendTo(button_bar);

        $(document).bind('keyup', obj.keyUp);

        obj.overlay.appendTo('body');
    };

    // 一些预定义的对话框
    $.dialogSuccess = function (message) {
        $.dialog(message, null, $.DIALOG_TYPE_SUCCESS);
    };
    $.dialogInformation = function (message) {
        $.dialog(message, null, $.DIALOG_TYPE_INFORMATION);
    };
    $.dialogWarning = function (message) {
        $.dialog(message, null, $.DIALOG_TYPE_WARNING);
    };
    $.dialogError = function (message) {
        $.dialog(message, null, $.DIALOG_TYPE_ERROR);
    };
    $.dialogConfirm = function (message, onOk) {
        $.dialog(message, null, $.DIALOG_TYPE_QUESTION, null, function(button) {
            if ((button == $.DIALOG_BUTTON_OK) && onOk) {
                onOk();
            }
        });
    };

})(jQuery);