artDialog的修改记录

本文主要是介绍artDialog的修改记录，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.添加窗口缩小及放大按钮

第一步：窗口按钮的回调函数在把里面的修改为

// 按钮回调函数触发
_click: function (name) {
var that = this,
fn = that._listeners[name] && that._listeners[name].callback;

if(name=='aui_close'){ //关闭
return that.close();
}
else if(name=='aui_reduce'){ //缩小
that.hide();
return;
}
else if(name=='aui_amplify'){
if(that._width=='100%'){
that.size('auto', 'auto');
that.position('50%', '38.2%');
}
else{
that.position('0%', '0%');
that.size('100%', '100%');
}
return;

}
else
{
return typeof fn !== 'function' || fn.call(that, window) !== false ?
that.close() : that;
}
},

第二步：修改监听绑定

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

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

if((target.className == "aui_close")||(target.className == "aui_reduce")||(target.className == "aui_amplify")){ //这里加入css类识别
//if (target === DOM.close[0]) {
that._click(target.className);
return false;
} else {
callbackID = target[_expando + 'callback'];
callbackID && that._click(callbackID);
};

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

第三步：在生成默认html层时

artDialog._templates =
'<div class="aui_outer">'

........

+ '<td colspan="2" class="aui_header">'
+ '<div class="aui_titleBar">'
+ '<div class="aui_title"></div>'
+ '<a class="aui_close" href="javascript:/*artDialog*/;">'
+ '\xd7'
+ '</a>'
+ '<a class="aui_reduce" href="javascript:/*artDialog*/">'
+ '\x2d'
+ '</a>'
+ '<a class="aui_amplify" href="javascript:/*artDialog*/">'
+ '\x2b'
+ '</a>'
+ '</div>'
+ '</td>'

.......

第四步，修改相应的CSS文件,找到 .aui_close 的样式，在其后面加入aui_reduce aui_amplify的样式

.aui_close, .aui_reduce, .aui_amplify  { display:block; position:absolute; text-decoration:none; outline:none; _cursor:pointer; }
.aui_close:hover, .aui_reduce:hover, .aui_amplify:hover  { text-decoration:none; }

.aui_close { padding:0; top:2px; right:5px; width:21px; height:21px; line-height:21px; font-size:18px; text-align:center; color:#8D8D8D;; font-family: Helvetica, STHeiti; _font-family: Tahoma, '\u9ed1\u4f53', 'Book Antiqua', Palatino; border:1px solid transparent; _border:0 none; background:#fff; border-radius:15px;  }
.aui_reduce { padding:0; top:2px; right:31px; width:21px; height:21px; line-height:21px; font-size:18px; text-align:center; color:#8D8D8D; font-family: Helvetica, STHeiti; _font-family: Tahoma, '\u9ed1\u4f53', 'Book Antiqua', Palatino; border:1px solid transparent; _border:0 none; background:#fff; border-radius:15px;  }
.aui_amplify { padding:0; top:2px; right:57px; width:21px; height:21px; line-height:21px; font-size:18px; text-align:center; color:#8D8D8D; font-family: Helvetica, STHeiti; _font-family: Tahoma, '\u9ed1\u4f53', 'Book Antiqua', Palatino; border:1px solid transparent; _border:0 none; background:#fff; border-radius:15px;  }
.aui_state_drag .aui_close, .aui_state_drag .aui_reduce, .aui_state_drag .aui_amplify { color:#FFF; }
.aui_close:hover, .aui_reduce:hover, .aui_amplify:hover  { background:#CDCDCD; border:1px solid #fff; _border:0 none; box-shadow: 0 1px 0 rgba(41, 127, 184, .3), inset 0 1px 0 rgba(41, 127, 184, .3); }
.aui_close:active, .aui_reduce:active, .aui_amplify:active { box-shadow: none; }

.aui_state_noTitle .aui_close, .aui_state_noTitle .aui_reduce, .aui_state_noTitle .aui_amplify  { top:5px; }

完成

这篇关于artDialog的修改记录的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---