换blog了 csdn实在太让我伤心了
一个简单的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=utf-8" /> <title>dialog</title> <style type="text/css"> .dialog{ border:1px solid #14495f; position:absolute; font-size:13px; padding:1px; padding-bottom:2px; background-color:#94D6FF } .dialog .title{ height:24px; width:auto; background-image:url('http://widgets.ucren.com/ucren-engine/resource/skins/qq/pl-repeat-x.gif');background-position:0px -350px; border:1px solid #52A5F7; border-bottom:none } .dialog .content{ padding:10px; width:auto; background-color: #FFFFFF; border:1px solid #52A5F7; border-top:none; background-image:url(http://widgets.ucren.com/ucren-engine/resource/skins/qq/win-bd.gif); background-repeat:repeat-x;overflow:hidden } .dialog .bottom{ bottom:1px; right:1px;cursor:nw-resize;position:absolute;background-image:url('http://widgets.ucren.com/ucren-engine/resource/skins/qq/pl-no-repeat.gif');background-position:-32px -158px;width:10px;height:10px;font-size:0; } .dialog .title .info{ float:left;height:20px; margin-top:2px; margin-left:5px;line-height:20px; vertical-align:middle; color:#FFFFFF; font-weight:bold; } .dialog .title .ico{ 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://widgets.ucren.com/ucren-engine/resource/skins/qq/pl-no-repeat.gif');background-position:-160px 0px } .dialog .title .ico1{ 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://widgets.ucren.com/ucren-engine/resource/skins/qq/pl-no-repeat.gif');background-position:-144px -16px } </style> </head> <body> <input value="创建" type ="button" onclick="c()"> <script> document.all&&document.execCommand("BackgroundImageCache", false, true); function Class(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 CurrentStyle = function(element){ return element.currentStyle || document.defaultView.getComputedStyle(element, null); } var Css = function(e,o){ for(var i in o) e.style[i] = o[i]; } var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } }; var BindAsEventListener = function(object, fun,args) { var args = Array.prototype.slice.call(arguments).slice(2); return function(event) { return fun.apply(object, [event || window.event].concat(args)); } }; var Bind = function(object, fun) { var args = Array.prototype.slice.call(arguments).slice(2); return function() { return fun.apply(object, args); } }; 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(e,p,fn){ var element = document.createElement(e); p.appendChild(element);fn&&fn(element);return element; }; function Each(list, fun){ for (var i = 0, len = list.length; i < len; i++) {fun(list[i], i); } }; var Sys = (function(ua){ var s = {}; s.IE = ua.match(/msie ([\d.]+)/)?true:false; s.Firefox = ua.match(/firefox\/([\d.]+)/)?true:false; s.Chrome = ua.match(/chrome\/([\d.]+)/)?true:false; s.IE6 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6))?true:false; s.IE7 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7))?true:false; s.IE8 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8))?true:false; return s; })(navigator.userAgent.toLowerCase()); var Dialog = new Class({ options :{ Width : 300, Height : 300, Left : 100, Top : 100, Minwidth : 120, Minheight : 120, Maxright : 9999, Maxbottom : 9999, HideIco : true, ResizeIco : true, Info : "新闻标题", Content : "无内容", Onstart : function(){}, Onmove : function(){}, Onstop : function(){} }, initialize : function(options){ var obj = {}; Extend(obj,this.options); Extend(obj,options); this.option = obj; this.obj = create("div",document.body); this.fM = BindAsEventListener(this, this.move); this.fS = Bind(this,this.stop); this.type = null; this.x = null; this.y = null; this.obj.className = "dialog"; Css(this.obj,{width:obj.Width+"px",height:obj.Height+"px",left:obj.Left+"px",top:obj.Top+"px",zIndex:Dialog.zindex++}); this.obj.innerHTML ="<div class='title'><div class='info'>new</div><div class='ico'></div><div class='ico1'></div></div><div class='content'></div><div class='bottom'></div>"; var divs = this.obj.getElementsByTagName("div"); !this.option.HideIco&&(divs[3].style.display = "none"); !this.option.ResizeIco&&(divs[5].style.display = "none"); this.resize = divs[5]; this.content = divs[4]; this.Padding = parseInt(CurrentStyle(this.content).paddingLeft); this.content.style.height = this.option.Height - 24-this.Padding*2+'px'; this.content.innerHTML = this.option.Content; divs[1].innerHTML = this.option.Info; //============================================添加事件============================== addListener(this.obj,'mousedown',BindAsEventListener(this, this.start,true)); addListener(this.resize,'mousedown',BindAsEventListener(this, this.start,false)); addListener(this.content,'mousedown',BindAsEventListener(this, this.show)); addListener(divs[2],'mousedown',Bind(this, this.close)); addListener(divs[3],'mousedown',BindAsEventListener(this, this.hide)); }, start : function(e,p){ Sys.IE?(e.cancelBubble=true):(e.stopPropagation()); this.obj.style.zIndex = Dialog.zindex++; this.type = p?{x:"left",y:"top"}:{x:"width",y:"height"}; this.x = p?(e.clientX - this.obj.offsetLeft||0):(this.obj.offsetLeft||0) ; this.y = p?(e.clientY - this.obj.offsetTop ||0):(this.obj.offsetTop||0); if(Sys.IE) { 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.option.Onstart(); }, move : function(e){ window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); var i_x = e.clientX - this.x, i_y = e.clientY - this.y; this.obj.style[this.type.x]= (this.type.x == "left"?Math.min(Math.max(i_x,0),this.option.Maxright):Math.max(i_x,this.option.Minwidth))+'px'; this.obj.style[this.type.y]= (this.type.y == "top"?Math.min(Math.max(i_y,0),this.option.Maxbottom):Math.max(i_y,this.option.Minheight))+'px'; if(this.type.x != "left") this.content.style.height = Math.max(i_y -24-this.Padding*2,this.option.Minheight-24-this.Padding*2)+'px'; this.option.Onmove(); }, stop : function(){ removeListener(document,'mousemove',this.fM); removeListener(document,'mouseup',this.fS); if(Sys.IE) { removeListener(this.obj, "losecapture", this.fS); this.obj.releaseCapture(); } else removeListener(window, "blur", this._fS); this.option.Onstop(); }, show : function(e){ Sys.IE?(e.cancelBubble=true):(e.stopPropagation()); this.obj.style.zIndex = Dialog.zindex++; }, close : function(){ document.body.removeChild(this.obj); }, hide : function(e){ Sys.IE?(e.cancelBubble=true):(e.stopPropagation()); this.obj.style.zIndex = Dialog.zindex++; this.obj.style.height = "auto"; this.resize.style.display = this.content.style.display = CurrentStyle(this.content).display=="none"?"block":"none"; this.obj.getElementsByTagName("div")[3].style.backgroundPosition = CurrentStyle(this.content).display!="none"?"-144px -16px":"-160px -16px"; } }); Dialog.zindex =2,i=0; window.onload = function(){ new Dialog(); new Dialog({Left:600,Top:200, Width:450, Height:150,ResizeIco:false,HideIco:false,Info:"测试demo",Content:"没有隐藏按纽和所放按牛"}); } function c(){ new Dialog({Info:"标题"+(++i),Content:"无内容",Left:100+i*10,Top:100+i*10}); } </script> </body> </html>
浙公网安备 33010602011771号