Question

怎么在artdialog弹出框右上角添加最大最小化按钮

Answer 1

通过分析关闭按钮的定义来实现其他按钮。关闭按钮是通过 html 模板定义的，定义同样在 artDialog.source.js 文件中，代码如下：

[javascript] view plain copy
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 变成下边的代码：

[javascript] view plain copy
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 方法附近追加一下代码，来作为最大化的方法实现

[javascript] view plain copy
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，表示窗口是否已经最大化或最小化
然后在点击按钮的时候判断一下，如果没有则最大化，否则则还原
在事件实现方法定义完成后，我发现点击按钮并没有发生什么，所以，我们还需要将事件和方法进行关联起来，于是再次查阅代码，发现以下定义：

[javascript] view plain copy
// 同样在 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();
});
},

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

[javascript] view plain copy
// 事件代理
_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 定义的方法，追加以下内容

[javascript] view plain copy
config.min ? DOM.min.show() : DOM.min.hide();
config.max ? DOM.max.show() : DOM.max.hide();

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

[javascript] view plain copy
min: null,
max: null,

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

[javascript] view plain copy
art.dialog.open(url,{
max : true,
min : true
},false);