优化布局

src/core/wrapper/layout/adapt/inline.center.js

@@ -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);

src/core/wrapper/layout/adapt/inline.horizontal.js

@@ -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);

src/core/wrapper/layout/adapt/inline.vertical.js

@@ -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);

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

@@ -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();

src/less/core/wrapper/inline.less

@@ -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;
+    }
+  }
+}