是RIA架构的程序的基本组件 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); jquery.dialog.css .dialog_overlay { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: auto; background-color: rgba(0, 0, 0, 0.5); z-index: 2000; } .dialog { position: relative; margin: 0 auto; top: 120px; width: 420px; background-color: #fff; padding: 0; /* 仿OSX阴影 */ box-shadow: 0 15px 31px rgba(0, 0, 0, 0.5); border: 1px solid #555753; z-index: 2001; } .dialog .dialog_title { margin: 0; font-weight: bold; border-bottom: 1px solid #ccc; text-align: center; padding: 5px; height: 13px; line-height: 13px; } .dialog .dialog_body { background: 10px 10px no-repeat; padding: 10px; text-align: left; } .dialog .dialog_body > div { overflow: auto; margin-top: 12px; } /* 与图标相关 */ .dialog .dialog_icon { padding-left: 68px; min-height: 48px; } .dialog .dialog_success { background-image: url('../_images/success_48.png'); } .dialog .dialog_question { background-image: url('../_images/question_48.png'); } .dialog .dialog_information { background-image: url('../_images/information_48.png'); } .dialog .dialog_warning { background-image: url('../_images/warning_48.png'); } .dialog .dialog_error { background-image: url('../_images/error_48.png'); } .dialog .dialog_buttons { padding: 5px 5px 5px 10px; background-color: #ddedff; } .dialog .dialog_buttons a { text-decoration: none; float: right; margin-right: 5px; min-width: 80px; height: 20px; line-height: 20px; text-align: center; border-radius: 10px; color: #2e3436; background-color: #fff; border: 1px solid #39f; } .dialog .dialog_buttons a:hover { background-color: #9cf; } |