windy
6 years ago
38 changed files with 750 additions and 394 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,101 @@
|
||||
/** |
||||
* 使用display:table和display:table-cell实现的horizontal布局 |
||||
* @class BI.TableAdaptLayout |
||||
* @extends BI.Layout |
||||
*/ |
||||
BI.TableAdaptLayout = BI.inherit(BI.Layout, { |
||||
props: function () { |
||||
return BI.extend(BI.TableAdaptLayout.superclass.props.apply(this, arguments), { |
||||
baseCls: "bi-table-center-adapt-layout", |
||||
columnSize: [], |
||||
verticalAlign: BI.VerticalAlign.Top, |
||||
horizontalAlign: BI.HorizontalAlign.Left, |
||||
hgap: 0, |
||||
vgap: 0, |
||||
lgap: 0, |
||||
rgap: 0, |
||||
tgap: 0, |
||||
bgap: 0 |
||||
}); |
||||
}, |
||||
render: function () { |
||||
var o = this.options; |
||||
BI.TableAdaptLayout.superclass.render.apply(this, arguments); |
||||
this.$table = BI.Widget._renderEngine.createElement("<div>").css({ |
||||
position: "relative", |
||||
display: "table", |
||||
height: o.verticalAlign === BI.VerticalAlign.Middle ? "100%" : "auto", |
||||
width: o.horizontalAlign === BI.HorizontalAlign.Center ? "100%" : "auto", |
||||
"white-space": "nowrap" |
||||
}); |
||||
this.populate(this.options.items); |
||||
}, |
||||
|
||||
_addElement: function (i, item) { |
||||
|
||||
var o = this.options; |
||||
var td; |
||||
var width = o.columnSize[i] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i]; |
||||
if (!this.hasWidget(this._getChildName(i))) { |
||||
var w = BI.createWidget(item); |
||||
w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"}); |
||||
td = BI.createWidget({ |
||||
type: "bi.default", |
||||
width: width, |
||||
items: [w] |
||||
}); |
||||
this.addWidget(this._getChildName(i), td); |
||||
} else { |
||||
td = this.getWidgetByName(this._getChildName(i)); |
||||
td.element.width(width); |
||||
} |
||||
td.element.css({"max-width": o.columnSize[i] + "px"}); |
||||
if (i === 0) { |
||||
td.element.addClass("first-element"); |
||||
} |
||||
td.element.css({ |
||||
position: "relative", |
||||
display: "table-cell", |
||||
"vertical-align": "middle", |
||||
margin: "0", |
||||
padding: "0", |
||||
height: "100%" |
||||
}); |
||||
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) + "px" |
||||
}); |
||||
} |
||||
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) + "px" |
||||
}); |
||||
} |
||||
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) + "px" |
||||
}); |
||||
} |
||||
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) + "px" |
||||
}); |
||||
} |
||||
return td; |
||||
}, |
||||
|
||||
appendFragment: function (frag) { |
||||
this.$table.append(frag); |
||||
this.element.append(this.$table); |
||||
}, |
||||
|
||||
resize: function () { |
||||
// console.log("center_adapt布局不需要resize");
|
||||
}, |
||||
|
||||
populate: function (items) { |
||||
BI.TableAdaptLayout.superclass.populate.apply(this, arguments); |
||||
this._mount(); |
||||
} |
||||
}); |
||||
BI.shortcut("bi.table_adapt", BI.TableAdaptLayout); |
||||
Loading…
Reference in new issue