forked from fanruan/fineui
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
3.3 KiB
89 lines
3.3 KiB
/** |
|
* 内联布局 |
|
* @class BI.InlineVerticalAdaptLayout |
|
* @extends BI.Layout |
|
* |
|
* @cfg {JSON} options 配置属性 |
|
* @cfg {Number} [hgap=0] 水平间隙 |
|
* @cfg {Number} [vgap=0] 垂直间隙 |
|
*/ |
|
BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, { |
|
|
|
props: function () { |
|
return BI.extend(BI.InlineVerticalAdaptLayout.superclass.props.apply(this, arguments), { |
|
baseCls: "bi-i-v-a", |
|
horizontalAlign: BI.HorizontalAlign.Left, |
|
verticalAlign: BI.VerticalAlign.Middle, |
|
columnSize: [], |
|
hgap: 0, |
|
vgap: 0, |
|
lgap: 0, |
|
rgap: 0, |
|
tgap: 0, |
|
bgap: 0 |
|
}); |
|
}, |
|
|
|
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); |
|
}, |
|
|
|
populate: function (items) { |
|
BI.InlineVerticalAdaptLayout.superclass.populate.apply(this, arguments); |
|
this._mount(); |
|
} |
|
}); |
|
BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);
|
|
|