Javascript

完美js模拟网页对话框效果(可拖曳)

作者: 青锋幽灵日期: 2008-10-23 10:51

字体大小: 小中大

JavaScript代码

/**
Powered By CMSDream Copyright © 2007-2008 All rights reserved.
23:25 2008-5-3
**/
var msgbox_scripts = document.getElementsByTagName("script");
msgbox_path = msgbox_path.substring(0, msgbox_path.lastIndexOf('/')+1);
var CMSMsgBox = function(oWidth, oHeight, oSkin, oTitle){
this.Id = 'msgbox_'+Math.random().toString().replace('\.', '_');
/*
* 位置
* =================
* ===== 1 2 3 =====
* ===== 4 5 6 =====
* ===== 7 8 9 =====
* =================
*/
this.Position = 5;
this.Skin = oSkin || 'default';
this.Width = oWidth || 500;
this.Height = oHeight || 260;
this.Title = oTitle || 'CMSDream:';
this.Value = '';
this.Float = true;
this.Mask = false;
this.Drag = true;
this.Return = false;
this.BoxDiv = null;
};
CMSMsgBox.prototype.show = function(){
/* 加载样式表 */
if(!this.$('msgbox_styles')){
var css = document.createElement('link');
css.setAttribute('href', msgbox_path + 'msgbox.css');
css.setAttribute('id', 'msgbox_styles');
css.setAttribute('rel', 'stylesheet');
css.setAttribute('type', 'text/css');
document.getElementsByTagName('head')[0].appendChild(css);
}
if(this.$(this.Id))return false;
this.Return = true;
this.BoxDiv = this.createDiv(document.body, 'div', 'block', this.Id, 'msgbox_main_div');
if(this.Mask)this.createMask();
this.showBox();
};
CMSMsgBox.prototype.showBox = function(){
var self = this;
var div = new Array();
div['box'] = this.createDiv(this.BoxDiv, 'div', 'block', this.Id+'bgcolor_div', 'msgbox_box msgbox_box_'+this.Skin);
if(this.Width)div['box'].style.width = this.Width+'px';
if(this.Height && this.Skin != 'loading')div['box'].style.height = this.Height+'px';
div['title'] = this.createDiv(div['box'], 'div', null, null, 'msgbox_title');
/* =====================================
* 拖曳效果
*=====================================**/
if(this.Drag){
div['move'] = this.createDiv(this.BoxDiv, 'div', 'none', null, 'msgbox_move_div');
div['title'].style.cursor = 'move';
div['title'].onmousedown = function(e){
var X = document.all ? event.clientX : e.pageX;
var Y = document.all ? event.clientY : e.pageY;
var T = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop;
var cLeft = div['code'].offsetLeft + div['box'].offsetLeft;
var cTop = div['code'].offsetTop + div['box'].offsetTop - T;
if((X > cLeft && X < (cLeft + div['code'].offsetWidth)) && (Y > cTop && Y < (cTop + div['code'].offsetHeight)))
return;
this.style.zIndex += 10;
this.setAttribute('MD', '1');
this.setAttribute('XCX', parseInt(X - div['box'].offsetLeft).toString());
this.setAttribute('XCY', parseInt(Y - div['box'].offsetTop).toString());
div['move'].style.width = parseInt(div['box'].offsetWidth-10) + 'px';
div['move'].style.height = parseInt(div['box'].offsetHeight - 10) + 'px';
div['move'].style.left = div['box'].offsetLeft + 'px';
div['move'].style.top = div['box'].offsetTop + 'px';
div['move'].style.display = 'block';
};
document.onmousemove = function(e){
if(div['title'].getAttribute('MD')!='1')return;
var XCX = div['title'].getAttribute('XCX');
var XCY = div['title'].getAttribute('XCY');
var X = document.all ? event.clientX : e.pageX;
var Y = document.all ? event.clientY : e.pageY;
div['move'].style.left = parseInt(X - XCX) + 'px';
div['move'].style.top = parseInt(Y - XCY) + 'px';
};
document.onmouseup = function(e){
if(div['title'].getAttribute('MD')!='1')return;
div['title'].setAttribute('MD', '0');
div['title'].setAttribute('XCX', '0');
div['title'].setAttribute('XCY', '0');
div['box'].style.left = div['move'].offsetLeft + 'px';
div['box'].style.top = div['move'].offsetTop + 'px';
if(self.IsObject(div['mask'])){
div['mask'].style.left = div['move'].offsetLeft + 'px';
div['mask'].style.top = div['move'].offsetTop + 'px';
}
div['move'].style.display = 'none';
};
}
div['span'] = this.createDiv(div['title'], 'span', 'block', this.Id+'_msgTitle');
div['span'].innerHTML = this.Title;
/* =====================================
* 关闭按钮
*=====================================**/
div['code'] = this.createDiv(div['title'], 'code', 'block');
div['code'].setAttribute('title', 'close');
div['code'].style.position = 'relative';
div['code'].innerHTML = "close";
div['code'].onclick = function(){self.close();};
/* =====================================
* 文本区域
*=====================================**/
div['text'] = this.createDiv(div['box'], 'div', 'block', this.Id+'_msgContent', 'msgbox_content');
div['value'] = this.createDiv(div['text'], 'div', 'block', this.Id+'_msgValue', 'msgbox_container');
div['clear'] = this.createDiv(div['text'], 'div', 'block', null, 'msgbox_clear');
if(this.Height && this.Skin != 'loading'){
div['value'].style.height = (div['box'].offsetHeight - div['title'].offsetHeight - 16) + 'px';
div['value'].style.overflowY = 'auto';
}
div['value'].innerHTML = this.Value;
/* =====================================
* 创建一个iframe档住select
*=====================================**/
if(document.all && !this.Mask){
div['mask'] = this.createDiv(this.BoxDiv, 'iframe', 'block', null, 'msgbox_frame');
div['mask'].style.width = div['box'].offsetWidth+'px';
div['mask'].style.height = div['box'].offsetHeight+'px';
}
mDiv_Float();
if(this.Float){
if(window.addEventListener){
window.addEventListener('resize', mDiv_Float, false);
window.addEventListener('scroll', mDiv_Float, false);
}else{
window.attachEvent('onresize', mDiv_Float);
window.attachEvent('onscroll', mDiv_Float);
}
}
/* =====================================
* 漂浮效果
*=====================================**/
function mDiv_Float(){
var t = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop;
var h = document.documentElement.clientHeight ? Math.min(document.documentElement.clientHeight, document.body.clientHeight) : document.body.clientHeight;
var w = document.documentElement.clientWidth ? document.documentElement.scrollWidth : document.body.scrollWidth;
switch(self.Position){
case 1: {var l = 1;var r = t + 1;break;}
case 2: {var l = parseInt((w/2)-(div['box'].offsetWidth/2));var r = t + 1;break;}
case 3: {var l = parseInt(w-div['box'].offsetWidth-1);var r = t + 1;break;}
case 4: {var l = 1;var r = parseInt(t+((h/2)-(div['box'].offsetHeight/2)));break;}
case 5: {var l = parseInt((w/2)-(div['box'].offsetWidth/2));var r = parseInt(t+((h/2)-(div['box'].offsetHeight/2)));break;}
case 6: {var l = parseInt(w-div['box'].offsetWidth-1);var r = parseInt(t+((h/2)-(div['box'].offsetHeight/2)));break;}
case 7: {var l = 1;var r = parseInt(t+(h-div['box'].offsetHeight-1));break;}
case 8: {var l = parseInt((w/2)-(div['box'].offsetWidth/2));var r = parseInt(t+(h-div['box'].offsetHeight-1));break;}
case 9: {var l = parseInt(w-div['box'].offsetWidth-1);var r = parseInt(t+(h-div['box'].offsetHeight-1));break;}
default: {var l = parseInt((w/2)-(div['box'].offsetWidth/2));var r = parseInt(t+((h/2)-(div['box'].offsetHeight/2)));break;}
}
div['box'].style.left = l+'px';
div['box'].style.top = r+'px';
if(document.all && !self.Mask){
div['mask'].style.left = l+'px';
div['mask'].style.top = r+'px';
}
}
};
/* 蒙板 */
CMSMsgBox.prototype.createMask = function(){
var self = this;
var div = new Array(1);
if(document.all)
div['mask_ifr'] = this.createDiv(this.BoxDiv, 'iframe', 'block', null, 'msgbox_mask_frame');
div['mask_div'] = this.createDiv(this.BoxDiv, 'div', 'block', null, 'msgbox_mask_div');
function window_onresize(){
var h = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
var w = document.all ? Math.min(document.documentElement.scrollWidth, document.body.scrollWidth) :
Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
div['mask_div'].style.width = w + 'px';
div['mask_div'].style.height = h + 'px';
if(document.all){
div['mask_ifr'].style.width = div['mask_div'].offsetWidth + 'px';
div['mask_ifr'].style.height = div['mask_div'].offsetHeight + 'px';
}
}
if(window.addEventListener){
window.addEventListener('scroll', window_onresize, false);
window.addEventListener('resize', window_onresize, false);
}else{
window.attachEvent('onscroll', window_onresize);
window.attachEvent('onresize', window_onresize);
}
if(this.Skin=='loading')div['mask_div'].ondblclick = function(){self.close();};
window_onresize();
};
/* 创建一个元素 */
CMSMsgBox.prototype.createDiv = function(iParent, element, display, id, clsname){
var ii = document.createElement(element);
if(typeof(display)=='string')ii.style.display = display;
if(typeof(clsname)=='string')ii.className = clsname;
if(typeof(id)=='string')ii.setAttribute('id', id);
iParent.appendChild(ii);
return ii;
};
/* 关闭 */
CMSMsgBox.prototype.close = function(){
if(this.IsObject(this.BoxDiv) && this.BoxDiv.parentNode){
this.BoxDiv.parentNode.removeChild(this.BoxDiv);
}
};
CMSMsgBox.prototype.$ = function(o){
return document.getElementById(o);
};
CMSMsgBox.prototype.IsObject = function(o){
return typeof(o)!='undefined' && o!=null;
};
CMSMsgBox.prototype.setBackgroundColor=function(iColor){
if(!this.$(this.Id+'bgcolor_div'))return;
this.$(this.Id+'bgcolor_div').style.backgroundColor = iColor;
};
CMSMsgBox.prototype.setColor=function(iColor){
if(!this.$(this.Id+'_msgValue'))return;
this.$(this.Id+'_msgValue').style.color = iColor;
};
CMSMsgBox.prototype.setValue=function(iValue){
if(!this.$(this.Id+'_msgValue'))return;
this.$(this.Id+'_msgValue').innerHTML = iValue;
};
CMSMsgBox.prototype.setTitle=function(iTitle){
if(!this.$(this.Id+'_msgTitle'))return;
this.$(this.Id+'_msgTitle').innerHTML = iTitle;
};