在 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);
欢迎大家对本文进行补充，最小化实现这里就不再贴了