/*!
* AlertBox
* Copyright (c) 2010 cloudgamer
* Blog: http://cloudgamer.cnblogs.com/
* Date: 2010-10-10
*/
//显示层对象
var AlertBox = function(box, options){
//初始化程序
this._initialize( box, options );
this._initBox();
};
AlertBox.prototype = {
_initialize: function(box, options) {
this.box = $$(box);//显示层
this._css = null;//备份样式
this._setOptions(options);
this.fixed = !!this.options.fixed;
this.zIndex = this.options.zIndex;
this.onShow = this.options.onShow;
this.onClose = this.options.onClose;
$$CE.fireEvent( this, "init" );
},
//设置默认属性
_setOptions: function(options) {
this.options = {//默认值
fixed: false,//是否固定定位
zIndex: 1000,//层叠值
onShow: $$.emptyFunction,//显示时执行
onClose: $$.emptyFunction//关闭时执行
};
return $$.extend(this.options, options || {});
},
//初始化显示层对象
_initBox: function() {
var style = this.box.style;
this._css = { "display": style.display, "visibility": style.visibility, "position": style.position, "zIndex": style.zIndex };//备份样式
style.display = "none";
style.visibility = "visible";
document.body.insertBefore(this.box, document.body.childNodes[0]);
$$CE.fireEvent( this, "initBox" );
},
//显示
show: function(isResize) {
//定位显示
var style = this.box.style;
style.position = this.fixed ? "fixed" : "absolute";
style.zIndex = this.zIndex;
$$CE.fireEvent( this, "show", isResize );
style.display = "block";
this.onShow();
},
//关闭
close: function() {
this.box.style.display = "none";
$$CE.fireEvent( this, "close" );
this.onClose();
},
//销毁程序
dispose: function() {
$$CE.fireEvent( this, "dispose" );
$$D.setStyle( this.box, this._css );//恢复样式
//清除属性
this.box = this.onShow = this.onClose = null;
}
};
//修正fixed对象
var RepairFixed = function() {
if ( !$$B.ie6 ) return;
var layer, body, parent = "__repairfixed";//记录父节点
function Create(){//创建定位层函数
body = document.body
if (body.currentStyle.backgroundAttachment !== "fixed") {
if (body.currentStyle.backgroundImage === "none") {
body.runtimeStyle.backgroundRepeat = "no-repeat";
body.runtimeStyle.backgroundImage = "url(about:blank)";
}
body.runtimeStyle.backgroundAttachment = "fixed";
}
layer = document.createElement("
");
Create = $$.emptyFunction;
}
return {
"append": function(elem){
Create();
elem[ parent ] = elem.parentNode;
layer.appendChild(elem).runtimeStyle.position = "absolute";
//插入body
if ( layer.parentNode !== body ) body.insertBefore(layer, body.childNodes[0]);
},
"remove": function(elem){
if ( !layer ) return;
//移除元素
if ( elem.parentNode === layer ) {
elem.runtimeStyle.position = "";
elem[ parent ] ? elem[parent].appendChild(elem) : layer.removeChild(elem);
elem.removeAttribute(parent);//不能用delete
}
//没有内部元素就移除
if ( !layer.childNodes.length && layer.parentNode == body ) body.removeChild(layer);
}
};
}();
//兼容ie6扩展
if ( $$B.ie6 ) { AlertBox.prototype._initialize = (function(){
var init = AlertBox.prototype._initialize,
methods = {
"init": function(){
this._iframe = null;//遮盖select的iframe
this.fixSelect = !!this.options.fixSelect;
},
"show": function(isResize) {
RepairFixed[ this.fixed ? "append" : "remove" ]( this.box );
if ( this.fixSelect ) {
if ( !this._iframe ) {
this._iframe = this.box.appendChild( document.createElement("") );
isResize = true;
}
if ( isResize ) {
var size = $$D.getSize(this.box);
$$D.setStyle( this._iframe, {
height: size.height + "px", width: size.width + "px",
top: -this.box.clientTop + "px", left: -this.box.clientLeft + "px"
});
}
}
},
"close": function() {
RepairFixed.remove( this.box );
},
"dispose": function() {
RepairFixed.remove( this.box );
if ( this._iframe ) this.box.removeChild( this._iframe );
this._iframe = null;
}
};
return function(){
var args = [].slice.call(arguments), options = args[1] = args[1] || {};
//扩展options
$$.extend( options, {
fixSelect: true//是否修复select遮盖问题
}, false );
//扩展钩子
$$A.forEach( methods, function( method, name ){
$$CE.addEvent( this, name, method );
}, this );
init.apply( this, args );
}
})();}
//居中扩展
AlertBox.prototype._initialize = (function(){
var init = AlertBox.prototype._initialize,
methods = {
"init": function(){
this._centerCss = null;//记录原始样式
this.center = !!this.options.center;
},
"show": function(isResize){
if ( this.center ) {
if ( !this._centerCss ) {
var style = this.box.style;
this._centerCss = { marginTop: style.marginTop, marginLeft: style.marginLeft, left: style.left, top: style.top };
isResize = true;
}
if ( isResize ) {
var size = $$D.getSize(this.box);
$$D.setStyle( this.box, {
marginTop: (this.fixed ? 0 : $$D.getScrollTop()) - size.height / 2 + "px",
marginLeft: (this.fixed ? 0 : $$D.getScrollLeft()) - size.width / 2 + "px",
top: "50%", left: "50%"
});
}
} else {
if ( this._centerCss ) {
$$D.setStyle( this.box, this._centerCss ); this._centerCss = null;
}
}
},
"dispose": function(){
if ( this._centerCss ) $$D.setStyle( this.box, this._centerCss );
this._centerCss = null;
}
};
return function(){
var args = [].slice.call(arguments), options = args[1] = args[1] || {};
//扩展options
$$.extend( options, {
center: false//是否居中
}, false );
//扩展钩子
$$A.forEach( methods, function( method, name ){
$$CE.addEvent( this, name, method );
}, this );
init.apply( this, args );
}
})();
//覆盖层
var OverLay = function(){
var overlay;
function Create(){
var lay = document.body.insertBefore(document.createElement("div"), document.body.childNodes[0]);
$$D.setStyle( lay, {
overflow: "hidden", width: "100%", height: "100%",
border: 0, padding: 0, margin: 0, top: 0, left: 0
});
overlay = new AlertBox( lay, { fixed: true } );
Create = $$.emptyFunction;
}
return {
"color": "#fff",//背景色
"opacity": .5,//透明度(0-1)
"zIndex": 100,//层叠值
"show": function(){
Create();
$$D.setStyle( overlay.box, {
backgroundColor: this.color, opacity: this.opacity
});
overlay.zIndex = this.zIndex;
overlay.show();
},
"close": function(){ overlay && overlay.close(); }
};
}()