[置顶] 为自己的JS库 moogens 增加简易矩形组件 -- 改进版本

本文链接：https://blog.csdn.net/vb2005xu/article/details/52539891

看了 http://www.iteye.com/topic/610962 好东西啊把它写成自己的吧.... 今天先做个基本版明天回家优化...

先看图效果 :

谢谢 cjx186 的好东西啊....

代码如下:

(function(){var d={height:"1px","font-size":"1px",overflow:"hidden",display:"block",background:"#B2D0EA",margin:"0 3px",clear:"both"};var c={height:"1px","font-size":"1px",overflow:"hidden",display:"block",background:"#EDF7FF",margin:"0 1px",clear:"both","border-right":"2px solid #B2D0EA","border-left":"2px solid #B2D0EA"};var a={height:"1px","font-size":"1px",overflow:"hidden",display:"block",background:"#EDF7FF",margin:"0 1px",clear:"both","border-right":"1px solid #B2D0EA","border-left":"1px solid #B2D0EA"};var e={"font-size":"12px",overflow:"hidden",display:"block",background:"#EDF7FF",margin:"0 0px",clear:"both","border-right":"1px solid #B2D0EA","border-left":"1px solid #B2D0EA"};var b={background:"#EDF7FF",margin:"0 2px",padding:"5px"};var f={background:"#FFFFFF",margin:"0 2px",padding:"5px"};Moogens.UI.RoundRect=function(){var g=$C("div");g.className="roundrect";var m=new Moogens.Dom.Node($C("b"));g.appendChild(m.css(d).getElement());var k=new Moogens.Dom.Node($C("b"));g.appendChild(k.css(c).getElement());var i=new Moogens.Dom.Node($C("b"));g.appendChild(i.css(a).getElement());var l=$C("div");var n=new Moogens.Dom.Node(l);n.css(e).html("<div class='bt'></div><div class='bb'></div>");var h=new Moogens.Dom.Node(Moogens.Dom.get("div.bt",l)[0]);h.css(b);var j=new Moogens.Dom.Node(Moogens.Dom.get("div.bb",l)[0]);j.css(f);g.appendChild(n.getElement());var o=new Moogens.Dom.Node($C("b"));g.appendChild(o.css(a).getElement());var p=new Moogens.Dom.Node($C("b"));g.appendChild(p.css(c).getElement());var q=new Moogens.Dom.Node($C("b"));g.appendChild(q.css(d).getElement());this.getHeader=function(){return h};this.getBody=function(){return j};this.get=function(){return g}}})();

压缩后只有 1.5k 不压缩就80行....

========================================================================

修订版本:

	
			var rect1 = new Moogens.UI.RoundRect({
				container: '#roundrects',				
				title: "后台管理 -- 猪猪阵营(我的小屋)",
				content: $ID('header').innerHTML,				
			});	
			var rect2 = new Moogens.UI.RoundRect({
				container: '#roundrects',				
				title: "后台管理 -- 猪猪阵营(我的小屋)",
				style: {} ,width: '400px',
				content: $ID('header').innerHTML,				
			});				
			
			var rect3 = new Moogens.UI.RoundRect({
				container: '#roundrects',				
				title: "后台管理 -- 猪猪阵营(我的小屋)",
				width: '400px',
				content: $ID('header').innerHTML,				
			});	
			
			rect3.customStyle({bar: '#efc',border:'#636'});