在 artDialog 窗口中追加最大化、最小化按钮

这些天做一个项目，使用了 artDialog 作为弹出窗口，将部分页面嵌入到窗口中，感觉操作起来还比较方便，但 artDialog 没有提供窗口最大化和最小化，这就比较烦人了，没办法，自己扩展吧

首先，我研究了一下，artDialog 的窗口关闭按钮，源码如下：

/*
* artDialog 4.1.6
* file:artDialog.source.js
*/
artDialog.fn = artDialog.prototype = {
/*
* 其他代码
*/
close: function () {
if (this.closed) return this;

var that = this,
DOM = that.DOM,
wrap = DOM.wrap,
list = artDialog.list,
fn = that.config.close,
follow = that.config.follow;

that.time();
if (typeof fn === 'function' && fn.call(that, window) === false) {
return that;
};

that.unlock();

// 置空内容
that._elemBack && that._elemBack();
wrap[0].className = wrap[0].style.cssText = '';
DOM.title.html('');
DOM.content.html('');
DOM.buttons.html('');

if (artDialog.focus === that) artDialog.focus = null;
if (follow) follow.removeAttribute(_expando + 'follow');
delete list[that.config.id];
that._removeEvent();
that.hide(true)._setAbsolute();

// 清空除this.DOM之外临时对象，恢复到初始状态，以便使用单例模式
for (var i in that) {
if (that.hasOwnProperty(i) && i !== 'DOM') delete that[i];
};

// 移除HTMLElement或重用
_box ? wrap.remove() : _box = that;

return that;
}
/*
* 其他代码
*/
}

然后仔细找了一下，发现关闭按钮是通过 html 模板定义的，定义同样在 artDialog.source.js 文件中，代码如下：

artDialog._templates =
'<div class="aui_outer">'
+	'<table class="aui_border">'
+		'<tbody>'
+			'<tr>'
+				'<td class="aui_nw"></td>'
+				'<td class="aui_n"></td>'
+				'<td class="aui_ne"></td>'
+			'</tr>'
+			'<tr>'
+				'<td class="aui_w"></td>'
+				'<td class="aui_c">'
+					'<div class="aui_inner">'
+					'<table class="aui_dialog">'
+						'<tbody>'
+							'<tr>'
+								'<td colspan="2" class="aui_header">'
+									'<div class="aui_titleBar">'
+										'<div class="aui_title"></div>'
+                                            '<a class="aui_close" onclick="javascript:/*artDialog*/;">'//href paul mod
+											'\xd7'
+										'</a>'
+									'</div>'
+								'</td>'
+							'</tr>'
+							'<tr>'
+								'<td class="aui_icon">'
+									'<div class="aui_iconBg"></div>'
+								'</td>'
+								'<td class="aui_main">'
+									'<div class="aui_content"></div>'
+								'</td>'
+							'</tr>'
+							'<tr>'
+								'<td colspan="2" class="aui_footer">'
+									'<div class="aui_buttons"></div>'
+								'</td>'
+							'</tr>'
+						'</tbody>'
+					'</table>'
+					'</div>'
+				'</td>'
+				'<td class="aui_e"></td>'
+			'</tr>'
+			'<tr>'
+				'<td class="aui_sw"></td>'
+				'<td class="aui_s"></td>'
+				'<td class="aui_se"></td>'
+			'</tr>'
+		'</tbody>'
+	'</table>'
+'</div>';

这里，我们发现 aui_close 样式被定义为关闭按钮

于是，修改这里的代码，追加两个 div 变成下边的代码：

artDialog._templates =
'<div class="aui_outer">'
+	'<table class="aui_border">'
+		'<tbody>'
+			'<tr>'
+				'<td class="aui_nw"></td>'
+				'<td class="aui_n"></td>'
+				'<td class="aui_ne"></td>'
+			'</tr>'
+			'<tr>'
+				'<td class="aui_w"></td>'
+				'<td class="aui_c">'
+					'<div class="aui_inner">'
+					'<table class="aui_dialog">'
+						'<tbody>'
+							'<tr>'
+								'<td colspan="2" class="aui_header">'
+									'<div class="aui_titleBar">'
+										'<div class="aui_title"></div>'
+                                            '<div class="aui_min" state="false"></div>'
+                                            '<div class="aui_max" state="false"></div>'
+                                            '<a class="aui_close" onclick="javascript:/*artDialog*/;">'//href paul mod
+											'\xd7'
+										'</a>'
+									'</div>'
+								'</td>'
+							'</tr>'
+							'<tr>'
+								'<td class="aui_icon">'
+									'<div class="aui_iconBg"></div>'
+								'</td>'
+								'<td class="aui_main">'
+									'<div class="aui_content"></div>'
+								'</td>'
+							'</tr>'
+							'<tr>'
+								'<td colspan="2" class="aui_footer">'
+									'<div class="aui_buttons"></div>'
+								'</td>'
+							'</tr>'
+						'</tbody>'
+					'</table>'
+					'</div>'
+				'</td>'
+				'<td class="aui_e"></td>'
+			'</tr>'
+			'<tr>'
+				'<td class="aui_sw"></td>'
+				'<td class="aui_s"></td>'
+				'<td class="aui_se"></td>'
+			'</tr>'
+		'</tbody>'
+	'</table>'
+'</div>';

在这里，我追加了两个 div ，样式分别定义为 aui_max 和 aui_min，具体样式请自行到相应的样式文件中修改，比如定义按钮图片之类的，这里就不细说了

在定义完成后，弹出新的窗口时，这两个按钮已经出现了，现在，我们需要对我们定义的按钮进行事件追加了

首先，我们在 close 方法附近追加一下代码，来作为最大化的方法实现

max: function () {
var that = this,
DOM = that.DOM;
var border = jQuery(DOM.content[0]); // 获取 artDialog 窗口的 iframe 对象
var max = jQuery(DOM.max[0]);        // 获取最大化按钮对象
if (max.attr('state') == 'false') {  // 判断是否已最大化
max.attr('_width', border.width());   // 记录当前窗口定义的宽度
max.attr('_height', border.height()); // 记录当前窗口定义的高度
max.attr('state', 'true');            // 修改最大化按钮状态为真
this.position(0, 0);                  // 将窗口移动到左上角
this.size('100%', '100%');            // 修改窗口大小
} else {
jQuery(DOM.border[0]).parent().parent().css('width', (max.attr('_width') * 1 + 30) + 'px');  // 修改窗口最外层 div 定义的宽度，这个 div 是窗口外层的样式窗口，比我们定义的窗口宽上 30 像素，根据使用的皮肤不同有所区别
this.size(max.attr('_width') + 'px', max.attr('_height') + 'px');  // 将窗口大小按照已记录的宽和高进行设置
this.position('50%', '50%');       // 将窗口居中
max.attr('state', 'false');        // 设置最大化状态为假
max.removeAttr('_width');          // 删除已记录的宽
max.removeAttr('_height');         // 删除已记录的高
}
return that;
}

注意实际添加代码的时候，要在最后加个逗号哦，毕竟是写在 artDialog.fn 的定义对象里的内容

这里我实现的思路是这样的，首先在最大化、最小化按钮中设置一个属性 state，表示窗口是否已经最大化或最小化

然后在点击按钮的时候判断一下，如果没有则最大化，否则则还原

在事件实现方法定义完成后，我发现点击按钮并没有发生什么，所以，我们还需要将事件和方法进行关联起来，于是再次查阅代码，发现以下定义：

// 同样在 artDialog.fn 定义中
// 事件代理
_addEvent: function () {
var resizeTimer,
that = this,
config = that.config,
isIE = 'CollectGarbage' in window,
DOM = that.DOM;

// 窗口调节事件
that._winResize = function () {
resizeTimer && clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
that._reset(isIE);
}, 40);
};
_$window.bind('resize', that._winResize);

// 监听点击
DOM.wrap
.bind('click', function (event) {
var target = event.target, callbackID;

if (target.disabled) return false; // IE BUG

if (target === DOM.close[0]) {
that._click(config.cancelVal);
return false;
} else {
callbackID = target[_expando + 'callback'];
callbackID && that._click(callbackID);
};

that._ie6SelectFix();
})
.bind('mousedown', function () {
that.zIndex();
});
},

于是追加代码变成以下内容

// 事件代理
_addEvent: function () {
var resizeTimer,
that = this,
config = that.config,
isIE = 'CollectGarbage' in window,
DOM = that.DOM;

// 窗口调节事件
that._winResize = function () {
resizeTimer && clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
that._reset(isIE);
}, 40);
};
_$window.bind('resize', that._winResize);

// 监听点击
DOM.wrap
.bind('click', function (event) {
var target = event.target, callbackID;

if (target.disabled) return false; // IE BUG

if (target === DOM.close[0]) {
that._click(config.cancelVal);
return false;
} else if (target === DOM.max[0]) {
that.max();
} else if (target === DOM.min[0]) {
that.min();
} else {
callbackID = target[_expando + 'callback'];
callbackID && that._click(callbackID);
};

that._ie6SelectFix();
})
.bind('mousedown', function () {
that.zIndex();
});
},

于是发现事件被关联成功了，最后，由于不是所有窗口都需要最大化和最小化，所以在 artDialog.fn 定义中，修改 _init 定义的方法，追加以下内容

config.min ? DOM.min.show() : DOM.min.hide();
config.max ? DOM.max.show() : DOM.max.hide();

修改 artDialog.defaults 定义的对象追加以下内容

min: null,
max: null,

这样，窗口在打开时默认是没有最大化和最小化的，在我们需要弹出的定义中设置一下 max 、min 属性就可以显示并实现最大化、最小化了

art.dialog.open(url,{
max : true,
min : true
},false);

欢迎大家对本文进行补充，最小化实现这里就不再贴了