webimpopup.js

马士兵老师的代码

//WebImForm类和公共属性,方法
function webImForm()
{
    this.title;
    this.content;
    this.divId;
    this.width;
    this.height;
    this.zIndex;
    this.position;
	this.dargOK;
	this.dragXoffset=0;
	this.dragYoffset=0;
	this.dragDiv;
	this.setTimeOutId;
	this.maxHeight;
}
webImForm.renderChat=function(name)
{
    var pageUrl=csdn_im_defaultDomain+'/Messages/'+ name +'.ashx';
	var sidebarUrl=webimPopup.rootUrl+'chatDiagSidebar.aspx?friendUsername='+escape(name);
	var bgImgUrl=csdn_im_defaultDomain+'/app_themes/default/images/chatSidebar/default/bg.png';
	var l=[];
	l.push('<dl class="layer" style="height:450px;" id="'+ webimPopup.chatDivId +'Wrap">');
	l.push('    <dt class="im_popupWindowCaption draggable" id="'+ webimPopup.chatDivId +'Caption">');
	l.push('        <span>');
	l.push('			<img class="im_minimize" onclick="webImForm.minimize(\''+ webimPopup.chatDivId +'\', this)" src="'+ webImForm.rootUrl +'images/webimframe_012.gif" alt="minimize" />');
	l.push('            <img class="im_close" onclick="webImForm.close(\''+ webimPopup.chatDivId +'\')" src="'+ webImForm.rootUrl +'images/webimframe_011.gif" alt="close" />');
	l.push('        </span>');
	l.push('        <strong>\u4e0e '+ name +' \u804a\u5929</strong>');
	l.push('    </dt>');
	l.push('	<table id="im_popupWindow_chatTbl" width="580px" height="424px" cellpadding="0" cellspacing="0" style="background-image:url('+ bgImgUrl +')"><tbody><tr><td vliagn="top" width="448px">');
	l.push('	<iframe id="'+ webimPopup.chatDivId +'Frame" frameborder="0" noresize="noresize" scrolling="no" src=\"'+ pageUrl +'\" style="width:448px;height:416px;border:0;"></iframe>');
	l.push('	</td><td valign="top" align="center">');
	l.push('		<iframe id="chatSidebar" frameborder="0" noresize="noresize" scrolling="no" src=\"'+ sidebarUrl +'\" style="border:0;width:129px;height:416px;overflow:hidden;"></iframe>');
	l.push('	</td></tr></tbody></table>');
	l.push('</dl>');
	
	var chatDiv=document.createElement('div');
	chatDiv.id=webimPopup.chatDivId;
	chatDiv.className='im_popupWindow';
	chatDiv.innerHTML=l.join('');
	chatDiv.style.width='580px';
	chatDiv.style.height='450px';
	chatDiv.style.zIndex=webImForm.zIndex[3];
	chatDiv.setAttribute('wistate','max');
	document.body.appendChild(chatDiv);
	webImForm.setToMiddle(chatDiv);
}
webImForm.prototype.show=function()
{
    var me=this;
    var l=[];
	l.push('<dl class="layer" onselectstart="return false;">');
	l.push('    <dt class="im_popupWindowCaption draggable" id="'+ this.divId +'Caption">');
	l.push('        <span>');
	l.push('			<img class="im_minimize" id="'+this.divId+'Minimize" onclick="webImForm.minimize(\''+ this.divId +'\', this)" src="'+ webImForm.rootUrl +'images/webimframe_012.gif" alt="最小化该窗口" />');
	l.push('            <img class="im_close" onclick="webImForm.close(\''+ this.divId +'\')" src="'+ webImForm.rootUrl +'images/webimframe_011.gif" alt="关闭该窗口" />');
	l.push('        </span>');
	l.push('        <strong>'+this.title+'</strong>');
	l.push('    </dt>');
	l.push('    <div class="im_popupWindowContent" id="'+ this.divId +'Content" style="max-height:'+ parseInt(this.maxHeight-36,10) +'px;">');
	l.push(this.content);
	l.push('    </div>');
	l.push('</dl>');
	
	var frm=document.createElement("div");
	with(frm)
	{
	    setAttribute("wistate","max");
        id=this.divId;
        className='im_popupWindow';
        style.width=this.width;
        innerHTML=l.join('');
        style.zIndex=this.zIndex;
        style.maxHeight=this.maxHeight+'px';
    }
    document.body.appendChild(frm);
    
    var td=this.divId;
    if(!webImForm.setTimeOutId[this.divId])
    {
        webImForm.setTimeOutId[this.divId]=window.setTimeout(function(){webImForm.minimize(td,document.getElementById(td+"Minimize"))},5*1000);
    }
    frm.onmouseover=function()
    {
        window.clearTimeout(webImForm.setTimeOutId[frm.id]);
    };
}
webImForm.setTimeOutId={};
webImForm.bodyProperty=function()
{
    var bodyST, bodyCH, bodyCW, bodySL;
	if(window.pageYOffset)
	{bodyST=window.pageYOffset;}
	else if(document.documentElement&&document.documentElement.scrollTop){bodyST=document.documentElement.scrollTop;}
	else if(document.body){bodyST=document.body.scrollTop;}
	if(window.innerHeight){bodyCH=window.innerHeight;}
	else if(document.documentElement&&document.documentElement.clientHeight){bodyCH=document.documentElement.clientHeight;}
	else if(document.body){bodyCH=document.body.clientHeight;}
    var w=window, d=document, dd=d.documentElement;
    if(dd&&dd.clientWidth) bodyCW=dd.clientWidth;
    else if(w.innerWidth) bodyCW=w.innerWidth;
    else if(d.body) bodyCW=d.body.clientWidth;
    if(w.pageXOffset) bodySL=w.pageXOffset;
    else if(dd&&dd.scrollLeft) bodySL=dd.scrollLeft;
    else if(d.body) bodySL=d.body.scrollLeft;
    return {"scrollTop":bodyST,"scrollLeft":bodySL,"clientWidth":bodyCW,"clientHeight":bodyCH};
}
//webImForm的静态方法
webImForm.minimize=function(divId, objSender)
{
    var d0=document.getElementById(divId);
    var d1=document.getElementById(divId+'Content');
	if(d1)
	{
		if(d1.style.display=='none')
		{
			d1.style.display='';
			if(divId.indexOf('sys')>0){d0.style.width='500px';}
			if(d0){d0.setAttribute('wistate','max')}
			objSender.src=webImForm.rootUrl+"Images/webimframe_012.gif";
		}
		else
		{
			d1.style.display='none';
			d0.style.width='180px';
			if(d0){d0.setAttribute('wistate','min')}
			objSender.src=webImForm.rootUrl+"Images/webimframe_033.gif";
		}
		webImForm.setToRightCorner(d0);
	}
	else
	{
		var d2=document.getElementById(divId+'Frame');
		if(d2)
		{
			var d3=document.getElementById(divId);
			var d4=document.getElementById(divId+'Wrap');
			var d5=document.getElementById('im_popupWindow_chatTbl');
			if(d3 && d4)
			{
				if(d2.style.display=='none')
				{
					d2.style.display='';
					d5.style.display='';
					d3.style.height='450px';
					d4.style.height='450px';
					d3.style.width='580px';
					d4.style.width='580px';
					objSender.src=webImForm.rootUrl+"Images/webimframe_012.gif";
					d3.setAttribute('wistate','max');
					webImForm.hasChatWindow=false;
				}
				else
				{
					d2.style.display='none';
					d5.style.display='none';
					d3.style.height='26px';
					d4.style.height=d3.style.height;
					d3.style.width='200px';
					d4.style.width=d3.style.width;
					objSender.src=webImForm.rootUrl+"Images/webimframe_033.gif";
					d3.setAttribute('wistate','min');
					webImForm.hasChatWindow=true;
				}
				webImForm.resizeHandler(d3);
				d3.style.zIndex=webImForm.zIndex[5];
			}
		}
	}
}
webImForm.close=function(divId)
{
    if(divId=='im_popupWindow_chat')
        webImForm.hasChatWindow=false;
    webimPopup.dispose(divId);
}
webImForm.resizeHandler=function(divId)
{
    if('string'!=typeof(divId) || 'undefined'==typeof(divId))
    {
        webImForm.setToRightCorner(document.getElementById(webimPopup.senderDivId));
        webImForm.setToRightCorner(document.getElementById(webimPopup.csdnMsgDivId));
        webImForm.setToRightCorner(document.getElementById(webimPopup.sysMsgDivId));
        var cd=document.getElementById(webimPopup.chatDivId)
        //如果chat window是最大化的时候居中,最小化的放在右下角
        if(cd)
        {
            if(cd.getAttribute('wistate')=='max'){webImForm.setToMiddle(cd);}
            else{webImForm.setToRightCorner(cd);}
        }
    }
    else
    {
        webImForm.setToRightCorner(divId);
    }
}
webImForm.setToRightCorner=function(ele)
{
	if(ele)
	{
	    var body=webImForm.bodyProperty();
		ele.style.top=(body.scrollTop+body.clientHeight-ele.offsetHeight-1)+"px";
		ele.style.left=(body.scrollLeft+body.clientWidth-ele.offsetWidth-1)+"px";
	}
}
webImForm.setToMiddle=function(ele)
{
	if(ele)
	{
	    var body=webImForm.bodyProperty();
		ele.style.left=(body.scrollLeft+body.clientWidth-ele.offsetWidth-1)/2+'px';
		ele.style.top=parseInt(body.clientHeight-ele.offsetHeight-1+0.5)/2+body.scrollTop+"px";
	}
}
webImForm.dragHandler=function(e)
{
    var htype='-moz-grabbing';
	if (e == null) { e = window.event; htype='move';} 
	var target = e.target != null ? e.target : e.srcElement;
	var pos;
	if(target.parentNode && target.parentNode.className && target.parentNode.className.lastIndexOf('draggable')>0)
	{
	    target = target.parentNode;
	}
    if(target.className.lastIndexOf('draggable')>0)
    {
		pos=target.id.indexOf('Caption');
		var d=document.getElementById(target.id.substr(0,pos));
		if(d)
		{
			webImForm.setDivTop(d);
			var realDiv=d;
			var dd=document.getElementById('webim_dragFakeDiv');
			if(!dd)
			{
			    dd=document.createElement('div');
			    dd.id='webim_dragFakeDiv';
			    with(dd.style)
			    {
			        borderWidth='2px';
			        borderStyle='solid';
			        borderColor='gray';
			        position='absolute';
			        zIndex="65500";
			    }
			    document.body.appendChild(dd);
			}
			with(dd.style)
			{
			    width=d.clientWidth-2+'px';
			    height=d.clientHeight-2+'px';
			    var intL,intT;
			    try{intL=parseInt(d.style.left,10);intT=parseInt(d.style.top,10);}catch(e){}
			    left=intL-4+'px';
			    top=intT-4+'px';
			    display='';
			}

            this.dragDiv=dd;
			target.style.cursor='move';
			this.dragOK=true;
			var tl=parseInt(this.dragDiv.style.left);
			var tt=parseInt(this.dragDiv.style.top);