符合web标准的可拖动层特效
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 符合web标准的可拖动层特效</TITLE> <meta content="text/html;charset=gb2312" http-equiv="content-type"> <mce:style><!-- *{font-size:9pt;font-family:宋体;line-height:130%;} --></mce:style><style mce_bogus="1">*{font-size:9pt;font-family:宋体;line-height:130%;}</style> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- Global = new Object(); Global.__UniqueID = 0; Global.GetUniqueID = function(){ return "__MT_UID_" + Global.__UniqueID ++;}; function Dialog(title,icon,body){ this.Icon = icon || "http://www.jsgod.net/test/images/window_blur.gif"; this.Title = title || "Untitled Document"; this.Body = body || "Blank Document"; this.UniqueID = Global.GetUniqueID(); ////////////////////////////////////// this.Width = 400; this._mousedown = false; this._offsetX = 0; this._offsetY = 0; this._x = 0; this._y = 0; var i,l; ////////////////////////////////////// this.SetRect = function(_width,_top,_left){ var obj; if(_width > 200) this.Width = _width; this._x = _left; this._y = _top; obj = document.getElementById(this.UniqueID); if(obj){ obj.style.width = this.Width; obj.style.top = _top; obj.style.left = _left; } } this.SetIndex = function(index){ if(isNaN(index)) return; var obj = document.getElementById(this.UniqueID); if(obj) obj.style.zIndex = index; } this.BindEvent = function(){ var self = this,obj = null; var table = document.getElementById(this.UniqueID); if((null == table)||(table.tagName != "TABLE")) return; if(table.rows && table.rows[0].cells && table.rows[0].cells[0] && table.rows[0].cells[0].firstChild){ obj = table.rows[0].cells[0].firstChild; obj.rows[0].cells[2].lastChild.onclick = function(e){ var obj = document.getElementById(self.UniqueID); if(obj) obj.parentNode.removeChild(obj); } obj.rows[0].cells[2].firstChild.onclick = function(e){ e = window.event || e; var obj = document.getElementById(self.UniqueID); if(obj && obj.rows && obj.rows.length){ with(obj.rows[1].style){ display = display == "" ? "none" : ""; } } obj = (e.target || e.srcElement); if(obj.on == "true"){ obj.on = "false"; obj.src = "http://www.jsgod.net/test/images/min.gif"; } else{ obj.on = "true"; obj.src = "http://www.jsgod.net/test/images/max.gif"; } } if(obj.rows && obj.rows[0].cells && obj.rows[0].cells[0].firstChild) obj = obj.rows[0].cells[0].firstChild; obj.onmousedown = function(e){ e = window.event || e; if(e.cancelBubble) e.cancelBubble(); //Firefox.... }; obj.ondblclick = function(){ self.Close();}; table.onmousedown = function(){ var obj; if(Dialog.ObjectRef && (this != Dialog.ObjectRef)){ obj = document.getElementById(Dialog.ObjectRef.UniqueID); if(obj){ obj.style.borderColor = "#cccccc"; obj.style.zIndex = 90; obj.rows[0].cells[0].firstChild.rows[0].cells[0].firstChild.src = "images/window_blur.gif"; } } obj = document.getElementById(self.UniqueID); if(obj){ obj.style.borderColor = "lightblue"; obj.style.zIndex = 99; obj.rows[0].cells[0].firstChild.rows[0].cells[0].firstChild.src = "images/window.gif"; } Dialog.ObjectRef = self; } } if(table.rows){ table.rows[0].cells[0].firstChild.rows[0].cells[1].onmousedown = function(e){ var obj; e = window.event || e; self._dragable = true; obj = document.getElementById(self.UniqueID); if(null == obj) return; self._x = e.clientX; self._y = e.clientY; self._offsetX = parseInt(obj.style.left); self._offsetY = parseInt(obj.style.top); } table.onmouseover = function(e){ e = window.event || e; var obj = document.getElementById(self.UniqueID); if(obj) obj.style.cursor = "default"; }; table.onmouseup = function(e){ var obj; e = window.event || e; self._dragable = false; obj = document.getElementById(self.UniqueID); if(obj) obj.style.cursor = "default"; } table.rows[0].ondblclick = function(e){ obj = document.getElementById(self.UniqueID); if(null == obj) return; if(obj.rows && (obj.rows.length > 1)){ with(obj.rows[1].style){ display = display == "" ? "none" : ""; obj = obj.rows[0].cells[0].firstChild.rows[0].cells[2].firstChild; obj.src = obj.on == "true" ? "http://www.jsgod.net/test/images/min.gif" : "http://www.jsgod.net/test/images/max.gif"; obj.on = obj.on == "true" ? "false" : "true"; }; } } } } this.Close = function(){ var table = document.getElementById(this.UniqueID); if(table) table.parentNode.removeChild(table); } this.toString = function(){ var shtml = ''; shtml += '<table cellpadding="0" cellspacing="0" border="1" onselectstart="return false;" oncontextmenu="return false;" ondragstart="return false;" bgcolor="#ffffff" id="' + this.UniqueID + '" style="border:solid 1px #cccccc;cursor:default;width:' + (this.Width) + 'px;position:absolute;top:' + this._y + 'px;left:' + this._x + 'px;">'; shtml += '<tr height="20"><td style="border:0px;" mce_style="border:0px;"><table cellpadding="5" cellspacing="0" border="0" width="100%"><tr><td width="20"><img src="' + this.Icon + '" mce_src="' + this.Icon + '" width="16" height="16"/></td><td align="left"><span style="width:200px;overflow:hidden;" title="' + this.Title + '">' + this.Title + '</span></td><td width="32"><img src="http://www.jsgod.net/test/images/min.gif" mce_src="http://www.jsgod.net/test/images/min.gif" height="13" width="13" title="最小化" on="false" hspace="1" onmouseover="style.borderColor=/'lightblue/'" style="border:solid 1px #ffffff" mce_style="border:solid 1px #ffffff" onmouseout="style.borderColor=/'#ffffff/'"/><img src="http://www.jsgod.net/test/images/close.gif" mce_src="http://www.jsgod.net/test/images/close.gif" width="13" height="13" title="关闭" style="border:solid 1px #ffffff;" mce_style="border:solid 1px #ffffff;" onmouseover="style.borderColor=/'lightblue/'" onmouseout="style.borderColor=/'#ffffff/'"/></td></tr>'; shtml += '</table></td></tr>'; shtml += '<tr style="display:;" mce_style="display:;"><td style="border:0px;padding:5px;border-top:solid 1px #cccccc;" mce_style="border:0px;padding:5px;border-top:solid 1px #cccccc;" valign="top">' + this.Body + '</td></tr>'; shtml += '</table>'; return shtml; } } document.onmousemove = function(e){ var _x,_y,obj; e = window.event || e; if(null == Dialog.ObjectRef) return; obj = document.getElementById(Dialog.ObjectRef.UniqueID); if(null == obj) return; if(Dialog.ObjectRef._dragable){ obj.style.top = Dialog.ObjectRef._offsetY + e.clientY - Dialog.ObjectRef._y; obj.style.left = Dialog.ObjectRef._offsetX + e.clientX - Dialog.ObjectRef._x; obj.style.cursor = "move"; } } Dialog.ObjectRef = null; var dialog = new Dialog("哇哈哈",null,"Matrixy Herry"); document.write(dialog); dialog.BindEvent(); dialog.SetIndex(1); dialog.SetRect(400,100,200); var dialog1 = new Dialog("偶来试试",null,'<img src="" width="300" height="200"/>'); document.write(dialog1); dialog1.BindEvent(); dialog1.SetIndex(2); dialog1.SetRect(350,100,250); var dialog2 = new Dialog("Hello World"); document.write(dialog2); dialog2.BindEvent(); dialog2.SetIndex(24); dialog2.SetRect(380,10,20); var dialog3 = new Dialog("4"); document.write(dialog3); dialog3.BindEvent(); dialog3.SetRect(390,200,100); var dialog4 = new Dialog("5"); document.write(dialog4); dialog4.SetIndex(340); dialog4.BindEvent(); //--> </SCRIPT> </BODY> </HTML>
调用方法：
| 以下是引用片段： var dialog1 = new Dialog("偶来试试",null,’<img src="" width="300" height="200"/>’); document.write(dialog1); dialog1.BindEvent(); dialog1.SetIndex(2); dialog1.SetRect(350,100,250); |
(from:http://js.alixixi.com/read_80576_164.html)