fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

优化布局

es6
guy 4 years ago
parent
0d6eba1cb7
commit
8191e94f0b
5 changed files with 117 additions and 197 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 87
      src/core/wrapper/layout/adapt/inline.center.js
  2. 87
      src/core/wrapper/layout/adapt/inline.horizontal.js
  3. 74
      src/core/wrapper/layout/adapt/inline.vertical.js
  4. 42
      src/core/wrapper/layout/layout.inline.js
  5. 24
      src/less/core/wrapper/inline.less

87
src/core/wrapper/layout/adapt/inline.center.js
Unescape View File

@ -25,78 +25,27 @@ BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, {
},
render: function () {
BI.InlineCenterAdaptLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.element.css({
whiteSpace: "nowrap",
textAlign: o.horizontalAlign
});
this.populate(o.items);
},
_addElement: function (i, item, length) {
var o = this.options;
var w = BI.InlineCenterAdaptLayout.superclass._addElement.apply(this, arguments);
w.element.css({
width: o.columnSize[i] === "" ? "" : (o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit)),
position: "relative",
"vertical-align": o.verticalAlign
});
w.element.addClass("i-c-a-item");
if (o.columnSize[i] === "fill") {
var left = o.hgap + (item.lgap || 0) + (item.hgap || 0),
right = o.hgap + (item.rgap || 0) + (item.hgap || 0);
for (var k = 0; k < i; k++) {
left += o.hgap + o.lgap + o.rgap + o.columnSize[k];
}
for (var k = i + 1; k < o.columnSize.length; k++) {
right += o.hgap + o.lgap + o.rgap + o.columnSize[k];
}
w.element.css("min-width", "calc(100% - " + ((left + right) / BI.pixRatio + BI.pixUnit) + ")");
}
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
});
}
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
});
}
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
});
}
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))
});
}
return w;
},
resize: function () {
this.stroke(this.options.items);
},
addItem: function (item) {
throw new Error("不能添加元素");
},
stroke: function (items) {
var self = this;
BI.each(items, function (i, item) {
if (item) {
self._addElement(i, item, items.length);
}
});
var self = this, o = this.options;
return {
type: "bi.inline",
ref: function (_ref) {
self.layout = _ref;
},
items: o.items,
horizontalAlign: o.horizontalAlign,
verticalAlign: o.verticalAlign,
columnSize: o.columnSize,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap
};
},
populate: function (items) {
BI.InlineCenterAdaptLayout.superclass.populate.apply(this, arguments);
this._mount();
this.layout.populate.apply(this.layout, arguments);
}
});
BI.shortcut("bi.inline_center_adapt", BI.InlineCenterAdaptLayout);

87
src/core/wrapper/layout/adapt/inline.horizontal.js
Unescape View File

@ -25,78 +25,27 @@ BI.InlineHorizontalAdaptLayout = BI.inherit(BI.Layout, {
},
render: function () {
BI.InlineHorizontalAdaptLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.element.css({
whiteSpace: "nowrap",
textAlign: o.horizontalAlign
});
this.populate(o.items);
},
_addElement: function (i, item, length) {
var o = this.options;
var w = BI.InlineHorizontalAdaptLayout.superclass._addElement.apply(this, arguments);
w.element.css({
width: o.columnSize[i] === "" ? "" : (o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit)),
position: "relative",
"vertical-align": o.verticalAlign
});
w.element.addClass("i-h-a-item");
if (o.columnSize[i] === "fill") {
var left = o.hgap + (item.lgap || 0) + (item.hgap || 0),
right = o.hgap + (item.rgap || 0) + (item.hgap || 0);
for (var k = 0; k < i; k++) {
left += o.hgap + o.lgap + o.rgap + o.columnSize[k];
}
for (var k = i + 1; k < o.columnSize.length; k++) {
right += o.hgap + o.lgap + o.rgap + o.columnSize[k];
}
w.element.css("min-width", "calc(100% - " + ((left + right) / BI.pixRatio + BI.pixUnit) + ")");
}
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
});
}
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
});
}
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
});
}
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
});
}
return w;
},
resize: function () {
this.stroke(this.options.items);
},
addItem: function (item) {
throw new Error("不能添加元素");
},
stroke: function (items) {
var self = this;
BI.each(items, function (i, item) {
if (item) {
self._addElement(i, item, items.length);
}
});
var self = this, o = this.options;
return {
type: "bi.inline",
ref: function (_ref) {
self.layout = _ref;
},
items: o.items,
horizontalAlign: o.horizontalAlign,
verticalAlign: o.verticalAlign,
columnSize: o.columnSize,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap
};
},
populate: function (items) {
BI.InlineHorizontalAdaptLayout.superclass.populate.apply(this, arguments);
this._mount();
this.layout.populate.apply(this.layout, arguments);
}
});
BI.shortcut("bi.inline_horizontal_adapt", BI.InlineHorizontalAdaptLayout);

74
src/core/wrapper/layout/adapt/inline.vertical.js
Unescape View File

@ -25,65 +25,27 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
},
render: function () {
BI.InlineVerticalAdaptLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.element.css({
whiteSpace: "nowrap",
textAlign: o.horizontalAlign
});
this.populate(o.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.InlineVerticalAdaptLayout.superclass._addElement.apply(this, arguments);
w.element.css({
width: o.columnSize[i] === "" ? "" : (o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit)),
position: "relative",
"vertical-align": o.verticalAlign
});
w.element.addClass("i-v-a-item");
if (o.columnSize[i] === "fill") {
var left = o.hgap + (item.lgap || 0) + (item.hgap || 0),
right = o.hgap + (item.rgap || 0) + (item.hgap || 0);
for (var k = 0; k < i; k++) {
left += o.hgap + o.lgap + o.rgap + o.columnSize[k];
}
for (var k = i + 1; k < o.columnSize.length; k++) {
right += o.hgap + o.lgap + o.rgap + o.columnSize[k];
}
w.element.css("min-width", "calc(100% - " + ((left + right) / BI.pixRatio + BI.pixUnit) + ")");
}
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
});
}
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
});
}
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
});
}
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
});
}
return w;
},
resize: function () {
this.stroke(this.options.items);
var self = this, o = this.options;
return {
type: "bi.inline",
ref: function (_ref) {
self.layout = _ref;
},
items: o.items,
horizontalAlign: o.horizontalAlign,
verticalAlign: o.verticalAlign,
columnSize: o.columnSize,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap
};
},
populate: function (items) {
BI.InlineVerticalAdaptLayout.superclass.populate.apply(this, arguments);
this._mount();
this.layout.populate.apply(this.layout, arguments);
}
});
BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);

42
src/core/wrapper/layout/layout.inline.js
Unescape View File

@ -12,6 +12,9 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.InlineLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-i",
horizontalAlign: BI.HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Top,
columnSize: [],
hgap: 0,
vgap: 0,
lgap: 0,
@ -23,13 +26,33 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
render: function () {
BI.InlineLayout.superclass.render.apply(this, arguments);
this.populate(this.options.items);
var o = this.options;
this.element.css({
textAlign: o.horizontalAlign
});
this.populate(o.items);
},
_addElement: function (i, item) {
_addElement: function (i, item, length) {
var o = this.options;
var w = BI.InlineLayout.superclass._addElement.apply(this, arguments);
w.element.css({"position": "relative", display: "inline-block", "*display": "inline", "*zoom": 1});
w.element.css({
width: o.columnSize[i] === "" ? "" : (o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit)),
position: "relative",
"vertical-align": o.verticalAlign
});
w.element.addClass("i-item");
if (o.columnSize[i] === "fill") {
var left = o.hgap + (item.lgap || 0) + (item.hgap || 0),
right = o.hgap + (item.rgap || 0) + (item.hgap || 0);
for (var k = 0; k < i; k++) {
left += o.hgap + o.lgap + o.rgap + o.columnSize[k];
}
for (var k = i + 1; k < o.columnSize.length; k++) {
right += o.hgap + o.lgap + o.rgap + o.columnSize[k];
}
w.element.css("min-width", "calc(100% - " + ((left + right) / BI.pixRatio + BI.pixUnit) + ")");
}
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
@ -57,6 +80,19 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
this.stroke(this.options.items);
},
addItem: function (item) {
throw new Error("不能添加元素");
},
stroke: function (items) {
var self = this;
BI.each(items, function (i, item) {
if (item) {
self._addElement(i, item, items.length);
}
});
},
populate: function (items) {
BI.InlineLayout.superclass.populate.apply(this, arguments);
this._mount();

24
src/less/core/wrapper/inline.less
Unescape View File

@ -0,0 +1,24 @@
.bi-i {
white-space: nowrap;
&:after {
display: inline-block;
width: 0;
min-height: 100%;
vertical-align: middle;
content: ' ';
}
& > .i-item {
display: inline-block;
&.x-icon {
display: inline-block !important;
}
}
& > .bi-combo {
&.bi-combo-popup {
display: inline-block !important;
}
}
}
Write Preview
Loading…
Cancel
Save