自制的超好用jQ插件，弹层，模态窗口插件2

来源：互联网发布：sql注入编辑：程序博客网时间：2024/06/05 01:54
没想到，我那个代码，自我感觉还可以，主管看了一眼就否定了，
说完全没有拓展性。他说他来改。然后变成这个样子了。这个代码的关键点是这个 return dialogObj;
下面是代码给大家分享下，看看插件是如何写的。
define(['jquery'], function($){    "use strict";    $.extend({        /**          * 属性类参数：          * type: loading|msg(自定义HTML内容)          * timeout: 超时自动关闭（毫秒）          * title: 标题          * content: 内容          * class: 弹出框class          * width: 弹出框宽度          * height: 弹出框高度          * style: 弹出框内联样式          * noButtons: 是否需要按钮，默认false          *          * 事件类参数：          * init: 弹出框插入body时          * confrim: 用户点击确认时          * close: 弹出框点击关闭时          * show: 弹出框显示时          * hide: 弹出框隐藏时          *          * 按钮类buttons：          * name: 按钮文字          * btnClass: 按钮样式名          * click: 按钮点击事件          * close: true|false 是否在点击后关闭弹出框          */        dialog: function(setting){            if('string' == typeof(setting) ){                var tmp = {};                tmp.type = 'msg';                tmp.content = setting;                setting = tmp;            }            //事件回调            var _events = {                init: setting.init || function(){},                confirm: setting.confirm || function(){},                concel: setting.concel || function(){},                close: setting.close || function(){},                show: setting.show || function(){},                hide: setting.hide || function(){},            };            //属性            var _type       = setting.type || 'msg',                _timeout    = setting.timeout || 0,                _title      = setting.title || '提示',                _content    = setting.content || "",                _class      = setting.class || "",                _width      = setting.width || '',                _height     = setting.height || '',                _style      = setting.style || ";",                _buttons    = setting.buttons || [],                _noButtons  = setting.noButtons ||false;            //dialog的dom和对象            var dialogDom, dialogObj = {};            dialogObj.resize = function(){                _width = dialogDom.find('.modal-dialog').outerWidth();                // 判断内容层宽度设置居中                if ((_width != undefined && _width != "") || _style.indexOf("width") != -1) {                    _width = dialogDom.children('.modal-dialog').css("width");                    var m_left;                    switch (_width.replace(/[0-9]/g, "")) {                        case "px":                            m_left = -Number(_width.slice(0, -2)) / 2 + "px";                            dialogDom.children('.modal-dialog').css("margin-left", m_left);                            break;                        case "em":                            m_left = -Number(_width.slice(0, -2)) / 2 + "em";                            dialogDom.children('.modal-dialog').css("margin-left", m_left);                            break;                        case "rem":                            m_left = -Number(_width.slice(0, -3)) / 2 + "rem";                            dialogDom.children('.modal-dialog').css("margin-left", m_left);                            break;                        case "%":                            m_left = -Number(_width.slice(0, -1)) / 2 + "%";                            dialogDom.children('.modal-dialog').css("margin-left", m_left);                            break;                    }                }                _height = dialogDom.find('.modal-dialog').outerHeight();                //判断内容层高度设置居中                    if ((_height != undefined && _height != "") || _style.indexOf("height") != -1) {                    _height = dialogDom.children('.modal-dialog').css("height");                    var m_top;                    switch (_height.replace(/[0-9]/g, "")) {                        case "px":                            m_top = -Number(_height.slice(0, -2)) / 2 + "px";                            dialogDom.children('.modal-dialog').css("margin-top", m_top);                            break;                        case "em":                            m_top = -Number(_height.slice(0, -2)) / 2 + "em";                            dialogDom.children('.modal-dialog').css("margin-top", m_top);                            break;                        case "rem":                            m_top = -Number(_height.slice(0, -3)) / 2 + "rem";                            dialogDom.children('.modal-dialog').css("margin-top", m_top);                            break;                        case "%":                            m_top = -Number(_height.slice(0, -1)) / 2 + "%";                            dialogDom.children('.modal-dialog').css("margin-left", m_top);                            break;                    }                }            }            dialogObj.append = function(dialogHtml){                dialogDom = $('<div class="modal-wrap">' + dialogHtml + '<div class="modal-bg"></div></div>');                dialogObj.hide();                $('body').append(dialogDom);                _events.init(dialogDom);                return dialogObj;            }            dialogObj.show = function(){                dialogDom.show();                $('body').addClass('noscroll');                _events.show(dialogDom, dialogObj);                dialogDom.find('.btn-focus').focus();                return dialogObj;            }            dialogObj.hide = function(){                dialogDom.hide();                if($('.modal-wrap') <= 1){                    $('body').removeClass('noscroll')                }                _events.hide(dialogDom, dialogObj);                return dialogObj;            }            dialogObj.close = function(){                dialogObj.hide();                dialogDom.remove();                _events.close();                return dialogObj;            }            if( _type == 'msg' && _buttons.length < 1 &&_noButtons == false){                _buttons = [{name: '确认', btnClass: 'dialog-ok', click: _events.confirm, focus: true}]            }               var buttonsHtml = [];            $(_buttons).each(function(i){                this.btnClass += _buttons[i].focus? ' btn-focus' : '';                buttonsHtml.push('<a href="javascript:void(0)" data-btn-index="' + i + '" class="btn dialog-default '+ this.btnClass  + '">' + this.name + '</a>');            })            buttonsHtml = buttonsHtml.join('\n');            var dialogHtml = '';            switch(_type){                case 'loading':                    dialogHtml = '<div class="modal-loadimg">\n'                               + '    <img src="images/gears.gif" alt="">\n'                               + '    <p class="load-text">正在读取数据...</p>\n'                               + '</div>\n';                    break;                case 'msg':                    dialogHtml = '<div class="modal-dialog dialog-tipsbox '+ _class + '" style="' + 'width:' + _width + ';height:' + _height + ';'+_style + '">'                               + '    <h4 class="modal-title">'                               + '        <i class="fa fa-info-circle"></i>'                               + '        <span class="dialog-title">' + _title + '</span>'                               + '        <span class="modal-close">&#215;</span>'                               + '    </h4>'                                + '  <div class="modal-inner">'                               + '        <div class="dialog-text">' + _content + '</div>'                                + '        <div class="dialog-btn-group">'+ buttonsHtml +'</div>\n'                                + '  </div>\n'                                + '</div>';                    break;                default:                    break;            }            dialogObj.append(dialogHtml)            dialogDom.find('.dialog-btn-group > a').each(function(){                var button = $(this);                var i = button.attr('data-btn-index');                button.click(function(){                    _buttons[i].click();                    if(typeof(_buttons[i].close) == 'undefined' ||  _buttons[i].close){                        dialogObj.close()                    }                });            })            //使title可以拖动。            var title = dialogDom.find('.modal-title');            var move = false; //移动标记             var _x,                _y,//鼠标离控件左上角的相对位置                 x,                 y; //对话框实时的位置            title.mousedown(function(e) {                move = true;                _x = e.pageX - parseInt(dialogDom.css("left"));                _y = e.pageY - parseInt(dialogDom.css("top"));            });            $(document).mousemove(function(e) {                if (move) {                    x = e.pageX - _x; //控件左上角到屏幕左上角的相对位置                     y = e.pageY - _y;                    dialogDom.css({                        "top": y,                        "left": x                    });                }            }).mouseup(function() {                move = false;            });            dialogDom.find('.dialog-ok').focus();            dialogDom.find('.modal-close').click(function() {                dialogObj.close(); // 传this到function            });            dialogObj.show();            if(_timeout > 0){                setTimeout(function(){                    dialogObj.close()                }, _timeout);            }            dialogObj.resize();            return dialogObj;        }    })})
0 0