Browse Source

优化一下left、right布局

es6
guy 4 years ago
parent
commit
86ca56fd8f
  1. 8
      src/core/base.js
  2. 46
      src/core/wrapper/layout/layout.flow.js

8
src/core/base.js

@ -437,14 +437,10 @@ if (!_global.BI) {
}); });
_.extend(BI, { _.extend(BI, {
inherit: function (sb, sp, overrides) { inherit: function (sp, overrides) {
if (typeof sp === "object") { var sb = function () {
overrides = sp;
sp = sb;
sb = function () {
return sp.apply(this, arguments); return sp.apply(this, arguments);
}; };
}
var F = function () { var F = function () {
}, spp = sp.prototype; }, spp = sp.prototype;
F.prototype = spp; F.prototype = spp;

46
src/core/wrapper/layout/layout.flow.js

@ -10,7 +10,7 @@
BI.FloatLeftLayout = BI.inherit(BI.Layout, { BI.FloatLeftLayout = BI.inherit(BI.Layout, {
props: function () { props: function () {
return BI.extend(BI.FloatLeftLayout.superclass.props.apply(this, arguments), { return BI.extend(BI.FloatLeftLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-left clearfix", baseCls: "bi-left clearfix border-sizing",
hgap: 0, hgap: 0,
vgap: 0, vgap: 0,
lgap: 0, lgap: 0,
@ -21,6 +21,19 @@ BI.FloatLeftLayout = BI.inherit(BI.Layout, {
}, },
render: function () { render: function () {
BI.FloatLeftLayout.superclass.render.apply(this, arguments); BI.FloatLeftLayout.superclass.render.apply(this, arguments);
var o = this.options;
if (o.hgap > 0) {
this.element.css({
"padding-left": o.hgap / 2 / BI.pixRatio + BI.pixUnit,
"padding-right": o.hgap / 2 / BI.pixRatio + BI.pixUnit
});
}
if (o.vgap > 0) {
this.element.css({
"padding-top": o.vgap / 2 / BI.pixRatio + BI.pixUnit,
"padding-bottom": o.vgap / 2 / BI.pixRatio + BI.pixUnit
});
}
this.populate(this.options.items); this.populate(this.options.items);
}, },
@ -42,22 +55,22 @@ BI.FloatLeftLayout = BI.inherit(BI.Layout, {
} }
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
w.element.css({ w.element.css({
"margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit "margin-top": (o.vgap / 2 + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
}); });
} }
if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
w.element.css({ w.element.css({
"margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit "margin-left": (o.hgap / 2 + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
}); });
} }
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
w.element.css({ w.element.css({
"margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit "margin-right": (o.hgap / 2 + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
}); });
} }
if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
w.element.css({ w.element.css({
"margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit "margin-bottom": (o.vgap / 2 + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
}); });
} }
return w; return w;
@ -86,7 +99,7 @@ BI.shortcut("bi.left", BI.FloatLeftLayout);
BI.FloatRightLayout = BI.inherit(BI.Layout, { BI.FloatRightLayout = BI.inherit(BI.Layout, {
props: function () { props: function () {
return BI.extend(BI.FloatRightLayout.superclass.props.apply(this, arguments), { return BI.extend(BI.FloatRightLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-right clearfix", baseCls: "bi-right clearfix border-sizing",
hgap: 0, hgap: 0,
vgap: 0, vgap: 0,
lgap: 0, lgap: 0,
@ -97,6 +110,19 @@ BI.FloatRightLayout = BI.inherit(BI.Layout, {
}, },
render: function () { render: function () {
BI.FloatRightLayout.superclass.render.apply(this, arguments); BI.FloatRightLayout.superclass.render.apply(this, arguments);
var o = this.options;
if (o.hgap > 0) {
this.element.css({
"padding-left": o.hgap / 2 / BI.pixRatio + BI.pixUnit,
"padding-right": o.hgap / 2 / BI.pixRatio + BI.pixUnit
});
}
if (o.vgap > 0) {
this.element.css({
"padding-top": o.vgap / 2 / BI.pixRatio + BI.pixUnit,
"padding-bottom": o.vgap / 2 / BI.pixRatio + BI.pixUnit
});
}
this.populate(this.options.items); this.populate(this.options.items);
}, },
@ -118,22 +144,22 @@ BI.FloatRightLayout = BI.inherit(BI.Layout, {
} }
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
w.element.css({ w.element.css({
"margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit "margin-top": (o.vgap / 2 + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
}); });
} }
if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
w.element.css({ w.element.css({
"margin-left": (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit "margin-left": (o.hgap / 2 + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
}); });
} }
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
w.element.css({ w.element.css({
"margin-right": ((i === 0 ? o.hgap : 0) + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit "margin-right": (o.hgap / 2 + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
}); });
} }
if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
w.element.css({ w.element.css({
"margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit "margin-bottom": (o.vgap / 2 + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
}); });
} }
return w; return w;

Loading…
Cancel
Save