看了 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'});
代码 修改后如下:
rect.js 写道
(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(s){var t=Object.extend({container:null,style:null},s||{});var q=$C("div");q.className="roundrect";if(t.width){q.style.width=t.width}var m=new Moogens.Dom.Node($C("b"));q.appendChild(m.css(d).getElement());var k=new Moogens.Dom.Node($C("b"));q.appendChild(k.css(c).getElement());var j=new Moogens.Dom.Node($C("b"));q.appendChild(j.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 i=new Moogens.Dom.Node(Moogens.Dom.get("div.bb",l)[0]);i.css(f);q.appendChild(n.getElement());var o=new Moogens.Dom.Node($C("b"));q.appendChild(o.css(a).getElement());var p=new Moogens.Dom.Node($C("b"));q.appendChild(p.css(c).getElement());var r=new Moogens.Dom.Node($C("b"));q.appendChild(r.css(d).getElement());this.get=function(){return q};this.setTitle=function(u){t.title=u&&typeof u=="string"?u:"title must string";h.text(t.title)};this.setContent=function(u){t.content=u&&typeof u=="string"?u:"content must string";i.html(t.content)};this.customStyle=function(w){var v=Object.extend({bar:"#B8E7B3",border:"#E7F9E3"},w);var y={background:v.bar};var x={background:v.border,"border-left-color":v.bar,"border-right-color":v.bar};var u={background:v.border};m.css(y);k.css(x);j.css(x);n.css(x);h.css(u);o.css(x);p.css(x);r.css(y)};if(t.style){this.customStyle(t.style)}this.setTitle(t.title);this.setContent(t.content);if(t.container){var g=Moogens.Dom.get(t.container)[0];if(g&&g.nodeType==1){t.container=g;g.appendChild(q)}}}})();