基于OO的可移动DIV窗口。

  项目需要一个可移动的DIV窗口,要求调用简单,可以重用。本人马上就考虑到使用OO了。代码如下:

 

 

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME=”Generator” CONTENT=”EditPlus”>
  <META NAME=”Author” CONTENT=””>
  <META NAME=”Keywords” CONTENT=””>
  <META NAME=”Description” CONTENT=””>
 </HEAD>

 <BODY>
<SCRIPT LANGUAGE=”JavaScript”>
  <!–
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var y,x;
var oDragObj;
var qtD = document;
function $(id){
 return getObj(id);
}
function getObj(id){
 return qtD.getElementById(id);
}
function cleanDiv(obj){
(typeof(obj)==”string”?$(obj):obj).innerHTML=”;
}

function msgWindow(msgContext){

 this.width=400;
 this.height=300;
 this.title = ”;
 this.content = ”;
 this.context = (typeof(msgContext)==”string”?$(msgContext):msgContext);

 this.popup = function(){
  var left = (screen.width – this.width) / 2;
  var top = (screen.height – this.height) / 2 -20;
  this.context.innerHTML ='<div id=”msgwin” style=”position:absolute;left:’+left+’px;top:’+top+’px;width:’+this.width+’px; height:’+this.height+’px; border:#999999 1pt solid; background-color:#F7F7F7″>’+
      ‘<div id=”title_0″ style=”width:100%; height:30px; background-image:url(http://www.1363.cn/images/btn_close.gif” onclick=”javascript:cleanDiv(\’context\’)” style=”cursor:hand; margin-top:6px;”/></div></div>’+
      ‘<div id=”txt”  style=”width:95%; height:90%; text-align:left;overflow: hidden; padding-left:10px;line-height:24px; color:#333333; font-size:12px; “>’+this.content+'</div></div>’;
  document.onmousedown=initDrag;
  document.onmouseup=new Function(“isdrag=false”);
 }
}

function moveMouse(e) {
 if (isdrag) {
  oDragObj.style.top  =  (nn6 ? nTY + e.clientY – y : nTY + event.clientY – y)+”px”;
  oDragObj.style.left  =  (nn6 ? nTX + e.clientX – x : nTX + event.clientX – x)+”px”;
  return false;
 }
}

function initDrag(e) {
 var oDragHandle = nn6 ? e.target : event.srcElement;
 if(oDragHandle.tagName!=’DIV’ || oDragHandle.id==’txt’)return;
 var topElement = “HTML”;
 while (oDragHandle.tagName != topElement && oDragHandle.id != “msgwin”) {
  oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
 }
 if (oDragHandle.id==”msgwin”) {
  isdrag = true;
  oDragObj = oDragHandle;
  nTY = parseInt(oDragObj.style.top+0);
  y = nn6 ? e.clientY : event.clientY;
  nTX = parseInt(oDragObj.style.left+0);
  x = nn6 ? e.clientX : event.clientX;
  document.onmousemove=moveMouse;
  return false;
 }
}


function testNotes(member_id,truename){
 msg = new msgWindow(‘context’);
 msg.title=”提示窗口”;
 msg.content =’  欢迎光临本站。’;
 msg.popup();
}
  //–>
  </SCRIPT> 
  <div id=’context’></div>

  <SCRIPT LANGUAGE=”JavaScript”>
  <!–
 
testNotes(1,’aa’);
  //–>
  </SCRIPT>
 </BODY>
</HTML>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.