網誌存檔
熱門網志
 Del.icio.us Digg  Google Y! MyWeb

基于OO的可移动DIV窗口。

標簽：div　oo　j窗口　  瀏覽(239)  日期：2008-09-06
　　项目需要一个可移动的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/bg_title.gif);">`+
      `<div id="title_1" style="width:90%;text-align:left;float:left;overflow: hidden;cursor:hand;"><font style="margin-left:10px;font-weight:bold; line-height:30px; color:#0066CC; font-size:14px; ">`+this.title+`</font></div>`+
      `<div id="btn" style="width:10%; text-align:center;float: left;"><img src="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>

-------------------------------------------------
上一篇：javascript get value from popup window


  
Are you Bot? How you know that?ofcz no.