为自己的JS库 moogens 增加 简易矩形 组件 -- 改进版本
看了 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'});?
?
?
代码 修改后如下:
(function() {/** * MGUI for Moogens is a simple js ui library. */Moogens.UI = {meta : {author : "kenxu",version : "0.01"},setBathpath: function(uri){this.bathpath = uri ;}};// 自动设置UI库 基本bathpathvar scripts = $TagN("script");for (var i = 0,pattern = /.*\/mgui\/global.js($|\?.*)/; i < scripts.length; i++) {if (pattern.test(scripts[i].src)){Moogens.UI.setBathpath(scripts[i].src.replace(/global\.js.*/, ''));break;}}/** * 浏览器的 window 对象 封装器 */Moogens.UI.GlobalWindow = {getSize : function() {return {x: window.innerWidth? window.innerWidth: (__doc.compatMode == 'CSS1Compat'? __doc.documentElement.clientWidth: (__doc.body? __doc.body.clientWidth: window.undefined)),y: window.innerHeight? window.innerHeight: (__doc.compatMode == 'CSS1Compat'? __doc.documentElement.clientHeight: (__doc.body? __doc.body.clientHeight: window.undefined))};} ,/** * 获取全高/全宽 == 用于遮罩层 */getFullSize: function(){var size = this.getSize();return {x: size.x > __doc.body.scrollWidth ? size.x: __doc.body.scrollWidth ,y: size.y > __doc.body.scrollHeight ? size.y : __doc.body.scrollHeight} ;}};})();<!DOCTYPE html><html> <head> <title>后台管理 -- 猪猪阵营(我的小屋)</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="/js/moogens.js" type="text/javascript"></script><script src="/js/mgui/global.js" type="text/javascript"></script><script src="/js/mgui/roundrect/component.js" type="text/javascript"></script><script type="text/javascript">Moogens.Dom.onReady(function(){var queue = new Moogens.Queue(1,"gsg",$Get('div > ul'));while(queue.size)console.log(queue.shift(),queue.size);var rect = new Moogens.UI.RoundRect();rect.getHeader().text("后台管理 -- 猪猪阵营(我的小屋)");rect.getBody().html($ID('header').innerHTML);$ID('roundrect').appendChild(rect.get());$ID('roundrect').appendChild($C('HR'));var rect = new Moogens.UI.RoundRect();rect.getHeader().text("后台管理 -- 猪猪阵营(我的小屋)");rect.getBody().html($ID('header').innerHTML);$ID('roundrect').appendChild(rect.get());});</script> </head> <body><div id='container'><div id='header' style="display: none;"><ul id="site_nav" name="code">var rect = new Moogens.UI.RoundRect({container: '#roundrects',//container: $TagN('body')[0],title: "后台管理 -- 猪猪阵营(我的小屋)",width: '400px',content: $ID('header').innerHTML,draggable: false});// rect.get().onclick = function(){console.log(this);var styles = [{bar: '#efc',border:'#636'},{bar: '#521',border:'#018'},{bar: 'red',border:'gold'},{bar: 'silver',border:'#efc'},];this._1 = this._1 ? this._1 : 0 ;rect.customStyle(styles[this._1]);this._1 ++ ;if (this._1 >= styles.length)this._1 = 0 ;};