没想到，我那个代码，自我感觉还可以，主管看了一眼就否定了，
说完全没有拓展性。他说他来改。然后变成这个样子了。这个代码的关键点是这个 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">×</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;
}
})
})
4517
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
