以前使用简单的组件，但没用过它的布局，今天用了一下布局，发现还有有些问题。
1、layout的build
_bulid: function ()
{
var g = this, p = this.options;
$("> .l-layout-left .l-layout-header,> .l-layout-right .l-layout-header", g.layout).hover(function ()
{
$(this).addClass("l-layout-header-over");
}, function ()
{
$(this).removeClass("l-layout-header-over");
});
$(".l-layout-header-toggle", g.layout).hover(function ()
{
$(this).addClass("l-layout-header-toggle-over");
}, function ()
{
$(this).removeClass("l-layout-header-toggle-over");
});
$(".l-layout-header-toggle", g.left).click(function ()
{
g.setLeftCollapse(true);
});
$(".l-layout-header-toggle", g.right).click(function ()
{
g.setRightCollapse(true);
});
//set top
g.middleTop = 0;
if (g.top)
{
g.middleTop += g.top.height();
g.middleTop += parseInt(g.top.css('borderTopWidth'));
g.middleTop += parseInt(g.top.css('borderBottomWidth'));
g.middleTop += p.space;
}
if (g.left)
{
g.left.css({ top: g.middleTop });
g.leftCollapse.css({ top: g.middleTop });
}
if (g.center) g.center.css({ top: g.middleTop });
if (g.right)
{
g.right.css({ top: g.middleTop });
g.rightCollapse.css({ top: g.middleTop });
}
//set left
if (g.left) g.left.css({ left: 0 });
g._onResize();
//g._onResize(); //commend by danielinbiti，这里刷新两次不知为何，去掉后也没问题。
},_onResize: function ()
{
var g = this, p = this.options;
var oldheight = g.layout.height();
//set layout height
var h = 0;
var windowHeight = $(window).height();
var parentHeight = null;
if (typeof (p.height) == "string" && p.height.indexOf('%') > 0)
{
var layoutparent = g.layout.parent();
if (p.inWindow || layoutparent[0].tagName.toLowerCase() == "body")
{
parentHeight = windowHeight;
parentHeight -= parseInt($('body').css('paddingTop'));
parentHeight -= parseInt($('body').css('paddingBottom'));
}
else
{
parentHeight = layoutparent.height();
}
h = parentHeight * parseFloat(p.height) * 0.01;
if (p.inWindow || layoutparent[0].tagName.toLowerCase() == "body")
h -= (g.layout.offset().top - parseInt($('body').css('paddingTop')));
}
else
{
h = parseInt(p.height);
}
h += p.heightDiff;
g.layout.height(h);
g.layoutHeight = g.layout.height();
g.middleWidth = g.layout.width();
g.middleHeight = g.layout.height();
if (g.top)
{
g.middleHeight -= g.top.height();
g.middleHeight -= parseInt(g.top.css('borderTopWidth'));
g.middleHeight -= parseInt(g.top.css('borderBottomWidth'));
g.middleHeight -= p.space;
}
if (g.bottom)
{
g.middleHeight -= g.bottom.height();
g.middleHeight -= parseInt(g.bottom.css('borderTopWidth'));
g.middleHeight -= parseInt(g.bottom.css('borderBottomWidth'));
g.middleHeight -= p.space;
}
//specific
g.middleHeight -= 2;
if (g.hasBind('heightChanged') && g.layoutHeight != oldheight)
{
g.trigger('heightChanged', [{ layoutHeight: g.layoutHeight, diff: g.layoutHeight - oldheight, middleHeight: g.middleHeight}]);
}
if (g.center)
{
g.centerWidth = g.middleWidth;
g.centerWidth -= parseInt(g.center.css('borderLeftWidth'));//add by danielinbiti,这里如果center有border宽度的话，需要减去自己的宽度
g.centerWidth -= parseInt(g.center.css('borderRightWidth'));//add by danielinbiti，如果不减去，再次resize的话，layout.width()根据jquery的方式，是会取clientwidth，导致宽度变小。
if (g.left)
{
if (g.isLeftCollapse)
{
g.centerWidth -= g.leftCollapse.width();
g.centerWidth -= parseInt(g.leftCollapse.css('borderLeftWidth'));
g.centerWidth -= parseInt(g.leftCollapse.css('borderRightWidth'));
g.centerWidth -= parseInt(g.leftCollapse.css('left'));
g.centerWidth -= p.space;
}
else
{
g.centerWidth -= g.leftWidth;
g.centerWidth -= parseInt(g.left.css('borderLeftWidth'));
g.centerWidth -= parseInt(g.left.css('borderRightWidth'));
g.centerWidth -= parseInt(g.left.css('left'));
g.centerWidth -= p.space;
}
}
if (g.right)
{
if (g.isRightCollapse)
{
g.centerWidth -= g.rightCollapse.width();
g.centerWidth -= parseInt(g.rightCollapse.css('borderLeftWidth'));
g.centerWidth -= parseInt(g.rightCollapse.css('borderRightWidth'));
g.centerWidth -= parseInt(g.rightCollapse.css('right'));
g.centerWidth -= p.space;
}
else
{
g.centerWidth -= g.rightWidth;
g.centerWidth -= parseInt(g.right.css('borderLeftWidth'));
g.centerWidth -= parseInt(g.right.css('borderRightWidth'));
g.centerWidth -= p.space;
}
}
g.centerLeft = 0;
if (g.left)
{
if (g.isLeftCollapse)
{
g.centerLeft += g.leftCollapse.width();
g.centerLeft += parseInt(g.leftCollapse.css('borderLeftWidth'));
g.centerLeft += parseInt(g.leftCollapse.css('borderRightWidth'));
g.centerLeft += parseInt(g.leftCollapse.css('left'));
g.centerLeft += p.space;
}
else
{
g.centerLeft += g.left.width();
g.centerLeft += parseInt(g.left.css('borderLeftWidth'));
g.centerLeft += parseInt(g.left.css('borderRightWidth'));
g.centerLeft += p.space;
}
}
g.center.css({ left: g.centerLeft });
g.centerWidth >= 0 && g.center.width(g.centerWidth);
g.middleHeight >= 0 && g.center.height(g.middleHeight);
var contentHeight = g.middleHeight;
if (g.center.header) contentHeight -= g.center.header.height();
contentHeight >= 0 && g.center.content.height(contentHeight);
g._updateCenterBottom(true);
}
if (g.left)
{
g.leftCollapse.height(g.middleHeight);
g.left.height(g.middleHeight);
}
if (g.right)
{
g.rightCollapse.height(g.middleHeight);
g.right.height(g.middleHeight);
//set left
g.rightLeft = 0;
if (g.left)
{
if (g.isLeftCollapse)
{
g.rightLeft += g.leftCollapse.width();
g.rightLeft += parseInt(g.leftCollapse.css('borderLeftWidth'));
g.rightLeft += parseInt(g.leftCollapse.css('borderRightWidth'));
g.rightLeft += p.space;
}
else
{
g.rightLeft += g.left.width();
g.rightLeft += parseInt(g.left.css('borderLeftWidth'));
g.rightLeft += parseInt(g.left.css('borderRightWidth'));
g.rightLeft += parseInt(g.left.css('left'));
g.rightLeft += p.space;
}
}
if (g.center)
{
g.rightLeft += g.center.width();
g.rightLeft += parseInt(g.center.css('borderLeftWidth'));
g.rightLeft += parseInt(g.center.css('borderRightWidth'));
g.rightLeft += p.space;
}
g.right.css({ left: g.rightLeft });
}
if (g.bottom)
{
g.bottomTop = g.layoutHeight - g.bottom.height() - 2;
g.bottom.css({ top: g.bottomTop });
}
g._setDropHandlePosition();
},没人维护的的UI还是少用呀，凑合着自己改改，嫌弃easyUI没有源码，而且组件说实话也一般。原文地址：http://blog.csdn.net/danielinbiti/article/details/46536575
