Browse Source

布局支持百分比

es6
guy 3 years ago
parent
commit
94564271eb
  1. 24
      src/core/wrapper/layout.js
  2. 8
      src/core/wrapper/layout/adapt/absolute.center.js
  3. 11
      src/core/wrapper/layout/adapt/adapt.table.js
  4. 14
      src/core/wrapper/layout/fill/float.fill.horizontal.js
  5. 2
      src/core/wrapper/layout/flex/flex.horizontal.js
  6. 2
      src/core/wrapper/layout/flex/flex.vertical.js
  7. 2
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
  8. 2
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
  9. 28
      src/core/wrapper/layout/layout.absolute.js
  10. 12
      src/core/wrapper/layout/layout.adaptive.js
  11. 40
      src/core/wrapper/layout/layout.border.js
  12. 8
      src/core/wrapper/layout/layout.card.js
  13. 16
      src/core/wrapper/layout/layout.flow.js
  14. 16
      src/core/wrapper/layout/layout.inline.js
  15. 14
      src/core/wrapper/layout/layout.table.js
  16. 72
      src/core/wrapper/layout/layout.tape.js
  17. 18
      src/core/wrapper/layout/layout.td.js
  18. 16
      src/core/wrapper/layout/layout.window.js
  19. 8
      src/core/wrapper/layout/middle/middle.center.js
  20. 8
      src/core/wrapper/layout/middle/middle.float.center.js
  21. 8
      src/core/wrapper/layout/middle/middle.horizontal.js
  22. 8
      src/core/wrapper/layout/middle/middle.vertical.js

24
src/core/wrapper/layout.js

@ -276,30 +276,34 @@ BI.Layout = BI.inherit(BI.Widget, {
})
},
_optimiseGap: function (gap) {
return gap > 0 && gap < 1 ? (gap * 100).toFixed(1) + "%" : gap / BI.pixRatio + BI.pixUnit;
},
_handleGap: function (w, item, hIndex, vIndex) {
var o = this.options;
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
var top = ((BI.isNull(vIndex) || vIndex === 0) ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0);
w.element.css({
"margin-top": top > 0 && top < 1 ? (top * 100).toFixed(1) + "%" : top / BI.pixRatio + BI.pixUnit
"margin-top": this._optimiseGap(top)
});
}
if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
var left = ((BI.isNull(hIndex) || hIndex === 0) ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0);
w.element.css({
"margin-left": left > 0 && left < 1 ? (left * 100).toFixed(1) + "%" : left / BI.pixRatio + BI.pixUnit
"margin-left": this._optimiseGap(left)
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
var right = o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0);
w.element.css({
"margin-right": right > 0 && right < 1 ? (right * 100).toFixed(1) + "%" : right / BI.pixRatio + BI.pixUnit
"margin-right": this._optimiseGap(right)
});
}
if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
var bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0);
w.element.css({
"margin-bottom": bottom > 0 && bottom < 1 ? (bottom * 100).toFixed(1) + "%" : bottom / BI.pixRatio + BI.pixUnit
"margin-bottom": this._optimiseGap(bottom)
});
}
},
@ -308,28 +312,28 @@ BI.Layout = BI.inherit(BI.Widget, {
_handleReverseGap: function (w, item, index) {
var o = this.options;
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
var top = (index === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0);
var top = (index === 0 ? o.vgap : 0) + (index === 0 ? o.tgap : 0) + (item.tgap || 0) + (item.vgap || 0);
w.element.css({
"margin-top": top > 0 && top < 1 ? (top * 100).toFixed(1) + "%" : top / BI.pixRatio + BI.pixUnit
"margin-top": this._optimiseGap(top)
});
}
if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
var left = o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0);
w.element.css({
"margin-left": left > 0 && left < 1 ? (left * 100).toFixed(1) + "%" : left / BI.pixRatio + BI.pixUnit
"margin-left": this._optimiseGap(left)
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
var right = o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0);
w.element.css({
"margin-right": right > 0 && right < 1 ? (right * 100).toFixed(1) + "%" : right / BI.pixRatio + BI.pixUnit
"margin-right": this._optimiseGap(right)
});
}
// 这里的代码是关键
if (o.vgap + o.hgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
var bottom = (index === o.items.length - 1 ? o.vgap : o.hgap) + o.bgap + (item.bgap || 0) + (item.vgap || 0);
var bottom = (index === o.items.length - 1 ? o.vgap : o.hgap) + (index === o.items.length - 1 ? o.bgap : 0) + (item.bgap || 0) + (item.vgap || 0);
w.element.css({
"margin-bottom": bottom > 0 && bottom < 1 ? (bottom * 100).toFixed(1) + "%" : bottom / BI.pixRatio + BI.pixUnit
"margin-bottom": this._optimiseGap(bottom)
});
}
},

8
src/core/wrapper/layout/adapt/absolute.center.js

@ -26,10 +26,10 @@ BI.AbsoluteCenterLayout = BI.inherit(BI.Layout, {
var w = BI.AbsoluteCenterLayout.superclass._addElement.apply(this, arguments);
w.element.css({
position: "absolute",
left: (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit,
right: (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit,
top: (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit,
bottom: (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit,
left: this._optimiseGap(o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)),
right: this._optimiseGap(o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)),
top: this._optimiseGap(o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)),
bottom: this._optimiseGap(o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)),
margin: "auto"
});
return w;

11
src/core/wrapper/layout/adapt/adapt.table.js

@ -48,9 +48,7 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, {
var td, width = "";
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (columnSize > 0) {
width = columnSize < 1 ?
((columnSize * 100).toFixed(1) + "%")
: (columnSize + (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap);
width = this._optimiseGap(columnSize + (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap);
}
if ((BI.isNull(columnSize) || columnSize === "") && this._hasFill()) {
width = 2;
@ -71,17 +69,16 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, {
if (o.verticalAlign === BI.VerticalAlign.Stretch) {
var top = o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0),
bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0);
w.element.css("height", "calc(100% - " + ((top + bottom) / BI.pixRatio + BI.pixUnit) + ")");
w.element.css("height", "calc(100% - " + this._optimiseGap(top + bottom) + ")");
}
// 对于表现为td的元素设置最大宽度,有几点需要注意
// 1、由于直接对td设置最大宽度是在规范中未定义的, 所以要使用类似td:firstChild来迂回实现
// 2、不能给多个td设置最大宽度,这样只会平分宽度
// 3、多百分比宽度就算了
if (columnSize > 0) {
columnSize = columnSize < 1 ? width : width / BI.pixRatio + BI.pixUnit;
td.element.css({
"max-width": columnSize,
"min-width": columnSize
"max-width": width,
"min-width": width
});
}
if (i === 0) {

14
src/core/wrapper/layout/fill/float.fill.horizontal.js

@ -43,42 +43,42 @@ BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, {
}
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
w.element.css({
"margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
"margin-top": self._optimiseGap(o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0))
});
}
if (desc) {
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
w.element.css({
"margin-right": ((i === o.items.length - 1 ? o.hgap : 0) + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
"margin-right": self._optimiseGap((i === o.items.length - 1 ? o.hgap : 0) + o.rgap + (item.rgap || 0) + (item.hgap || 0))
});
}
if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
w.element.css({
"margin-left": (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
"margin-left": self._optimiseGap(o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0))
});
}
} else {
if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
w.element.css({
"margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
"margin-left": self._optimiseGap((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0))
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
w.element.css({
"margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
"margin-right": self._optimiseGap(o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0))
});
}
}
if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
w.element.css({
"margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
"margin-bottom": self._optimiseGap(o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0))
});
}
var top = o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0),
bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0);
if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) {
w.element.css({
height: "calc(100% - " + ((top + bottom) / BI.pixRatio + BI.pixUnit) + ")"
height: "calc(100% - " + self._optimiseGap(top + bottom) + ")"
});
}
w.element.css({

2
src/core/wrapper/layout/flex/flex.horizontal.js

@ -74,7 +74,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
}
}
if (columnSize > 0) {
w.element.width(columnSize < 1 ? ((columnSize * 100).toFixed(1) + "%") : (columnSize / BI.pixRatio + BI.pixUnit));
w.element.width(this._optimiseGap(columnSize));
}
if (columnSize === "fill") {
w.element.addClass("f-f");

2
src/core/wrapper/layout/flex/flex.vertical.js

@ -73,7 +73,7 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
}
}
if (rowSize > 0) {
w.element.height(rowSize < 1 ? ((rowSize * 100).toFixed(1) + "%") : (rowSize / BI.pixRatio + BI.pixUnit));
w.element.height(this._optimiseGap(rowSize));
}
if (rowSize === "fill") {
w.element.addClass("f-f");

2
src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js

@ -70,7 +70,7 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
}
}
if (columnSize > 0) {
w.element.width(columnSize < 1 ? ((columnSize * 100).toFixed(1) + "%") : (columnSize / BI.pixRatio + BI.pixUnit));
w.element.width(this._optimiseGap(columnSize));
}
if (columnSize === "fill") {
w.element.addClass("f-f");

2
src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js

@ -70,7 +70,7 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
}
}
if (rowSize > 0) {
w.element.height(rowSize < 1 ? ((rowSize * 100).toFixed(1) + "%") : (rowSize / BI.pixRatio + BI.pixUnit));
w.element.height(this._optimiseGap(rowSize));
}
if (rowSize === "fill") {
w.element.addClass("f-f");

28
src/core/wrapper/layout/layout.absolute.js

@ -25,57 +25,57 @@ BI.AbsoluteLayout = BI.inherit(BI.Layout, {
var w = BI.AbsoluteLayout.superclass._addElement.apply(this, arguments);
var left = 0, right = 0, top = 0, bottom = 0;
if (BI.isNotNull(item.left)) {
w.element.css({left: BI.isNumber(item.left) ? item.left / BI.pixRatio + BI.pixUnit : item.left});
w.element.css({left: BI.isNumber(item.left) ? this._optimiseGap(item.left) : item.left});
left += item.left;
}
if (BI.isNotNull(item.right)) {
w.element.css({right: BI.isNumber(item.right) ? item.right / BI.pixRatio + BI.pixUnit : item.right});
w.element.css({right: BI.isNumber(item.right) ? this._optimiseGap(item.right) : item.right});
right += item.right;
}
if (BI.isNotNull(item.top)) {
w.element.css({top: BI.isNumber(item.top) ? item.top / BI.pixRatio + BI.pixUnit : item.top});
w.element.css({top: BI.isNumber(item.top) ? this._optimiseGap(item.top) : item.top});
top += item.top;
}
if (BI.isNotNull(item.bottom)) {
w.element.css({bottom: BI.isNumber(item.bottom) ? item.bottom / BI.pixRatio + BI.pixUnit : item.bottom});
w.element.css({bottom: BI.isNumber(item.bottom) ? this._optimiseGap(item.bottom) : item.bottom});
bottom += item.bottom;
}
if (BI.isNotNull(o.hgap)) {
left += o.hgap;
w.element.css({left: left / BI.pixRatio + BI.pixUnit});
w.element.css({left: this._optimiseGap(left)});
right += o.hgap;
w.element.css({right: right / BI.pixRatio + BI.pixUnit});
w.element.css({right: this._optimiseGap(right)});
}
if (BI.isNotNull(o.vgap)) {
top += o.vgap;
w.element.css({top: top / BI.pixRatio + BI.pixUnit});
w.element.css({top: this._optimiseGap(top)});
bottom += o.vgap;
w.element.css({bottom: bottom / BI.pixRatio + BI.pixUnit});
w.element.css({bottom: this._optimiseGap(bottom)});
}
if (BI.isNotNull(o.lgap)) {
left += o.lgap;
w.element.css({left: left / BI.pixRatio + BI.pixUnit});
w.element.css({left: this._optimiseGap(left)});
}
if (BI.isNotNull(o.rgap)) {
right += o.rgap;
w.element.css({right: right / BI.pixRatio + BI.pixUnit});
w.element.css({right: this._optimiseGap(right)});
}
if (BI.isNotNull(o.tgap)) {
top += o.tgap;
w.element.css({top: top / BI.pixRatio + BI.pixUnit});
w.element.css({top: this._optimiseGap(top)});
}
if (BI.isNotNull(o.bgap)) {
bottom += o.bgap;
w.element.css({bottom: bottom / BI.pixRatio + BI.pixUnit});
w.element.css({bottom: this._optimiseGap(bottom)});
}
if (BI.isNotNull(item.width)) {
w.element.css({width: BI.isNumber(item.width) ? item.width / BI.pixRatio + BI.pixUnit : item.width});
w.element.css({width: BI.isNumber(item.width) ? this._optimiseGap(item.width) : item.width});
}
if (BI.isNotNull(item.height)) {
w.element.css({height: BI.isNumber(item.height) ? item.height / BI.pixRatio + BI.pixUnit : item.height});
w.element.css({height: BI.isNumber(item.height) ? this._optimiseGap(item.height) : item.height});
}
w.element.css({position: "absolute"});
return w;

12
src/core/wrapper/layout/layout.adaptive.js

@ -21,32 +21,32 @@ BI.AdaptiveLayout = BI.inherit(BI.Layout, {
w.element.css({position: "relative"});
if (BI.isNotNull(item.left)) {
w.element.css({
left: BI.isNumber(item.left) ? item.left / BI.pixRatio + BI.pixUnit : item.left
left: BI.isNumber(item.left) ? this._optimiseGap(item.left) : item.left
});
}
if (BI.isNotNull(item.right)) {
w.element.css({
right: BI.isNumber(item.right) ? item.right / BI.pixRatio + BI.pixUnit : item.right
right: BI.isNumber(item.right) ? this._optimiseGap(item.right) : item.right
});
}
if (BI.isNotNull(item.top)) {
w.element.css({
top: BI.isNumber(item.top) ? item.top / BI.pixRatio + BI.pixUnit : item.top
top: BI.isNumber(item.top) ? this._optimiseGap(item.top) : item.top
});
}
if (BI.isNotNull(item.bottom)) {
w.element.css({
bottom: BI.isNumber(item.bottom) ? item.bottom / BI.pixRatio + BI.pixUnit : item.bottom
bottom: BI.isNumber(item.bottom) ? this._optimiseGap(item.bottom) : item.bottom
});
}
this._handleGap(w, item);
if (BI.isNotNull(item.width)) {
w.element.css({width: BI.isNumber(item.width) ? item.width / BI.pixRatio + BI.pixUnit : item.width});
w.element.css({width: BI.isNumber(item.width) ? this._optimiseGap(item.width) : item.width});
}
if (BI.isNotNull(item.height)) {
w.element.css({height: BI.isNumber(item.height) ? item.height / BI.pixRatio + BI.pixUnit : item.height});
w.element.css({height: BI.isNumber(item.height) ? this._optimiseGap(item.height) : item.height});
}
return w;
},

40
src/core/wrapper/layout/layout.border.js

@ -35,12 +35,12 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
var w = BI._lazyCreateWidget(item);
this.addWidget(this._getChildName("north"), w);
}
this.getWidgetByName(this._getChildName("north")).element.height(item.height / BI.pixRatio + BI.pixUnit)
this.getWidgetByName(this._getChildName("north")).element.height(this._optimiseGap(item.height))
.css({
position: "absolute",
top: (item.top || 0) / BI.pixRatio + BI.pixUnit,
left: (item.left || 0) / BI.pixRatio + BI.pixUnit,
right: (item.right || 0) / BI.pixRatio + BI.pixUnit,
top: this._optimiseGap(item.top || 0),
left: this._optimiseGap(item.left || 0),
right: this._optimiseGap(item.right || 0),
bottom: "initial"
});
}
@ -55,12 +55,12 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
var w = BI._lazyCreateWidget(item);
this.addWidget(this._getChildName("south"), w);
}
this.getWidgetByName(this._getChildName("south")).element.height(item.height / BI.pixRatio + BI.pixUnit)
this.getWidgetByName(this._getChildName("south")).element.height(this._optimiseGap(item.height))
.css({
position: "absolute",
bottom: (item.bottom || 0) / BI.pixRatio + BI.pixUnit,
left: (item.left || 0) / BI.pixRatio + BI.pixUnit,
right: (item.right || 0) / BI.pixRatio + BI.pixUnit,
bottom: this._optimiseGap(item.bottom || 0),
left: this._optimiseGap(item.left || 0),
right: this._optimiseGap(item.right || 0),
top: "initial"
});
}
@ -75,12 +75,12 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
var w = BI._lazyCreateWidget(item);
this.addWidget(this._getChildName("west"), w);
}
this.getWidgetByName(this._getChildName("west")).element.width(item.width / BI.pixRatio + BI.pixUnit)
this.getWidgetByName(this._getChildName("west")).element.width(this._optimiseGap(item.width))
.css({
position: "absolute",
left: (item.left || 0) / BI.pixRatio + BI.pixUnit,
top: top / BI.pixRatio + BI.pixUnit,
bottom: bottom / BI.pixRatio + BI.pixUnit,
left: this._optimiseGap(item.left || 0),
top: this._optimiseGap(top),
bottom: this._optimiseGap(bottom),
right: "initial"
});
}
@ -95,12 +95,12 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
var w = BI._lazyCreateWidget(item);
this.addWidget(this._getChildName("east"), w);
}
this.getWidgetByName(this._getChildName("east")).element.width(item.width / BI.pixRatio + BI.pixUnit)
this.getWidgetByName(this._getChildName("east")).element.width(this._optimiseGap(item.width))
.css({
position: "absolute",
right: (item.right || 0) / BI.pixRatio + BI.pixUnit,
top: top / BI.pixRatio + BI.pixUnit,
bottom: bottom / BI.pixRatio + BI.pixUnit,
right: this._optimiseGap(item.right || 0),
top: this._optimiseGap(top),
bottom: this._optimiseGap(bottom),
left: "initial"
});
}
@ -117,10 +117,10 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
this.getWidgetByName(this._getChildName("center")).element
.css({
position: "absolute",
top: top / BI.pixRatio + BI.pixUnit,
bottom: bottom / BI.pixRatio + BI.pixUnit,
left: left / BI.pixRatio + BI.pixUnit,
right: right / BI.pixRatio + BI.pixUnit
top: this._optimiseGap(top),
bottom: this._optimiseGap(bottom),
left: this._optimiseGap(left),
right: this._optimiseGap(right)
});
}
}

8
src/core/wrapper/layout/layout.card.js

@ -38,7 +38,13 @@ BI.CardLayout = BI.inherit(BI.Layout, {
} else {
var w = self.getWidgetByName(self._getChildName(item.cardName));
}
w.element.css({position: "absolute", top: "0", right: "0", bottom: "0", left: "0"});
w.element.css({
position: "relative",
top: "0",
left: "0",
width: "100%",
height: "100%"
});
w.setVisible(false);
}
});

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

@ -30,39 +30,39 @@ BI.FloatLeftLayout = BI.inherit(BI.Layout, {
var w = BI.FloatLeftLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative", float: "left"});
if (BI.isNotNull(item.left)) {
w.element.css({left: BI.isNumber(item.left) ? item.left / BI.pixRatio + BI.pixUnit : item.left});
w.element.css({left: BI.isNumber(item.left) ? this._optimiseGap(item.left) : item.left});
}
if (BI.isNotNull(item.right)) {
w.element.css({right: BI.isNumber(item.right) ? item.right / BI.pixRatio + BI.pixUnit : item.right});
w.element.css({right: BI.isNumber(item.right) ? this._optimiseGap(item.right) : item.right});
}
if (BI.isNotNull(item.top)) {
w.element.css({top: BI.isNumber(item.top) ? item.top / BI.pixRatio + BI.pixUnit : item.top});
w.element.css({top: BI.isNumber(item.top) ? this._optimiseGap(item.top) : item.top});
}
if (BI.isNotNull(item.bottom)) {
w.element.css({bottom: BI.isNumber(item.bottom) ? item.bottom / BI.pixRatio + BI.pixUnit : item.bottom});
w.element.css({bottom: BI.isNumber(item.bottom) ? this._optimiseGap(item.bottom) : item.bottom});
}
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
var top = o.vgap / 2 + o.tgap + (item.tgap || 0) + (item.vgap || 0);
w.element.css({
"margin-top": top > 0 && top < 1 ? (top * 100).toFixed(1) + "%" : top / BI.pixRatio + BI.pixUnit
"margin-top": this._optimiseGap(top)
});
}
if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
var left = o.hgap / 2 + o.lgap + (item.lgap || 0) + (item.hgap || 0);
w.element.css({
"margin-left": left > 0 && left < 1 ? (left * 100).toFixed(1) + "%" : left / BI.pixRatio + BI.pixUnit
"margin-left": this._optimiseGap(left)
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
var right = o.hgap / 2 + o.rgap + (item.rgap || 0) + (item.hgap || 0);
w.element.css({
"margin-right": right > 0 && right < 1 ? (right * 100).toFixed(1) + "%" : right / BI.pixRatio + BI.pixUnit
"margin-right": this._optimiseGap(right)
});
}
if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
var bottom = o.vgap / 2 + o.bgap + (item.bgap || 0) + (item.vgap || 0);
w.element.css({
"margin-bottom": bottom > 0 && bottom < 1 ? (bottom * 100).toFixed(1) + "%" : bottom / BI.pixRatio + BI.pixUnit
"margin-bottom": this._optimiseGap(bottom)
});
}
return w;

16
src/core/wrapper/layout/layout.inline.js

@ -52,7 +52,7 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
});
w.element.addClass("i-item");
if (columnSize === "fill" || columnSize === "") {
var length = o.hgap;
var length = 0, gap = o.hgap;
var fillCount = 0, autoCount = 0;
for (var k = 0, len = o.columnSize.length || o.items.length; k < len; k++) {
var cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width;
@ -63,16 +63,19 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
autoCount++;
cz = 0;
}
length += o.hgap + o.lgap + o.rgap + (o.items[k].lgap || 0) + (o.items[k].rgap || 0) + (o.items[k].hgap || 0) + cz;
gap += o.hgap + o.lgap + o.rgap + (o.items[k].lgap || 0) + (o.items[k].rgap || 0) + (o.items[k].hgap || 0);
length += cz;
}
length = length > 0 && length < 1 ? (length * 100).toFixed(1) + "%" : length / BI.pixRatio + BI.pixUnit;
gap = gap > 0 && gap < 1 ? (gap * 100).toFixed(1) + "%" : gap / BI.pixRatio + BI.pixUnit;
if (columnSize === "fill") {
w.element.css("min-width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")");
w.element.css("min-width", "calc((100% - " + length + " - " + gap + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")");
}
if (o.horizontalAlign === BI.HorizontalAlign.Stretch || !(o.scrollable === true || o.scrollx === true)) {
if (columnSize === "fill") {
w.element.css("max-width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")");
w.element.css("max-width", "calc((100% - " + length + " - " + gap + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")");
} else {
w.element.css("max-width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (autoCount > 1 ? "/" + autoCount : "") + ")");
w.element.css("max-width", "calc((100% - " + length + " - " + gap + ")" + (autoCount > 1 ? "/" + autoCount : "") + ")");
}
}
}
@ -80,7 +83,8 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) {
var top = o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0),
bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0);
w.element.css("height", "calc(100% - " + ((top + bottom) / BI.pixRatio + BI.pixUnit) + ")");
var gap = (top + bottom) > 0 && (top + bottom) < 1 ? ((top + bottom) * 100).toFixed(1) + "%" : (top + bottom) / BI.pixRatio + BI.pixUnit;
w.element.css("height", "calc(100% - " + gap + ")");
}
return w;
},

14
src/core/wrapper/layout/layout.table.js

@ -69,8 +69,8 @@ BI.TableLayout = BI.inherit(BI.Layout, {
abs.push(BI.extend({
top: 0,
bottom: 0,
left: o.columnSize[i] < 1 ? (left * 100).toFixed(1) + "%" : left,
width: o.columnSize[i] < 1 ? (o.columnSize[i] * 100).toFixed(1) + "%" : o.columnSize[i]
left: this._optimiseGap(left),
width: this._optimiseGap(o.columnSize[i])
}, arr[i]));
left += o.columnSize[i] + (o.columnSize[i] < 1 ? 0 : o.hgap);
} else {
@ -83,8 +83,8 @@ BI.TableLayout = BI.inherit(BI.Layout, {
abs.push(BI.extend({
top: 0,
bottom: 0,
right: o.columnSize[j] < 1 ? (right * 100).toFixed(1) + "%" : right,
width: o.columnSize[j] < 1 ? (o.columnSize[j] * 100).toFixed(1) + "%" : o.columnSize[j]
right: this._optimiseGap(right),
width: this._optimiseGap(o.columnSize[j])
}, arr[j]));
right += o.columnSize[j] + (o.columnSize[j] < 1 ? 0 : o.hgap);
} else {
@ -96,8 +96,8 @@ BI.TableLayout = BI.inherit(BI.Layout, {
abs.push(BI.extend({
top: 0,
bottom: 0,
left: left < 1 ? (left * 100).toFixed(1) + "%" : left,
right: right < 1 ? (right * 100).toFixed(1) + "%" : right
left: this._optimiseGap(left),
right: this._optimiseGap(right)
}, arr[i]));
}
var w = BI._lazyCreateWidget({
@ -107,7 +107,7 @@ BI.TableLayout = BI.inherit(BI.Layout, {
});
if (this.rows > 0) {
this.getWidgetByName(this._getChildName(this.rows - 1)).element.css({
"margin-bottom": o.vgap / BI.pixRatio + BI.pixUnit
"margin-bottom": this._optimiseGap(o.vgap)
});
}
w.element.css({

72
src/core/wrapper/layout/layout.tape.js

@ -43,8 +43,8 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
}
w.element.css({
position: "absolute",
top: ((item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit,
bottom: ((item.bgap || 0) + (item.vgap || 0) + o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit
top: self._optimiseGap((item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap),
bottom: self._optimiseGap((item.bgap || 0) + (item.vgap || 0) + o.vgap + o.bgap)
});
if (o.verticalAlign === BI.VerticalAlign.Middle) {
w.element.css({
@ -77,17 +77,11 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
var preColumnSize = o.columnSize.length > 0 ? o.columnSize[i - 1] : items[i - 1].width;
left[i] = left[i - 1] + preColumnSize + (items[i - 1].lgap || 0) + (items[i - 1].rgap || 0) + 2 * (items[i - 1].hgap || 0) + o.hgap + o.lgap + o.rgap;
}
if (columnSize < 1 && columnSize > 0) {
w.element.css({
left: (left[i] * 100).toFixed(1) + "%",
width: (columnSize * 100).toFixed(1) + "%"
});
} else {
w.element.css({
left: (left[i] + (item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit,
width: BI.isNumber(columnSize) ? columnSize / BI.pixRatio + BI.pixUnit : ""
});
}
w.element.css({
left: self._optimiseGap(left[i] + (item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap),
width: BI.isNumber(columnSize) ? self._optimiseGap(columnSize) : ""
});
if (columnSize === "" || columnSize === "fill") {
return true;
}
@ -102,17 +96,11 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
var nextColumnSize = o.columnSize.length > 0 ? o.columnSize[i + 1] : items[i + 1].width;
right[i] = right[i + 1] + nextColumnSize + (items[i + 1].lgap || 0) + (items[i + 1].rgap || 0) + 2 * (items[i + 1].hgap || 0) + o.hgap + o.lgap + o.rgap;
}
if (columnSize < 1 && columnSize > 0) {
w.element.css({
right: (right[i] * 100).toFixed(1) + "%",
width: (columnSize * 100).toFixed(1) + "%"
});
} else {
w.element.css({
right: (right[i] + (item.rgap || 0) + (item.hgap || 0) + o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit,
width: BI.isNumber(columnSize) ? columnSize / BI.pixRatio + BI.pixUnit : ""
});
}
w.element.css({
right: self._optimiseGap(right[i] + (item.rgap || 0) + (item.hgap || 0) + o.hgap + o.rgap),
width: BI.isNumber(columnSize) ? self._optimiseGap(columnSize) : ""
});
if (columnSize === "" || columnSize === "fill") {
return true;
}
@ -175,8 +163,8 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
}
w.element.css({
position: "absolute",
left: ((item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit,
right: ((item.hgap || 0) + (item.rgap || 0) + o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit
left: self._optimiseGap((item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap),
right: self._optimiseGap((item.hgap || 0) + (item.rgap || 0) + o.hgap + o.rgap)
});
if (o.horizontalAlign === BI.HorizontalAlign.Center) {
w.element.css({
@ -209,17 +197,11 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
var preRowSize = o.rowSize.length > 0 ? o.rowSize[i - 1] : items[i - 1].height;
top[i] = top[i - 1] + preRowSize + (items[i - 1].tgap || 0) + (items[i - 1].bgap || 0) + 2 * (items[i - 1].vgap || 0) + o.vgap + o.tgap + o.bgap;
}
if (rowSize < 1 && rowSize > 0) {
w.element.css({
top: (top[i] * 100).toFixed(1) + "%",
height: (rowSize * 100).toFixed(1) + "%"
});
} else {
w.element.css({
top: (top[i] + (item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit,
height: BI.isNumber(rowSize) ? rowSize / BI.pixRatio + BI.pixUnit : ""
});
}
w.element.css({
top: self._optimiseGap(top[i] + (item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap),
height: BI.isNumber(rowSize) ? self._optimiseGap(rowSize) : ""
});
if (rowSize === "" || rowSize === "fill") {
return true;
}
@ -234,17 +216,11 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
var nextRowSize = o.rowSize.length > 0 ? o.rowSize[i + 1] : items[i + 1].height;
bottom[i] = bottom[i + 1] + nextRowSize + (items[i + 1].tgap || 0) + (items[i + 1].bgap || 0) + 2 * (items[i + 1].vgap || 0) + o.vgap + o.tgap + o.bgap;
}
if (rowSize < 1 && rowSize > 0) {
w.element.css({
bottom: (bottom[i] * 100).toFixed(1) + "%",
height: (rowSize * 100).toFixed(1) + "%"
});
} else {
w.element.css({
bottom: (bottom[i] + (item.vgap || 0) + (item.bgap || 0) + o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit,
height: BI.isNumber(rowSize) ? rowSize / BI.pixRatio + BI.pixUnit : ""
});
}
w.element.css({
bottom: self._optimiseGap(bottom[i] + (item.vgap || 0) + (item.bgap || 0) + o.vgap + o.bgap),
height: BI.isNumber(rowSize) ? self._optimiseGap(rowSize) : ""
});
if (rowSize === "" || rowSize === "fill") {
return true;
}

18
src/core/wrapper/layout/layout.td.js

@ -75,15 +75,14 @@ BI.TdLayout = BI.inherit(BI.Layout, {
}
}
var height = o.rowSize[idx] === "" ? "" : (o.rowSize[idx] < 1 ? ((o.rowSize[idx] * 100).toFixed(1) + "%") : o.rowSize[idx]);
var rowHeight = BI.isNumber(o.rowSize[idx]) ? (o.rowSize[idx] <= 1 ? height : height / BI.pixRatio + BI.pixUnit) : height;
var height = o.rowSize[idx] === "" ? "" : this._optimiseGap(o.rowSize[idx]);
var tr = BI._lazyCreateWidget({
type: "bi.default",
tagName: "tr",
height: height,
css: {
"max-height": rowHeight,
"min-height": rowHeight
"max-height": height,
"min-height": height
}
});
@ -92,7 +91,7 @@ BI.TdLayout = BI.inherit(BI.Layout, {
if (o.verticalAlign === BI.VerticalAlign.Stretch) {
var top = o.vgap + o.tgap + (arr[i].tgap || 0) + (arr[i].vgap || 0),
bottom = o.vgap + o.bgap + (arr[i].bgap || 0) + (arr[i].vgap || 0);
w.element.css("height", "calc(100% - " + ((top + bottom) / BI.pixRatio + BI.pixUnit) + ")");
w.element.css("height", "calc(100% - " + this._optimiseGap(top + bottom) + ")");
}
w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
var item = arr[i];
@ -101,9 +100,7 @@ BI.TdLayout = BI.inherit(BI.Layout, {
var width = "";
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (columnSize > 0) {
width = columnSize < 1 ?
((columnSize * 100).toFixed(1) + "%")
: (columnSize + (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap);
width = this._optimiseGap(columnSize + (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap);
}
function hasFill() {
if (o.columnSize.length > 0) {
@ -129,10 +126,9 @@ BI.TdLayout = BI.inherit(BI.Layout, {
// 2、不能给多个td设置最大宽度,这样只会平分宽度
// 3、多百分比宽度就算了
if (columnSize > 0) {
columnSize = columnSize < 1 ? width : width / BI.pixRatio + BI.pixUnit;
td.element.css({
"max-width": columnSize,
"min-width": columnSize
"max-width": width,
"min-width": width
});
}
td.element.css({

16
src/core/wrapper/layout/layout.window.js

@ -100,9 +100,9 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
if (BI.isNull(top[i])) {
top[i] = top[i - 1] + (o.rowSize[i - 1] < 1 ? o.rowSize[i - 1] : o.rowSize[i - 1] + o.vgap + o.bgap);
}
var t = top[i] <= 1 ? (top[i] * 100).toFixed(1) + "%" : (top[i] + o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit, h = "";
var t = this._optimiseGap(top[i] + o.vgap + o.tgap), h = "";
if (BI.isNumber(o.rowSize[i])) {
h = o.rowSize[i] <= 1 ? (o.rowSize[i] * 100).toFixed(1) + "%" : o.rowSize[i] / BI.pixRatio + BI.pixUnit;
h = this._optimiseGap(o.rowSize[i]);
}
wi.element.css({top: t, height: h});
first(wi, i, j);
@ -118,9 +118,9 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
if (BI.isNull(bottom[i])) {
bottom[i] = bottom[i + 1] + (o.rowSize[i + 1] < 1 ? o.rowSize[i + 1] : o.rowSize[i + 1] + o.vgap + o.tgap);
}
var b = bottom[i] <= 1 ? (bottom[i] * 100).toFixed(1) + "%" : (bottom[i] + o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit, h = "";
var b = this._optimiseGap(bottom[i] + o.vgap + o.bgap), h = "";
if (BI.isNumber(o.rowSize[i])) {
h = o.rowSize[i] <= 1 ? (o.rowSize[i] * 100).toFixed(1) + "%" : o.rowSize[i] / BI.pixRatio + BI.pixUnit;
h = this._optimiseGap(o.rowSize[i]);
}
wi.element.css({bottom: b, height: h});
first(wi, i, j);
@ -136,9 +136,9 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
if (BI.isNull(left[j])) {
left[j] = left[j - 1] + (o.columnSize[j - 1] < 1 ? o.columnSize[j - 1] : o.columnSize[j - 1] + o.hgap + o.rgap);
}
var l = left[j] <= 1 ? (left[j] * 100).toFixed(1) + "%" : (left[j] + o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit, w = "";
var l = this._optimiseGap(left[j] + o.hgap + o.lgap), w = "";
if (BI.isNumber(o.columnSize[j])) {
w = o.columnSize[j] <= 1 ? (o.columnSize[j] * 100).toFixed(1) + "%" : o.columnSize[j] / BI.pixRatio + BI.pixUnit;
w = this._optimiseGap(o.columnSize[j]);
}
wi.element.css({left: l, width: w});
first(wi, i, j);
@ -154,9 +154,9 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
if (BI.isNull(right[j])) {
right[j] = right[j + 1] + (o.columnSize[j + 1] < 1 ? o.columnSize[j + 1] : o.columnSize[j + 1] + o.hgap + o.lgap);
}
var r = right[j] <= 1 ? (right[j] * 100).toFixed(1) + "%" : (right[j] + o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit, w = "";
var r = this._optimiseGap(right[j] + o.hgap + o.rgap), w = "";
if (BI.isNumber(o.columnSize[j])) {
w = o.columnSize[j] <= 1 ? (o.columnSize[j] * 100).toFixed(1) + "%" : o.columnSize[j] / BI.pixRatio + BI.pixUnit;
w = this._optimiseGap(o.columnSize[j]);
}
wi.element.css({right: r, width: w});
first(wi, i, j);

8
src/core/wrapper/layout/middle/middle.center.js

@ -35,10 +35,10 @@ BI.CenterLayout = BI.inherit(BI.Layout, {
var w = BI._lazyCreateWidget(item);
w.element.css({
position: "absolute",
left: (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit,
right: (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit,
top: (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit,
bottom: (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit,
left: self._optimiseGap(o.hgap + o.lgap),
right: self._optimiseGap(o.hgap + o.rgap),
top: self._optimiseGap(o.vgap + o.tgap),
bottom: self._optimiseGap(o.vgap + o.bgap),
width: "auto",
height: "auto"
});

8
src/core/wrapper/layout/middle/middle.float.center.js

@ -36,10 +36,10 @@ BI.FloatCenterLayout = BI.inherit(BI.Layout, {
var w = BI._lazyCreateWidget(item);
w.element.css({
position: "absolute",
left: (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit,
right: (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit,
top: (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit,
bottom: (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit,
left: self._optimiseGap(o.hgap + o.lgap),
right: self._optimiseGap(o.hgap + o.rgap),
top: self._optimiseGap(o.vgap + o.tgap),
bottom: self._optimiseGap(o.vgap + o.bgap),
width: "auto",
height: "auto"
});

8
src/core/wrapper/layout/middle/middle.horizontal.js

@ -34,10 +34,10 @@ BI.HorizontalCenterLayout = BI.inherit(BI.Layout, {
var w = BI._lazyCreateWidget(item);
w.element.css({
position: "absolute",
left: (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit,
right: (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit,
top: (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit,
bottom: (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit,
left: self._optimiseGap(o.hgap + o.lgap),
right: self._optimiseGap(o.hgap + o.rgap),
top: self._optimiseGap(o.vgap + o.tgap),
bottom: self._optimiseGap(o.vgap + o.bgap),
width: "auto"
});
list[i].el.addItem(w);

8
src/core/wrapper/layout/middle/middle.vertical.js

@ -35,10 +35,10 @@ BI.VerticalCenterLayout = BI.inherit(BI.Layout, {
var w = BI._lazyCreateWidget(item);
w.element.css({
position: "absolute",
left: (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit,
right: (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit,
top: (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit,
bottom: (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit,
left: self._optimiseGap(o.hgap + o.lgap),
right: self._optimiseGap(o.hgap + o.rgap),
top: self._optimiseGap(o.vgap + o.tgap),
bottom: self._optimiseGap(o.vgap + o.bgap),
height: "auto"
});
list[i].el.addItem(w);

Loading…
Cancel
Save