模拟Dialog

青旅半醒 2022-08-06 07:29 115阅读 0赞

暂时还未全部完成.面临着一些问题

如:

拖动的bug  但拖动产生滚动  但是当往上拖动的使滚动条消失 捕捉会错位

在就是如何精简代码 等等.........  一些未发现的问题.....

只是一个原始版本 扩展待续...........

基本上是完成了

但是代码看上去比较臃肿,  不知道该如何化简

另外 感觉好像很多东西可以在回掉函数中完成   如果是这样   dialog类 就可以变的很苗条了

而在定义类时  添加回掉中的写法    似乎是个不错的注意.....   但是我没这么做

第一次把几个类合在一起  ,可能会比较冗余,  不过也没办法   谁都是在摸索中进步的.........

<!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>Dialog</title> <style type="text/css"> .div\{margin-top:3px !important;margin-top:18px;\} .input\{ height:15px; width:250px; border:1px solid \#296BC5; margin-top:10px;float:left\} .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;\} .bgdiv\{border:1px dotted \#333333;\} .bgdiv1\{background-color:\#666666;filter:alpha(opacity=30);opacity:0.3; \} .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\} .dialogbottom\{ bottom:1px; right:1px;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="font-size:12px;"> <script> var isIE = (document.all) ? true : false; var isIE6 = isIE && (\[/MSIE (/d)/.0/i.exec(navigator.userAgent)\]\[0\]\[1\] == 6); var $ = function (id) \{ return document.getElementById(id); \}; var Extend = function(destination, source) \{ for (var property in source) \{ destination\[property\] = source\[property\]; \} \} 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 CurrentStyle = function(element)\{ return element.currentStyle || document.defaultView.getComputedStyle(element, null); \} function pagerange()\{ return \{width:Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth),height:Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)\} \} function create(elm,parent,fn)\{var element = document.createElement(elm);fn&&fn(element); parent&&parent.appendChild(element);return element\}; 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)\}; 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 Dialog = new Class(\{ options:\{ Width : 400, Height : 400, Left : 100, Top : 100, Titleheight : 24, Noscroll : false, Minwidth : 150, Minheight : 150, Maxright : 9999, Maxbottom : 9999, HideIco : true, CancelIco : true, ResizeIco : false, Info : "新闻标题", Content : "无内容", Zindex : 2, Customdiv : false, Customstyle : null, Customobj : null, Onstart : function()\{\}, Onstop : function()\{\}, Ondisappear : function()\{\} \}, initialize:function(options)\{ this.\_dragobj = null; this.\_resize = null; this.\_body = null; this.\_hide = null; this.\_x = 0; this.\_y = 0; this.\_fM = BindAsEventListener(this, this.Move); this.\_fS = Bind(this, this.Stop); this.\_isdrag = null; this.\_Css = null; this.Padding = null; this.Width = this.options.Width; this.Height = this.options.Height; this.Left = this.options.Left; this.Top = this.options.Top; this.CancelIco = this.options.CancelIco; this.Info = this.options.Info; this.Content = this.options.Content; this.Minwidth = this.options.Minwidth; this.Minheight = this.options.Minheight; this.Titleheight= this.options.Titleheight; this.Zindex = this.options.Zindex; this.Customdiv = this.options.Customdiv; this.Customobj = this.options.Customobj; this.Customstyle= this.options.Customstyle; this.Noscroll = this.options.Noscroll; this.Maxright = this.options.Maxright; this.Maxbottom = this.options.Maxbottom; this.HideIco = this.options.HideIco; 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\]; o,x1,x2 设置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.\_body.style.height = this.Height - this.Titleheight-this.Padding\*2+'px'; /// addListener(this.\_dragobj,'mousedown',BindAsEventListener(this, this.Start,true)); addListener(obj\[3\],'mousedown',BindAsEventListener(this,this.Disappear)); addListener(this.\_hide,'mousedown',BindAsEventListener(this, this.Hide)); addListener(this.\_body,'mousedown',BindAsEventListener(this, this.Show)); addListener(this.\_resize,'mousedown',BindAsEventListener(this, this.Start,false)); \}, Hide:function(e)\{ document.all?(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"; \}, Disappear:function()\{ document.body.removeChild(this.\_dragobj); this.Ondisappear(); \}, Show:function(e)\{ this.\_dragobj.style.zIndex = ++Dialog.Zindex; document.all?(e.cancelBubble=true):(e.stopPropagation()) \}, Start:function(e,isdrag)\{ !isdrag&&(document.all?(e.cancelBubble=true):(e.stopPropagation())) this.\_Css = isdrag?\{x:"left",y:"top"\}:\{x:"width",y:"height"\}; this.\_isdrag = isdrag; var self = this; this.\_dragobj.style.zIndex = ++Dialog.Zindex; this.Noscroll&&(this.Maxright = pagerange().width - this.\_dragobj.offsetWidth)&&(this.Maxbottom = pagerange().height - this.\_dragobj.offsetHeight); this.\_x = isdrag?(e.clientX - this.\_dragobj.offsetLeft||0):(this.\_dragobj.offsetLeft||0) ; this.\_y = isdrag?(e.clientY - this.\_dragobj.offsetTop ||0):(this.\_dragobj.offsetTop||0); this.Customdiv&&create('div',document.body,function(elm)\{ self.Customobj = elm; with(elm)\{ //var p = self.Getobjpos(self.\_dragobj,); className=self.Customstyle; style.width=self.\_dragobj.offsetWidth+'px';style.height=self.\_dragobj.offsetHeight+'px'; style.left=self.Getobjpos(self.\_dragobj,1)+'px';style.top=self.Getobjpos(self.\_dragobj)+'px'; style.zIndex = ++Dialog.Zindex; style.position="absolute"; \} \}) if(isIE) \{ addListener(this.\_dragobj, "losecapture", this.\_fS); this.\_dragobj.setCapture(); \} else \{ e.preventDefault(); addListener(window, "blur", this.\_fS); \} addListener(document,'mousemove',this.\_fM); addListener(document,'mouseup',this.\_fS); \}, Getobjpos:function(el,left)\{ var val = 0; while (el !=null) \{ val += el\["offset" + (left? "Left": "Top")\]; el = el.offsetParent; \} return val; \}, Move:function(e)\{ window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); var i\_x = e.clientX - this.\_x, i\_y = e.clientY - this.\_y; var obj = this.Customdiv?this.Customobj:this.\_dragobj; obj.style\[this.\_Css.x\] = (this.\_isdrag?Math.min(Math.max(i\_x,0),this.Maxright):Math.max(i\_x,this.Minwidth))+'px'; obj.style\[this.\_Css.y\] = (this.\_isdrag?Math.min(Math.max(i\_y,0),this.Maxbottom):Math.max(i\_y,this.Minheight))+'px' if(!this.\_isdrag&&!this.Customdiv) this.\_body.style.height = Math.max(i\_y -this.Titleheight-this.Padding\*2,this.Minheight-this.Titleheight-this.Padding\*2)+'px'; \}, Stop:function()\{ if(this.Customdiv) \{ this.\_dragobj.style\[this.\_Css.x\] = (this.\_isdrag?parseInt(CurrentStyle(this.Customobj).left):Math.max(parseInt(CurrentStyle(this.Customobj).width),this.Minwidth)) + 'px'; this.\_dragobj.style\[this.\_Css.y\] = (this.\_isdrag?parseInt(CurrentStyle(this.Customobj).top):Math.max(parseInt(CurrentStyle(this.Customobj).height),this.Minheight)) + 'px'; if(!this.\_isdrag) this.\_body.style.height = Math.max(parseInt(CurrentStyle(this.Customobj).height) -this.Titleheight,this.Minheight-this.Titleheight)-this.Padding\*2+'px'; document.body.removeChild(this.Customobj); \} removeListener(document,'mousemove',this.\_fM); removeListener(document,'mouseup',this.\_fS); if(isIE) \{ removeListener(this.\_dragobj, "losecapture", this.\_fS); this.\_dragobj.releaseCapture(); \} else \{ removeListener(window, "blur", this.\_fS); \}; \} \}); 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"; \} \}) new Dialog(\{Info:"标题1",Content:"无样式的拖动,限制范围",Noscroll:true\}); new Dialog(\{Info:"标题2",Content:"拖动框为虚线",Customdiv:true,Customstyle:'bgdiv',Width:300,Height:300,Left:250,Top:250\}); new Dialog(\{Info:"标题3",Content:"拖动框透明层",Customdiv:true,Customstyle:'bgdiv1',Left:300,Top:300\}); var Box = new LightBox(\{Color:"\#666666",Opacity:10,zIndex:5\}); var Alert\_btn = new Button(\{Text:'Alert'\}) document.body.appendChild(Alert\_btn.obj) addListener(Alert\_btn.obj,'click',ale); var Confirm\_btn = new Button(\{Text:'Confirm'\}) document.body.appendChild(Confirm\_btn.obj) addListener(Confirm\_btn.obj,'click',Confirm); var Prompt\_btn = new Button(\{Text:'Prompt'\}) document.body.appendChild(Prompt\_btn.obj) addListener(Prompt\_btn.obj,'click',Prompt); function ale()\{ var Alert = new Dialog(\{Info:"alert",Noscroll:true,Width:300,Height:100,Zindex:++Dialog.Zindex,HideIco:false,Alert:function()\{ this.\_body.style.color ='\#296BC5'; this.\_dragobj.style.zIndex = ++Dialog.Zindex; this.\_resize.style.display = "none"; this.\_dragobj.style.textAlign = "center"; 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' this.\_body.innerHTML = "<div class='div'>你好啊<div>" ;\},Ondisappear:function()\{Box.Close();\},Button:new Button()\}) Box.Obj.style.zIndex = Dialog.Zindex; Alert.Alert(); Box.Show(); Alert.\_body.appendChild(Alert.Button.obj); addListener(Alert.Button.obj,'click',function()\{Alert.Disappear()\}) \} function Confirm()\{ var Confirm = new Dialog(\{Info:"Confirm",Noscroll:true,Width:300,Height:100,Zindex:++Dialog.Zindex,HideIco:false,Confirm:function()\{ this.\_body.style.color ='\#296BC5'; this.\_dragobj.style.zIndex = ++Dialog.Zindex; this.\_resize.style.display = "none"; this.\_dragobj.style.textAlign = "center"; 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' this.\_body.innerHTML = "<div class='div'>多重影分身之术</div>" ;\},Ondisappear:function()\{Box.Close();\},Button\_D:new Button(),Button\_C:new Button(\{Text:"取消"\})\}) Box.Obj.style.zIndex = Dialog.Zindex; Box.Show(); Confirm.Confirm(); Confirm.\_body.appendChild(Confirm.Button\_D.obj); Confirm.\_body.appendChild(Confirm.Button\_C.obj); addListener(Confirm.Button\_D.obj,'click',function()\{Confirm.Disappear()\}) addListener(Confirm.Button\_C.obj,'click',function()\{Confirm.Disappear()\}) \} function Prompt()\{ var Prompt = new Dialog(\{Info:"Prompt",Noscroll:true,Width:320,Height:120,Zindex:++Dialog.Zindex,HideIco:false,Prompt:function()\{ this.\_body.style.color ='\#296BC5'; this.\_dragobj.style.zIndex = ++Dialog.Zindex; this.\_resize.style.display = "none"; this.\_dragobj.style.textAlign = "right"; 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' this.\_body.innerHTML = "<div style='float:left'>请输入你的大名！~</div><input class='input'><br>" ;\},Ondisappear:function()\{Box.Close();\},Button\_D:new Button(),Button\_C:new Button(\{Text:"取消"\})\}) Box.Obj.style.zIndex = Dialog.Zindex; Box.Show(); Prompt.Prompt(); Prompt.\_body.appendChild(Prompt.Button\_D.obj); Prompt.\_body.appendChild(Prompt.Button\_C.obj); addListener(Prompt.Button\_D.obj,'click',function()\{Prompt.Disappear()\}) addListener(Prompt.Button\_C.obj,'click',function()\{Prompt.Disappear()\}) \} </script> </body> </html>