forked from fanruan/fineui
Browse Source
Merge in VISUAL/fineui from ~GUY/fineui:master to master * commit '02d55fc8b1e35584d1ae40d4208bdbb30581e359': bugfix bugfixes6
guy
4 years ago
18 changed files with 351 additions and 210 deletions
@ -0,0 +1,91 @@ |
|||||||
|
/** |
||||||
|
* 内联布局 |
||||||
|
* @class BI.InlineHorizontalAdaptLayout |
||||||
|
* @extends BI.Layout |
||||||
|
* |
||||||
|
* @cfg {JSON} options 配置属性 |
||||||
|
* @cfg {Number} [hgap=0] 水平间隙 |
||||||
|
* @cfg {Number} [vgap=0] 垂直间隙 |
||||||
|
*/ |
||||||
|
BI.InlineHorizontalAdaptLayout = BI.inherit(BI.Layout, { |
||||||
|
|
||||||
|
props: function () { |
||||||
|
return BI.extend(BI.InlineHorizontalAdaptLayout.superclass.props.apply(this, arguments), { |
||||||
|
baseCls: "bi-inline-horizontal-adapt-layout", |
||||||
|
horizontalAlign: BI.HorizontalAlign.Center, |
||||||
|
verticalAlign: BI.VerticalAlign.Top, |
||||||
|
columnSize: [], |
||||||
|
hgap: 0, |
||||||
|
vgap: 0, |
||||||
|
lgap: 0, |
||||||
|
rgap: 0, |
||||||
|
tgap: 0, |
||||||
|
bgap: 0 |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
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] <= 1 ? (o.columnSize[i] * 100 + "%") : o.columnSize[i], |
||||||
|
position: "relative", |
||||||
|
"vertical-align": o.verticalAlign |
||||||
|
}); |
||||||
|
w.element.addClass("inline-horizontal-adapt-item"); |
||||||
|
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 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); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
populate: function (items) { |
||||||
|
BI.InlineHorizontalAdaptLayout.superclass.populate.apply(this, arguments); |
||||||
|
this._mount(); |
||||||
|
} |
||||||
|
}); |
||||||
|
BI.shortcut("bi.inline_horizontal_adapt", BI.InlineHorizontalAdaptLayout); |
||||||
@ -1,37 +0,0 @@ |
|||||||
.bi-flex-center-adapt-layout { |
|
||||||
display: box; /* OLD - Android 4.4- */ |
|
||||||
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ |
|
||||||
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ |
|
||||||
display: -ms-flexbox; /* TWEENER - IE 10 */ |
|
||||||
display: -webkit-flex; /* NEW - Chrome */ |
|
||||||
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ |
|
||||||
|
|
||||||
/* 09版 */ |
|
||||||
-webkit-box-orient: horizontal; |
|
||||||
/* 12版 */ |
|
||||||
-webkit-flex-direction: row; |
|
||||||
-moz-flex-direction: row; |
|
||||||
-ms-flex-direction: row; |
|
||||||
-o-flex-direction: row; |
|
||||||
flex-direction: row; |
|
||||||
|
|
||||||
/* 09版 */ |
|
||||||
-webkit-box-pack: center; |
|
||||||
/* 12版 */ |
|
||||||
-webkit-justify-content: center; |
|
||||||
-moz-justify-content: center; |
|
||||||
-ms-justify-content: center; |
|
||||||
-o-justify-content: center; |
|
||||||
-ms-flex-pack: center; |
|
||||||
justify-content: center; |
|
||||||
|
|
||||||
/* 09版 */ |
|
||||||
-webkit-box-align: center; |
|
||||||
/* 12版 */ |
|
||||||
-webkit-align-items: center; |
|
||||||
-moz-align-items: center; |
|
||||||
-ms-flex-align: center; |
|
||||||
-ms-align-items: center; |
|
||||||
-o-align-items: center; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
@ -1,42 +0,0 @@ |
|||||||
.bi-flex-scrollable-center-adapt-layout { |
|
||||||
& .flex-scrollable-center-adapt-layout-wrapper { |
|
||||||
display: box; /* OLD - Android 4.4- */ |
|
||||||
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ |
|
||||||
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ |
|
||||||
display: -ms-flexbox; /* TWEENER - IE 10 */ |
|
||||||
display: -webkit-flex; /* NEW - Chrome */ |
|
||||||
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ |
|
||||||
/* 09版 */ |
|
||||||
-webkit-box-orient: horizontal; |
|
||||||
/* 12版 */ |
|
||||||
-webkit-flex-direction: row; |
|
||||||
-moz-flex-direction: row; |
|
||||||
-ms-flex-direction: row; |
|
||||||
-o-flex-direction: row; |
|
||||||
flex-direction: row; |
|
||||||
|
|
||||||
/* 09版 */ |
|
||||||
-webkit-box-pack: center; |
|
||||||
/* 12版 */ |
|
||||||
-webkit-justify-content: center; |
|
||||||
-moz-justify-content: center; |
|
||||||
-ms-justify-content: center; |
|
||||||
-ms-flex-pack: center; |
|
||||||
-o-justify-content: center; |
|
||||||
justify-content: center; |
|
||||||
|
|
||||||
/* 09版 */ |
|
||||||
-webkit-box-align: center; |
|
||||||
/* 12版 */ |
|
||||||
-webkit-align-items: center; |
|
||||||
-moz-align-items: center; |
|
||||||
-ms-align-items: center; |
|
||||||
-ms-flex-align: center; |
|
||||||
-o-align-items: center; |
|
||||||
align-items: center; |
|
||||||
|
|
||||||
min-width: 100%; |
|
||||||
min-height: 100%; |
|
||||||
float: left; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,23 @@ |
|||||||
|
.bi-inline-horizontal-adapt-layout { |
||||||
|
&:after { |
||||||
|
display: inline-block; |
||||||
|
width: 0; |
||||||
|
min-height: 100%; |
||||||
|
vertical-align: middle; |
||||||
|
content: ' '; |
||||||
|
} |
||||||
|
|
||||||
|
& > .inline-horizontal-adapt-item { |
||||||
|
display: inline-block; |
||||||
|
|
||||||
|
&.x-icon { |
||||||
|
display: inline-block !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
& > .bi-combo { |
||||||
|
&.bi-combo-popup { |
||||||
|
display: inline-block !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue