Dialog二

男娘i 2022-08-06 11:06 110阅读 0赞

算是杂合在一起了

一个drag类,一个Resize类,一个Dialog类,一个Tween类,一个LightBox类,一个Button类.

不修改他们的类 然后柔和. 其实就是把处理写在回掉函数中  嘿嘿

没办法  一直都解决不了高度自适应的问题

基本完成了

不过在有遮照层的时候,拖动和缩放容易丢失捕捉.找个时间在研究下......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Drag!!!</title> <style type="text/css"> .bgdiv1\{ border:1px dotted \#333333; \} \#rRightDown\{ position:absolute; background:\#C00; width:6px; height:6px; z-index:5; font-size:0; cursor:nw-resize; bottom:0px; right:0px; \} .btn \{ height:21px; width:68px;zoom:1; display:inline-block !important; \*display:inline;; cursor:pointer; margin:3px; margin-top:8px;\} .btnleft\{height:21px; width:4px; background-image:url('http://album.hi.csdn.net/app\_uploads/wtcsy/20090605/140833261.p.gif'); float:left\} .btnmiddle\{height:21px; width:60px; background-image:url('http://album.hi.csdn.net/app\_uploads/wtcsy/20090605/140833261.p.gif'); background-position:0px -21px;float:left; text-align:center; line-height:21px; vertical-align:middle\} .btnright\{height:21px; width:4px; background-image:url('http://album.hi.csdn.net/app\_uploads/wtcsy/20090605/140833261.p.gif'); background-position:0px -42px;float:left;\} .btnleft1\{height:21px; width:4px; background-image:url('http://album.hi.csdn.net/app\_uploads/wtcsy/20090605/140833261.p.gif'); float:left; background-position:0px -399px;\} .btnmiddle1\{height:21px; width:60px; background-image:url('http://album.hi.csdn.net/app\_uploads/wtcsy/20090605/140833261.p.gif'); background-position:0px -420px;float:left; text-align:center; line-height:21px; vertical-align:middle\} .btnright1\{height:21px; width:4px; background-image:url('http://album.hi.csdn.net/app\_uploads/wtcsy/20090605/140833261.p.gif'); background-position:0px -441px;float:left;\} .dialogcontainter\{height:400px; width:400px; border:1px solid \#14495f; position:absolute; font-size:13px; padding:1px; padding-bottom:2px; background-color:\#94D6FF\} .dialogtitle\{height:24px; width:auto; background-image:url('http://album.hi.csdn.net/app\_uploads/wtcsy/20090605/140833261.p.gif');background-position:0px -350px; border:1px solid \#52A5F7; border-bottom:none\} .dialogtitleinfo\{float:left;height:20px; margin-top:2px; margin-left:5px;line-height:20px; vertical-align:middle; color:\#FFFFFF; font-weight:bold; \} .dialogtitleico1\{float:right; height:16px; width:16px; margin-top:3px; margin-right:3px;text-align:center; line-height:20px; vertical-align:middle; background-image:url('http://album.hi.csdn.net/app\_uploads/wtcsy/20090605/140820620.p.gif');background-position:-144px -16px\} .dialogtitleico\{float:right; height:16px; width:16px; margin-top:3px; margin-right:3px;text-align:center; line-height:20px; vertical-align:middle; background-image:url('http://album.hi.csdn.net/app\_uploads/wtcsy/20090605/140820620.p.gif');background-position:-160px 0px\} .dialogbody\{ padding:10px; width:auto; background-color: \#FFFFFF; border:1px solid \#52A5F7; border-top:none; background-image:url(http://album.hi.csdn.net/app\_uploads/wtcsy/20090607/175033292.p.gif); background-repeat:repeat-x; height:100%\} .dialogbottom\{ bottom:2px; right:2px;cursor:nw-resize; position:absolute; background-image:url('http://album.hi.csdn.net/app\_uploads/wtcsy/20090605/140820620.p.gif'); background-position:-32px -158px; width:10px; height:10px; font-size:0;\} </style> </head> <body style=" padding:0px; margin:0px; font-size:12px;"> <script> var isIE = (document.all) ? true : false; var isIE6 = isIE && (\[/MSIE (/d)/.0/i.exec(navigator.userAgent)\]\[0\]\[1\] == 6); isIE6&&document.execCommand("BackgroundImageCache", false, true) var $ = function (id) \{ return document.getElementById(id); \}; function addListener(element,e,fn)\{ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)\}; function removeListener(element,e,fn)\{ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)\}; function create(elm,parent,fn)\{var element = document.createElement(elm);fn&&fn(element); parent&&parent.appendChild(element);if(!parent)return element\}; function getobjpos(el,left)\{ var val = 0; while (el !=null) \{ val += el\["offset" + (left? "Left": "Top")\]; el = el.offsetParent; \} return val; \}; var CurrentStyle = function(element)\{ return element.currentStyle || document.defaultView.getComputedStyle(element, null); \} var Bind = function(object, fun,args) \{ return function() \{ return fun.apply(object,args||\[\]); \} \} var BindAsEventListener = function(object, fun) \{ var args = Array.prototype.slice.call(arguments).slice(2); return function(event) \{ return fun.apply(object, \[event || window.event\].concat(args)); \} \} var Extend = function(destination, source) \{ for (var property in source) \{ destination\[property\] = source\[property\]; \} \} var Class = function(properties)\{ var \_class = function()\{return (arguments\[0\] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;\}; \_class.prototype = properties; return \_class; \}; var Drag = new Class(\{ options:\{ Custom : false, Customdiv : null, Limit : false, mxLeft : 0, mxRight : 9999, mxTop : 0, mxBottom : 9999, Noscroll : false, mxContainer : null, LockX : false, LockY : false, Onstart : function()\{\}, Onmove : function()\{\}, Onstop : function()\{\} \}, initialize:function(obj,options)\{ this.\_obj = obj; this.\_x = 0; this.\_y = 0; this.\_marginLeft = 0; this.\_marginTop = 0; this.\_fM = BindAsEventListener(this, this.Move); this.\_fS = Bind(this, this.Stop); / this.Custom = this.options.Custom; this.Customdiv = this.options.Customdiv; this.Limit = this.options.Limit; this.mxLeft = this.options.mxLeft; this.mxRight = this.options.mxRight; this.mxTop = this.options.mxTop; this.mxBottom = this.options.mxBottom; this.mxContainer = this.options.mxContainer; this.LockX = this.options.LockX; this.LockY = this.options.LockY; this.Noscroll = this.options.Noscroll; this.Onstart = this.options.Onstart; this.Onmove = this.options.Onmove; this.Onstop = this.options.Onstop; / Extend(this,options||\{\}); if(this.mxContainer&&this.Limit) \{ this.mxLeft = getobjpos(this.mxContainer,1); this.mxTop = getobjpos(this.mxContainer,0); this.mxRight = getobjpos(this.mxContainer,1) + this.mxContainer.offsetWidth-this.\_obj.offsetWidth; this.mxBottom = getobjpos(this.mxContainer,0) + this.mxContainer.offsetHeight-this.\_obj.offsetHeight; \} this.\_obj.style.position = "absolute"; addListener(this.\_obj,"mousedown",BindAsEventListener(this,this.Start)); \}, Start:function(e)\{ var self = this; if(this.Noscroll)\{ this.mxRight = Math.max(document.body.scrollWidth, document.documentElement.clientWidth)-parseInt($('s').offsetWidth)-2; this.mxBottom = Math.max(document.body.scrollHeight, document.documentElement.clientHeight)-$('s').offsetHeight-2 \} this.\_x = e.clientX - this.\_obj.offsetLeft ; this.\_y = e.clientY - this.\_obj.offsetTop; this.\_marginLeft = parseInt(this.\_obj.style.marginLeft)||0; this.\_marginTop = parseInt(this.\_obj.style.marginTop)||0; if(isIE) \{ addListener(this.\_obj, "losecapture", this.\_fS); this.\_obj.setCapture(); \} else \{ e.preventDefault(); addListener(window, "blur", this.\_fS); \} addListener(document,"mousemove",this.\_fM); addListener(document,"mouseup",this.\_fS); this.Onstart(); \}, Move:function(e)\{ window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); var iLeft = e.clientX - this.\_x, iTop = e.clientY - this.\_y; if(this.Limit)\{ iLeft= Math.min(Math.max(iLeft,this.mxLeft),this.mxRight); iTop = Math.min(Math.max(iTop,this.mxTop),this.mxBottom); \} var obj = this.custom?this.customobj:this.\_obj; if(!this.LockX)obj.style.left = iLeft - this.\_marginLeft + "px"; if(!this.LockY)obj.style.top = iTop - this.\_marginTop + "px"; this.Onmove(); \}, Stop:function()\{ removeListener(document,'mousemove',this.\_fM); removeListener(document,'mouseup',this.\_fS); if(isIE) \{ removeListener(this.\_obj, "losecapture", this.\_fS); this.\_obj.releaseCapture(); \} else \{ removeListener(window, "blur", this.\_fS); \}; this.Onstop(); \} \}) var Resize =new Class(\{ options:\{ Minwidth : 150, Minheight : 150, Limit : false, Onstart : function()\{\}, Onmove : function()\{\}, Onstop : function()\{\} \}, initialize:function(obj,options)\{ this.\_obj = obj; this.\_resizeelm = null; this.\_fR = BindAsEventListener(this,this.Resize); this.\_fS = Bind(this,this.Stop); this.Minwidth = this.options.Minwidth; this.Minheight = this.options.Minheight; this.Limit = this.options.Limit; this.Onstart = this.options.Onstart; this.Onstop = this.options.Onstop; this.Onmove = this.options.Onmove; Extend(this,options||\{\}) \}, Set:function(resize, side)\{ this.\_resizeelm = resize; var fun; if(!this.\_resizeelm)return; switch (side.toLowerCase()) \{ case "up" : fun = this.Up; break; case "right": fun = this.Right; break; case "down": fun = this.Down; break; case "left": fun = this.Left; break; case "left-up": fun = this.LeftUp; break; case "right-up": fun = this.RightUp; break; case "left-down": fun = this.LeftDown; break; case "right-down": fun = this.RightDown; break; default : return; \} addListener(this.\_resizeelm,'mousedown',BindAsEventListener(this, this.Start, fun)); \}, Start:function(e,fun)\{ document.all?(e.cancelBubble=true):e.stopPropagation() this.\_fun = fun ; this.\_original = \[parseInt(CurrentStyle(this.\_obj).width),parseInt(CurrentStyle(this.\_obj).height),parseInt(CurrentStyle(this.\_obj).left),parseInt(CurrentStyle(this.\_obj).top)\] this.\_width = (parseInt(CurrentStyle(this.\_obj).left)||0) + parseInt(CurrentStyle(this.\_obj).width); this.\_height = (parseInt(CurrentStyle(this.\_obj).top) ||0) + parseInt(CurrentStyle(this.\_obj).height); addListener(document,"mousemove",this.\_fR); addListener(document,'mouseup',this.\_fS) \}, Resize:function(e)\{ this.\_fun(e); this.Onmove(e); isIE?(this.\_resizeelm.onlosecapture=function()\{this.\_fS\}):(this.\_resizeelm.οnblur=function()\{this.\_fS\}) \}, Stop:function()\{ removeListener(document, "mousemove", this.\_fR); removeListener(document, "mousemove", this.\_fS); window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); \}, Up:function(e)\{ if(this.\_height>e.clientY) \{ this.\_obj.style.top = e.clientY + "px"; this.\_obj.style.height = Math.max(this.\_height-e.clientY,this.Minheight) + "px"; return; \} !this.Limit&&this.TurnDown(e); \}, Down:function(e)\{ if(e.clientY>this.\_original\[3\]) \{ this.\_obj.style.top = this.\_original\[3\]+'px'; this.\_obj.style.height =Math.max( e.clientY - this.\_original\[3\],this.Minheight)+'px'; return; \} !this.Limit&&this.TurnUp(e); \}, Left:function(e)\{ if(e.clientX<this.\_width) \{ this.\_obj.style.left = e.clientX +'px'; this.\_obj.style.width = Math.max(this.\_width-e.clientX,this.Minwidth) + "px"; return; \} if(!this.Limit) \{ this.\_obj.style.left = this.\_width+'px'; this.TurnRight(e); \} \}, Right:function(e)\{ if(e.clientX>this.\_original\[2\]) \{ this.\_obj.style.left = this.\_original\[2\]+'px'; this.\_obj.style.width = Math.max(e.clientX- this.\_original\[2\],this.Minwidth)+ "px"; return; \} !this.Limit&&this.TurnLeft(e) \}, LeftUp:function(e)\{ this.Up(e);this.Left(e); \}, RightUp:function(e)\{ this.Up(e);this.Right(e); \}, LeftDown:function(e)\{ this.Left(e);this.Down(e); \}, RightDown:function(e)\{ this.Right(e);this.Down(e); \}, TurnDown:function(e)\{ this.\_obj.style.top = this.\_height+'px'; this.\_obj.style.height = e.clientY - this.\_height + 'px'; \}, TurnUp:function(e)\{ this.\_obj.style.top = e.clientY +'px'; this.\_obj.style.height = this.\_original\[3\] - e.clientY +'px'; \}, TurnRight:function(e)\{ this.\_obj.style.width = e.clientX- this.\_width +'px' \}, TurnLeft:function(e)\{ this.\_obj.style.left = e.clientX +'px' this.\_obj.style.width = this.\_original\[2\]-e.clientX+'px'; \} \}) var Dialog = new Class(\{ options:\{ Top : 100, Left : 100, Width : 400, Height : 400, Titleheight : 24, Info : "新闻标题", Content : "无内容", HideIco : true, zIndex : 2, Ondisappear : function()\{\} \}, initialize:function(options)\{ this.\_dragobj = null; this.\_resize = null; this.\_body = null; this.\_hide = null; this.Padding = 0; this.Info = this.options.Info; this.Content = this.options.Content; this.Top = this.options.Top; this.Left = this.options.Left; this.Width = this.options.Width; this.Height = this.options.Height; this.HideIco = this.options.HideIco; this.Titleheight= this.options.Titleheight; this.zIndex = this.options.zIndex; this.Ondisappear= this.options.Ondisappear; Extend(this,options||\{\}); Dialog.zIndex = this.zIndex; var obj = \['dialogcontainter','dialogtitle','dialogtitleinfo','dialogtitleico','dialogbody','dialogbottom','dialogtitleico1'\]; for(var i = 0;i<obj.length;i++) \{ obj\[i\]=create('div',null,function(elm)\{elm.className = obj\[i\];\}); \} obj\[2\].innerHTML = this.Info; obj\[4\].innerHTML = this.Content; obj\[1\].appendChild(obj\[2\]); obj\[1\].appendChild(obj\[3\]); if(this.HideIco)obj\[1\].appendChild(obj\[6\]); obj\[0\].appendChild(obj\[1\]); obj\[0\].appendChild(obj\[4\]); obj\[0\].appendChild(obj\[5\]); document.body.appendChild(obj\[0\]); this.\_dragobj = obj\[0\]; this.\_resize = obj\[5\]; this.\_body = obj\[4\]; this.\_hide = obj\[6\]; // 设置Dialog的长 宽 ,left ,top with(this.\_dragobj.style)\{ height = this.Height + "px";top = this.Top + "px";width = this.Width +"px";left = this.Left + "px";zIndex = this.zIndex; \} this.Padding = parseInt(CurrentStyle(this.\_body).paddingLeft); this.\_dragobj.style.zIndex = this.zIndex; this.\_body.style.height = this.Height - this.Titleheight-this.Padding\*2+'px'; // addListener(this.\_body,'mousedown',BindAsEventListener(this,this.Show)); addListener(obj\[3\],'mousedown',BindAsEventListener(this,this.Disappear)); addListener(this.\_hide,'mousedown',BindAsEventListener(this, this.Hide)); \}, Show:function(e)\{ isIE?(e.cancelBubble=true):(e.stopPropagation()); this.\_dragobj.style.zIndex = ++Dialog.zIndex; \}, Disappear:function()\{ document.body.removeChild(this.\_dragobj); this.Ondisappear() \}, Hide:function(e)\{ isIE?(e.cancelBubble=true):(e.stopPropagation()); this.\_dragobj.style.height = "auto"; this.\_resize.style.display=this.\_body.style.display = CurrentStyle(this.\_body).display=="none"?"block":"none"; this.\_hide.style.backgroundPosition = CurrentStyle(this.\_hide).backgroundPosition=="-160px -16px"?"-144px -16px":"-160px -16px"; \} \}) var Tween = new Class(\{ options:\{ t : 0, b\_x : 0, c\_x : 0, b\_y : 0, c\_y : 0, d : 100, Time : 10, Quad : function(t,b,c,d)\{ return c\*(t/=d)\*t\*t + b; \} \}, initialize:function(obj,options)\{ this.\_obj = obj; this.timer = null; this.t = this.options.t; this.b\_x = this.options.b\_x; this.c\_x = this.options.c\_x; this.b\_y = this.options.b\_y; this.c\_y = this.options.c\_y; this.d = this.options.d; this.Time = this.options.Time; this.Quad = this.options.Quad; Extend(this,options||\{\}); \}, Run:function()\{ var self = this; if(this.t<this.d) \{ this.RunTo(Math.round(self.Quad(self.t++, self.b\_x, self.c\_x, self.d)),'left'); this.RunTo(Math.round(self.Quad(self.t++, self.b\_y, self.c\_y, self.d)),'top'); this.timer = setTimeout(Bind(self,self.Run),self.Time) \} \}, RunTo:function(i,css)\{ if(css) this.\_obj.style\[css\] = i + 'px'; \} \}) var LightBox = new Class(\{ options:\{ Obj : null, Color : "\#fff", Opacity : 50, zIndex : 1000 \}, initialize:function(options)\{ this.Obj = this.options.Obj; this.Color = this.options.Color; this.Opacity = this.options.Opacity; this.zIndex = this.options.zIndex; Extend(this, options || \{\}); this.Obj = this.Obj||document.body.insertBefore(document.createElement("div"), document.body.childNodes\[0\]) ///据说document.body.appendChild()导致IE已终止操作bug with(this.Obj.style)\{ display = "none"; zIndex = this.zIndex; left = top = "0px"; position = "fixed"; width = height = "100%"; \}; if(isIE6)\{ this.Obj.style.position = "absolute"; this.\_resize = Bind(this, function()\{ this.Obj.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px"; this.Obj.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px" \}); \} this.Obj.innerHTML = '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>'; \}, Show:function() \{ var self = this; if(isIE6)\{ this.\_resize(); addListener(window,"resize", self.\_resize); \} with(this.Obj.style)\{ isIE ? filter = "alpha(opacity:" + this.Opacity + ")" : opacity = this.Opacity / 100; backgroundColor = this.Color; display = "block"; \}; \}, Close: function() \{ this.Obj.style.display = "none"; \} \}); var Button = new Class(\{ options:\{ Text : "确定" \}, initialize:function(options)\{ this.obj = null; this.Text = this.options.Text; Extend(this,options||\{\}); var arr = \["btn","btnleft","btnmiddle","btnright"\]; var i = arr.length; for(;i>-1;i--) \{ arr\[i\] = create('div',null,function(elm)\{with(elm)\{elm.className = arr\[i\]\}\})\} this.obj = arr\[0\]; this.obj.appendChild(arr\[1\]);this.obj.appendChild(arr\[2\]);this.obj.appendChild(arr\[3\]); arr\[2\].innerHTML = this.Text; addListener(this.obj,'mouseover',Bind(this,this.Changebg)); addListener(this.obj,'mouseout',Bind(this,this.Changebg)) ; \}, Changebg:function()\{ var divs = this.obj.getElementsByTagName('div') divs\[1\].className=divs\[1\].className == "btnmiddle"?"btnmiddle1":"btnmiddle"; divs\[2\].className=divs\[2\].className == "btnright"?"btnright1":"btnright"; divs\[0\].className=divs\[0\].className == "btnleft"?"btnleft1":"btnleft"; \} \}) var Box = new LightBox(\{Color:"\#666666",Opacity:10,zIndex:5\}); //第一个拖动效果 "透明效果" 设置如下: var d = new Dialog(\{Info:"第一个例子",Content:"透明的样子"\}); //设置拖动 new Drag(d.\_dragobj,\{ Limit:true, Onstart:function()\{ d.\_dragobj.style.zIndex = ++Dialog.zIndex; isIE?(this.\_obj.style.filter="alpha(opacity:50)"):(this.\_obj.style.opacity=0.5); \}, Onstop:function()\{ isIE?(this.\_obj.style.filter="alpha(opacity:100)"):(this.\_obj.style.opacity=1); \} \}); //设置拖拉 new Resize(d.\_dragobj,\{ Limit:true, Onmove:function(e)\{ var l = d.Padding\*2+d.Titleheight; d.\_body.style.height = Math.max( e.clientY -d.\_dragobj.offsetTop - l ,this.Minheight-l)+'px'; \} \}).Set(d.\_resize,'right-down'); / //带移动样式的拖动 var c = new Dialog(\{Top:150,Left:150,objleft:0,objtop:0,Info:"第二个例子",Content:"虚线框带缓动"\}); new Drag(c.\_dragobj,\{ Limit:true, custom:true, Onstart:function()\{ c.\_dragobj.style.zIndex = ++Dialog.zIndex; var self = this; create('div',document.body,function(elm)\{ self.customobj = elm; with(elm)\{ className="bgdiv1"; style.zIndex = Dialog.zIndex; style.width=self.\_obj.offsetWidth+'px';style.height=self.\_obj.offsetHeight+'px'; style.left=getobjpos(self.\_obj,1)+'px';style.top=getobjpos(self.\_obj,0)+'px'; style.position="absolute"; \} \}) this.objleft = this.\_obj.offsetLeft; this.objtop = this.\_obj.offsetTop; \}, Onstop:function()\{ new Tween(this.\_obj,\{ b\_x:this.objleft, b\_y:this.objtop, c\_x:parseInt(CurrentStyle(this.customobj).left)-this.objleft, c\_y:parseInt(CurrentStyle(this.customobj).top)-this.objtop, d:30 \}).Run(); document.body.removeChild(this.customobj); \} \}); new Resize(c.\_dragobj,\{ Limit:true, Onmove:function(e)\{ var l = c.Padding\*2+c.Titleheight; c.\_body.style.height = Math.max( e.clientY -c.\_dragobj.offsetTop - l ,this.Minheight-l)+'px'; \} \}).Set(c.\_resize,'right-down'); // var Alert\_btn = new Button(\{Text:'弹出框!'\}) document.body.appendChild(Alert\_btn.obj) var Create\_btn = new Button(\{Text:'Create'\}) document.body.appendChild(Create\_btn.obj) addListener(Alert\_btn.obj,'click',ale); addListener(Create\_btn.obj,'click',cre); function ale()\{ Box.Obj.style.zIndex = ++Dialog.zIndex; Box.Show(); var d = new Dialog(\{ HideIco:false, zIndex:++Dialog.zIndex, Height:150, Width:200, Init:function()\{ this.\_dragobj.style.left = document.documentElement.clientWidth/2 -this.\_dragobj.offsetWidth/2 +'px' this.\_dragobj.style.top = document.documentElement.clientHeight/2 -this.\_dragobj.offsetHeight/2 +'px' \}, Ondisappear:function()\{Box.Close()\} \}); new Drag(d.\_dragobj,\{ Limit:true, Onstart:function()\{ d.\_dragobj.style.zIndex = ++Dialog.zIndex; isIE?(this.\_obj.style.filter="alpha(opacity:50)"):(this.\_obj.style.opacity=0.5); \}, Onstop:function()\{ isIE?(this.\_obj.style.filter="alpha(opacity:100)"):(this.\_obj.style.opacity=1); \} \}); new Resize(d.\_dragobj,\{ Limit:true, Onmove:function(e)\{ var l = d.Padding\*2+d.Titleheight; d.\_body.style.height = Math.max( e.clientY -d.\_dragobj.offsetTop - l ,this.Minheight-l)+'px'; \} \}).Set(d.\_resize,'right-down'); d.Init(); \} var num = 0; function cre()\{ var d = new Dialog(\{Info:"第"+(++num)+"个例子",Content:"内容"+num,zIndex:++Dialog.zIndex,Left:130+num\*10,Top:130+num\*10\}); //设置拖动 new Drag(d.\_dragobj,\{Onstart:function()\{d.\_dragobj.style.zIndex = ++Dialog.zIndex;\}\}); //设置拖拉 new Resize(d.\_dragobj,\{ Limit:true, Onmove:function(e)\{ var l = d.Padding\*2+d.Titleheight; d.\_body.style.height = Math.max( e.clientY -d.\_dragobj.offsetTop - l ,this.Minheight-l)+'px'; \} \}).Set(d.\_resize,'right-down'); \} </script> </body> </html>