Dialog二

scomouse

浏览: 14950 次
性别:
来自: 广州

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (67)

社区版块

存档分类

算是杂合在一起了

一个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.onblur=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>

分享到：