?? webimpopup.js
字號:
?//WebImForm類和公共屬性,方法
/*fanweixiao@gmail.com*/
/*[1.1.0.0]support skin*/
/*webim popup compnent 1.1.0.0*/
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;
this.skin=webimPopup.skin;
this.addPadding=true;
this.ifAutoHide=false;
}
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=[];
//version 1.1.0.0 add skin support
if(typeof this.skin=='undefined') this.skin='default';
var fpath=webImForm.rootUrl+'skin/'+this.skin+'/';
//l.push('<div class="webim_frame">');
l.push('<h6 class="wi_draggable">');
l.push(' <span>' + this.title + '</span>');
l.push(' <em>查看所在頁面時打開后臺</em>');
l.push(' <a href="#" onclick="webImForm.minimize(\''+ this.divId +'\',document.getElementById(\''+ this.divId +'Minimize\'));return false;">');
l.push(' <img id="'+this.divId+'Minimize" src="'+ fpath +'csdnim080507verpic4.gif" class="founctionpic2" alt="minimize"/>');
l.push(' </a>');
l.push(' <a href="#" onclick="webImForm.close(\'' + this.divId + '\');return false;">');
l.push(' <img src="'+ fpath +'csdnim080507verpic3.gif" class="founctionpic3" alt="colse"/>');
l.push(' </a>');
l.push('</h6>');
if(this.addPadding)
{
l.push('<div class="wi_content withPadding" id="'+ this.divId +'Content">');
}
else
{
l.push('<div class="wi_content" id="'+ this.divId +'Content">');
}
l.push(this.content);
l.push('</div>');
//l.push('</div>');
var frm=document.createElement("div");
with(frm)
{
setAttribute("wistate","max");
id=this.divId;
className='im_popupWindow';
innerHTML=l.join('');
style.zIndex=this.zIndex;
//設置最高
//style.maxHeight=this.maxHeight+'px';
}
document.body.appendChild(frm);
if(this.ifAutoHide)
{
//一段時間后自動最小化
var td=this.divId;
if(!webImForm.setTimeOutId[this.divId])
{
webImForm.setTimeOutId[this.divId]=window.setTimeout(function(){webImForm.minimize(td,document.getElementById(td+"Minimize"))},10*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(d0){d0.setAttribute('wistate','max')}
if(objSender)objSender.src=webImForm.rootUrl+"skin/"+webimPopup.skin+"/csdnim080507verpic4.gif";
}
else
{
d1.style.display='none';
if(d0)
{
d0.setAttribute('wistate','min');
}
if(objSender)objSender.src=webImForm.rootUrl+"skin/"+webimPopup.skin+"/csdnim080507verpic5.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));
webImForm.setToRightCorner(document.getElementById(webimPopup.miniMsgDivId));
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=='wi_draggable')
if(target.parentNode && target.className && target.className=='wi_draggable')
{
target = target.parentNode;
}
else
{
return;
}
//拖動層
if(target)
{
var d=target;
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);
if(isNaN(tl))
{this.dragXoffset=e.clientX;}
else{this.dragXoffset=e.clientX-tl;}
if(isNaN(tt)){this.dragYoffset=e.clientY;}
else{this.dragYoffset=e.clientY-tt;}
document.onmousemove=function(e)
{
if(e==null){e=window.event}
if(e.button<=1&&this.dragOK)
{
var ddLeft=e.clientX-this.dragXoffset;
var ddTop=e.clientY-this.dragYoffset;
//計算位置
var body=webImForm.bodyProperty();
var maxTop=(body.scrollTop+body.clientHeight-this.dragDiv.offsetHeight-1);
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -