Browse Source

Merge branch 'master' of https://cloud.finedevelop.com/scm/visual/fineui

# Conflicts:
#	dist/2.0/fineui.ie.min.js
#	dist/2.0/fineui.min.css
#	dist/2.0/fineui.min.js
#	dist/bundle.ie.min.js
#	dist/bundle.min.css
#	dist/bundle.min.js
#	dist/fineui.ie.min.js
#	dist/fineui.min.css
#	dist/fineui.min.js
#	dist/utils.min.js
es6
windy 6 years ago
parent
commit
10accb7991
  1. 243
      dist/2.0/fineui.css
  2. 358
      dist/2.0/fineui.ie.js
  3. 358
      dist/2.0/fineui.js
  4. 243
      dist/bundle.css
  5. 358
      dist/bundle.ie.js
  6. 358
      dist/bundle.js
  7. 243
      dist/core.css
  8. 358
      dist/core.js
  9. 243
      dist/core_without_normalize.css
  10. 243
      dist/fineui.css
  11. 358
      dist/fineui.ie.js
  12. 358
      dist/fineui.js
  13. 334
      dist/fineui_without_jquery_polyfill.js
  14. 24
      src/core/platform/web/config.js
  15. 6
      src/core/wrapper/layout/flex/flex.center.js
  16. 54
      src/core/wrapper/layout/flex/flex.horizontal.center.js
  17. 16
      src/core/wrapper/layout/flex/flex.horizontal.js
  18. 62
      src/core/wrapper/layout/flex/flex.vertical.center.js
  19. 75
      src/core/wrapper/layout/flex/flex.vertical.js
  20. 8
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js
  21. 52
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js
  22. 32
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
  23. 80
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js
  24. 83
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
  25. 243
      src/css/core/wrapper/flex.css
  26. 2
      src/less/core/wrapper/flex.center.less
  27. 45
      src/less/core/wrapper/flex.horizontal.less
  28. 76
      src/less/core/wrapper/flex.vertical.center.less
  29. 110
      src/less/core/wrapper/flex.vertical.less
  30. 4
      src/less/core/wrapper/flex.wrapper.center.less
  31. 47
      src/less/core/wrapper/flex.wrapper.horizontal.less
  32. 80
      src/less/core/wrapper/flex.wrapper.vertical.center.less
  33. 113
      src/less/core/wrapper/flex.wrapper.vertical.less

243
dist/2.0/fineui.css vendored

@ -1592,7 +1592,7 @@ textarea {
box-sizing: content-box;
/*W3C标准(IE9+,Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
}
.bi-flex-center-layout {
.bi-flex-center-adapt-layout {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -1681,7 +1681,7 @@ textarea {
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.bi-flex-horizontal-layout.middle {
.bi-flex-horizontal-layout.v-middle {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -1692,7 +1692,7 @@ textarea {
-o-align-items: center;
align-items: center;
}
.bi-flex-horizontal-layout.bottom {
.bi-flex-horizontal-layout.v-bottom {
/* 09版 */
-webkit-box-align: flex-end;
/* 12版 */
@ -1703,8 +1703,47 @@ textarea {
-o-align-items: flex-end;
align-items: flex-end;
}
.bi-flex-horizontal-layout.v-stretch {
/* 09版 */
-webkit-box-align: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-horizontal-layout.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 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: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-vertical-center {
.bi-flex-vertical-layout {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -1718,13 +1757,13 @@ textarea {
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
/* 09版 */
-webkit-box-orient: horizontal;
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 09版 */
-webkit-box-pack: flex-start;
/* 12版 */
@ -1734,6 +1773,25 @@ textarea {
-o-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
/* 09版 */
-webkit-box-align: start;
/* 12版 */
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-ms-flex-align: start;
-o-align-items: flex-start;
align-items: flex-start;
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.bi-flex-vertical-layout.h-center {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -1743,24 +1801,38 @@ textarea {
-ms-flex-align: center;
-o-align-items: center;
align-items: center;
}
.bi-flex-vertical-layout.h-right {
/* 09版 */
/*-webkit-box-lines: multiple;*/
-webkit-box-align: flex-end;
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-align-items: flex-end;
-moz-align-items: flex-end;
-ms-align-items: flex-end;
-ms-flex-align: end;
-o-align-items: flex-end;
align-items: flex-end;
}
.bi-flex-vertical-center.stretch {
.bi-flex-vertical-layout.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
-webkit-box-align: stretch;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-vertical-layout.v-stretch {
/* 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版 */
@ -1781,7 +1853,7 @@ textarea {
align-items: stretch;
}
.bi-flex-wrapper-center-layout .flex-wrapper-center-layout-wrapper {
.bi-flex-scrollable-center-adapt-layout .flex-scrollable-center-adapt-layout-wrapper {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -1825,7 +1897,7 @@ textarea {
float: left;
}
.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper {
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -1874,7 +1946,7 @@ textarea {
flex-wrap: nowrap;
min-height: 100%;
}
.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper.middle {
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-middle {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -1884,7 +1956,7 @@ textarea {
-o-align-items: center;
align-items: center;
}
.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper.bottom {
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-bottom {
/* 09版 */
-webkit-box-align: flex-end;
/* 12版 */
@ -1894,8 +1966,46 @@ textarea {
-o-align-items: flex-end;
align-items: flex-end;
}
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-stretch {
/* 09版 */
-webkit-box-align: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 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: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper {
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -1909,13 +2019,13 @@ textarea {
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
/* 09版 */
-webkit-box-orient: horizontal;
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 09版 */
-webkit-box-pack: flex-start;
/* 12版 */
@ -1925,6 +2035,26 @@ textarea {
-ms-flex-pack: start;
-o-justify-content: flex-start;
justify-content: flex-start;
/* 09版 */
-webkit-box-align: flex-start;
/* 12版 */
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-ms-flex-align: start;
-o-align-items: flex-start;
align-items: flex-start;
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
min-width: 100%;
}
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-center {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -1934,33 +2064,45 @@ textarea {
-ms-flex-align: center;
-o-align-items: center;
align-items: center;
}
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-right {
/* 09版 */
/*-webkit-box-lines: multiple;*/
-webkit-box-align: flex-end;
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
min-height: 100%;
float: left;
-webkit-align-items: flex-end;
-moz-align-items: flex-end;
-ms-align-items: flex-end;
-ms-flex-align: end;
-o-align-items: flex-end;
align-items: flex-end;
}
.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper.stretch {
width: 100%;
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
-webkit-box-align: stretch;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.v-stretch {
/* 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版 */
@ -1969,6 +2111,7 @@ textarea {
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}

358
dist/2.0/fineui.ie.js vendored

@ -19158,12 +19158,12 @@ BI.prepares.push(function () {
BI.Plugin.registerWidget("bi.center_adapt", function (ob) {
var isIE = BI.isIE(), supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
if (!isIE && supportFlex && justOneItem) {
// 有滚动条的情况下需要用到flex_wrapper_center布局
// 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局
return BI.extend(ob, {type: "bi.flex_wrapper_center"});
// 不是IE用flex_scrollable_center_adapt布局
return BI.extend(ob, {type: "bi.flex_scrollable_center_adapt"});
}
return BI.extend(ob, {type: "bi.flex_center"});
return BI.extend(ob, {type: "bi.flex_center_adapt"});
}
// 一个item的情况下inline布局睥睨天下
if(justOneItem) {
@ -19174,12 +19174,12 @@ BI.prepares.push(function () {
BI.Plugin.registerWidget("bi.vertical_adapt", function (ob) {
var isIE = BI.isIE(), supportFlex = isSupportFlex();
if (!isIE && supportFlex) {
// 有滚动条的情况下需要用到flex_wrapper_center布局
// 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局
return BI.extend({}, ob, {type: "bi.flex_wrapper_vertical_center"});
// 不是IE用flex__scrollable_center_adapt布局
return BI.extend({}, ob, {type: "bi.flex_scrollable_vertical_center_adapt"});
}
return BI.extend(ob, {type: "bi.flex_vertical_center"});
return BI.extend(ob, {type: "bi.flex_vertical_center_adapt"});
}
return BI.extend(ob, {type: "bi.inline_vertical_adapt"});
});
@ -19191,12 +19191,12 @@ BI.prepares.push(function () {
});
BI.Plugin.registerWidget("bi.float_center_adapt", function (ob) {
if (!BI.isIE() && isSupportFlex()) {
// 有滚动条的情况下需要用到flex_wrapper_center布局
// 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局
return BI.extend({}, ob, {type: "bi.flex_wrapper_center"});
// 不是IE用flex_scrollable_center_adapt布局
return BI.extend({}, ob, {type: "bi.flex_scrollable_center_adapt"});
}
return BI.extend(ob, {type: "bi.flex_center"});
return BI.extend(ob, {type: "bi.flex_center_adapt"});
}
return BI.extend(ob, {type: "bi.inline_center_adapt"});
});
@ -31302,7 +31302,7 @@ BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
BI.FlexCenterLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-center-layout"
baseCls: "bi-flex-center-adapt-layout"
});
},
render: function () {
@ -31318,7 +31318,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_center布局不需要resize");
// console.log("flex_center_adapt布局不需要resize");
},
populate: function (items) {
@ -31326,7 +31326,60 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
this._mount();
}
});
BI.shortcut("bi.flex_center", BI.FlexCenterLayout);/**
BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout);/**
* Created by GUY on 2016/12/2.
*
* @class BI.FlexHorizontalCenter
* @extends BI.Layout
*/
BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-center-adapt-layout",
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrolly: false,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.flex_vertical",
ref: function (_ref) {
self.wrapper = _ref;
},
horizontalAlign: BI.HorizontalAlign.Center,
verticalAlign: o.verticalAlign,
rowSize: o.rowSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
resize: function () {
// console.log("flex_vertical_center_adapt布局不需要resize");
},
populate: function (items) {
self.populate(items);
}
});
BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);
BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
@ -31338,6 +31391,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-layout",
verticalAlign: BI.VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Left,// 如果只有一个子元素且想让该子元素横向撑满,设置成Stretch
columnSize: [],
scrollx: true,
hgap: 0,
@ -31351,14 +31405,23 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
render: function () {
BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.element.addClass(o.verticalAlign);
this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative", "flex-shrink": "0"});
w.element.css({
position: "relative",
"flex-shrink": "0"
});
if (o.columnSize[i] > 0) {
w.element.width(o.columnSize[i]);
}
if (o.columnSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
@ -31366,7 +31429,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
}
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"
"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) {
@ -31401,9 +31464,10 @@ BI.shortcut("bi.flex_horizontal", BI.FlexHorizontalLayout);/**
BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-vertical-center",
baseCls: "bi-flex-vertical-center-adapt-layout",
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
scrollx: false,
hgap: 0,
vgap: 0,
lgap: 0,
@ -31413,24 +31477,87 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
var self = this, o = this.options;
return {
type: "bi.flex_horizontal",
ref: function (_ref) {
self.wrapper = _ref;
},
verticalAlign: BI.VerticalAlign.Middle,
horizontalAlign: o.horizontalAlign,
columnSize: o.columnSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
resize: function () {
// console.log("flex_vertical_center_adapt布局不需要resize");
},
populate: function (items) {
self.populate(items);
}
});
BI.shortcut("bi.flex_vertical_adapt", BI.FlexVerticalCenter);
BI.shortcut("bi.flex_vertical_center_adapt", BI.FlexVerticalCenter);/**
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalLayout
* @extends BI.Layout
*/
BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-vertical-layout",
horizontalAlign: BI.HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.element.addClass(o.horizontalAlign);
this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var w = BI.FlexVerticalLayout.superclass._addElement.apply(this, arguments);
var o = this.options;
var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative", "flex-shrink": "0"});
w.element.css({
position: "relative",
"flex-shrink": "0"
});
if (o.rowSize[i] > 0) {
w.element.height(o.rowSize[i]);
}
if (o.rowSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
"margin-top": (i === 0 ? o.vgap : 0) + 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"
"margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@ -31447,15 +31574,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_vertical_center布局不需要resize");
// console.log("flex_vertical布局不需要resize");
},
populate: function (items) {
BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
BI.FlexVerticalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
BI.shortcut("bi.flex_vertical", BI.FlexVerticalLayout);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
@ -31465,12 +31592,12 @@ BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
BI.FlexCenterLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-center-layout clearfix"
baseCls: "bi-flex-scrollable-center-layout clearfix"
});
},
render: function () {
BI.FlexCenterLayout.superclass.render.apply(this, arguments);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-center-adapt-layout-wrapper");
this.populate(this.options.items);
},
@ -31491,7 +31618,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_center布局不需要resize");
// console.log("flex_center_adapt布局不需要resize");
},
populate: function (items) {
@ -31499,20 +31626,73 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_center", BI.FlexCenterLayout);/**
BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexCenterLayout);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalCenter
* @extends BI.Layout
*/
BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexWrapperHorizontalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrollable: null,
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.flex_scrollable_vertical",
ref: function (_ref) {
self.wrapper = _ref;
},
horizontalAlign: BI.HorizontalAlign.Center,
verticalAlign: o.verticalAlign,
rowSize: o.rowSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
populate: function (items) {
this.wrapper.populate(items);
}
});
BI.shortcut("bi.flex_scrollable_horizontal_adapt", BI.FlexWrapperHorizontalCenter);
BI.shortcut("bi.flex_scrollable_horizontal_center_adapt", BI.FlexWrapperHorizontalCenter);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexHorizontalLayout
* @extends BI.Layout
*/
BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-horizontal-layout clearfix",
verticalAlign: BI.VerticalAlign.Middle,
return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-horizontal-layout clearfix",
verticalAlign: BI.VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
// scrollable: true,
scrollable: null,
scrollx: true,
hgap: 0,
vgap: 0,
lgap: 0,
@ -31522,16 +31702,22 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-horizontal-layout-wrapper v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
var w = BI.FlexWrapperHorizontalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative"});
if (o.columnSize[i] > 0) {
w.element.width(o.columnSize[i]);
}
if (o.columnSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
@ -31539,7 +31725,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
}
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"
"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) {
@ -31565,28 +31751,80 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_horizontal布局不需要resize");
// console.log("flex_wrapper_horizontal布局不需要resize");
},
populate: function (items) {
BI.FlexHorizontalLayout.superclass.populate.apply(this, arguments);
BI.FlexWrapperHorizontalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_horizontal", BI.FlexHorizontalLayout);/**
BI.shortcut("bi.flex_scrollable_horizontal", BI.FlexWrapperHorizontalLayout);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalCenter
* @extends BI.Layout
*/
BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-vertical-center clearfix",
horizontalAlign: BI.HorizontalAlign.Middle,
return BI.extend(BI.FlexWrapperVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
// scrollable: true,
scrollx: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.flex_scrollable_horizontal",
ref: function (_ref) {
self.wrapper = _ref;
},
verticalAlign: BI.VerticalAlign.Middle,
horizontalAlign: o.horizontalAlign,
columnSize: o.columnSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
populate: function (items) {
this.wrapper.populate(items);
}
});
BI.shortcut("bi.flex_scrollable_vertical_adapt", BI.FlexWrapperVerticalCenter);
BI.shortcut("bi.flex_scrollable_vertical_center_adapt", BI.FlexWrapperVerticalCenter);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexWrapperVerticalLayout
* @extends BI.Layout
*/
BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-layout clearfix",
horizontalAlign: BI.HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrollable: null,
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
@ -31596,24 +31834,30 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-vertical-layout-scrollable h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
var w = BI.FlexWrapperVerticalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative"});
if (o.rowSize[i] > 0) {
w.element.height(o.rowSize[i]);
}
if (o.rowSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
"margin-top": (i === 0 ? o.vgap : 0) + 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"
"margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@ -31639,15 +31883,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_vertical_center布局不需要resize");
// console.log("flex_wrapper_vertical布局不需要resize");
},
populate: function (items) {
BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
BI.FlexWrapperVerticalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_vertical_center", BI.FlexVerticalCenter);/**
BI.shortcut("bi.flex_scrollable_vertical", BI.FlexWrapperVerticalLayout);/**
* 固定子组件上下左右的布局容器
* @class BI.AbsoluteLayout
* @extends BI.Layout

358
dist/2.0/fineui.js vendored

@ -19158,12 +19158,12 @@ BI.prepares.push(function () {
BI.Plugin.registerWidget("bi.center_adapt", function (ob) {
var isIE = BI.isIE(), supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
if (!isIE && supportFlex && justOneItem) {
// 有滚动条的情况下需要用到flex_wrapper_center布局
// 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局
return BI.extend(ob, {type: "bi.flex_wrapper_center"});
// 不是IE用flex_scrollable_center_adapt布局
return BI.extend(ob, {type: "bi.flex_scrollable_center_adapt"});
}
return BI.extend(ob, {type: "bi.flex_center"});
return BI.extend(ob, {type: "bi.flex_center_adapt"});
}
// 一个item的情况下inline布局睥睨天下
if(justOneItem) {
@ -19174,12 +19174,12 @@ BI.prepares.push(function () {
BI.Plugin.registerWidget("bi.vertical_adapt", function (ob) {
var isIE = BI.isIE(), supportFlex = isSupportFlex();
if (!isIE && supportFlex) {
// 有滚动条的情况下需要用到flex_wrapper_center布局
// 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局
return BI.extend({}, ob, {type: "bi.flex_wrapper_vertical_center"});
// 不是IE用flex__scrollable_center_adapt布局
return BI.extend({}, ob, {type: "bi.flex_scrollable_vertical_center_adapt"});
}
return BI.extend(ob, {type: "bi.flex_vertical_center"});
return BI.extend(ob, {type: "bi.flex_vertical_center_adapt"});
}
return BI.extend(ob, {type: "bi.inline_vertical_adapt"});
});
@ -19191,12 +19191,12 @@ BI.prepares.push(function () {
});
BI.Plugin.registerWidget("bi.float_center_adapt", function (ob) {
if (!BI.isIE() && isSupportFlex()) {
// 有滚动条的情况下需要用到flex_wrapper_center布局
// 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局
return BI.extend({}, ob, {type: "bi.flex_wrapper_center"});
// 不是IE用flex_scrollable_center_adapt布局
return BI.extend({}, ob, {type: "bi.flex_scrollable_center_adapt"});
}
return BI.extend(ob, {type: "bi.flex_center"});
return BI.extend(ob, {type: "bi.flex_center_adapt"});
}
return BI.extend(ob, {type: "bi.inline_center_adapt"});
});
@ -31302,7 +31302,7 @@ BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
BI.FlexCenterLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-center-layout"
baseCls: "bi-flex-center-adapt-layout"
});
},
render: function () {
@ -31318,7 +31318,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_center布局不需要resize");
// console.log("flex_center_adapt布局不需要resize");
},
populate: function (items) {
@ -31326,7 +31326,60 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
this._mount();
}
});
BI.shortcut("bi.flex_center", BI.FlexCenterLayout);/**
BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout);/**
* Created by GUY on 2016/12/2.
*
* @class BI.FlexHorizontalCenter
* @extends BI.Layout
*/
BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-center-adapt-layout",
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrolly: false,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.flex_vertical",
ref: function (_ref) {
self.wrapper = _ref;
},
horizontalAlign: BI.HorizontalAlign.Center,
verticalAlign: o.verticalAlign,
rowSize: o.rowSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
resize: function () {
// console.log("flex_vertical_center_adapt布局不需要resize");
},
populate: function (items) {
self.populate(items);
}
});
BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);
BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
@ -31338,6 +31391,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-layout",
verticalAlign: BI.VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Left,// 如果只有一个子元素且想让该子元素横向撑满,设置成Stretch
columnSize: [],
scrollx: true,
hgap: 0,
@ -31351,14 +31405,23 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
render: function () {
BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.element.addClass(o.verticalAlign);
this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative", "flex-shrink": "0"});
w.element.css({
position: "relative",
"flex-shrink": "0"
});
if (o.columnSize[i] > 0) {
w.element.width(o.columnSize[i]);
}
if (o.columnSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
@ -31366,7 +31429,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
}
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"
"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) {
@ -31401,9 +31464,10 @@ BI.shortcut("bi.flex_horizontal", BI.FlexHorizontalLayout);/**
BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-vertical-center",
baseCls: "bi-flex-vertical-center-adapt-layout",
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
scrollx: false,
hgap: 0,
vgap: 0,
lgap: 0,
@ -31413,24 +31477,87 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
var self = this, o = this.options;
return {
type: "bi.flex_horizontal",
ref: function (_ref) {
self.wrapper = _ref;
},
verticalAlign: BI.VerticalAlign.Middle,
horizontalAlign: o.horizontalAlign,
columnSize: o.columnSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
resize: function () {
// console.log("flex_vertical_center_adapt布局不需要resize");
},
populate: function (items) {
self.populate(items);
}
});
BI.shortcut("bi.flex_vertical_adapt", BI.FlexVerticalCenter);
BI.shortcut("bi.flex_vertical_center_adapt", BI.FlexVerticalCenter);/**
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalLayout
* @extends BI.Layout
*/
BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-vertical-layout",
horizontalAlign: BI.HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.element.addClass(o.horizontalAlign);
this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var w = BI.FlexVerticalLayout.superclass._addElement.apply(this, arguments);
var o = this.options;
var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative", "flex-shrink": "0"});
w.element.css({
position: "relative",
"flex-shrink": "0"
});
if (o.rowSize[i] > 0) {
w.element.height(o.rowSize[i]);
}
if (o.rowSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
"margin-top": (i === 0 ? o.vgap : 0) + 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"
"margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@ -31447,15 +31574,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_vertical_center布局不需要resize");
// console.log("flex_vertical布局不需要resize");
},
populate: function (items) {
BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
BI.FlexVerticalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
BI.shortcut("bi.flex_vertical", BI.FlexVerticalLayout);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
@ -31465,12 +31592,12 @@ BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
BI.FlexCenterLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-center-layout clearfix"
baseCls: "bi-flex-scrollable-center-layout clearfix"
});
},
render: function () {
BI.FlexCenterLayout.superclass.render.apply(this, arguments);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-center-adapt-layout-wrapper");
this.populate(this.options.items);
},
@ -31491,7 +31618,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_center布局不需要resize");
// console.log("flex_center_adapt布局不需要resize");
},
populate: function (items) {
@ -31499,20 +31626,73 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_center", BI.FlexCenterLayout);/**
BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexCenterLayout);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalCenter
* @extends BI.Layout
*/
BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexWrapperHorizontalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrollable: null,
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.flex_scrollable_vertical",
ref: function (_ref) {
self.wrapper = _ref;
},
horizontalAlign: BI.HorizontalAlign.Center,
verticalAlign: o.verticalAlign,
rowSize: o.rowSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
populate: function (items) {
this.wrapper.populate(items);
}
});
BI.shortcut("bi.flex_scrollable_horizontal_adapt", BI.FlexWrapperHorizontalCenter);
BI.shortcut("bi.flex_scrollable_horizontal_center_adapt", BI.FlexWrapperHorizontalCenter);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexHorizontalLayout
* @extends BI.Layout
*/
BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-horizontal-layout clearfix",
verticalAlign: BI.VerticalAlign.Middle,
return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-horizontal-layout clearfix",
verticalAlign: BI.VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
// scrollable: true,
scrollable: null,
scrollx: true,
hgap: 0,
vgap: 0,
lgap: 0,
@ -31522,16 +31702,22 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-horizontal-layout-wrapper v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
var w = BI.FlexWrapperHorizontalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative"});
if (o.columnSize[i] > 0) {
w.element.width(o.columnSize[i]);
}
if (o.columnSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
@ -31539,7 +31725,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
}
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"
"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) {
@ -31565,28 +31751,80 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_horizontal布局不需要resize");
// console.log("flex_wrapper_horizontal布局不需要resize");
},
populate: function (items) {
BI.FlexHorizontalLayout.superclass.populate.apply(this, arguments);
BI.FlexWrapperHorizontalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_horizontal", BI.FlexHorizontalLayout);/**
BI.shortcut("bi.flex_scrollable_horizontal", BI.FlexWrapperHorizontalLayout);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalCenter
* @extends BI.Layout
*/
BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-vertical-center clearfix",
horizontalAlign: BI.HorizontalAlign.Middle,
return BI.extend(BI.FlexWrapperVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
// scrollable: true,
scrollx: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.flex_scrollable_horizontal",
ref: function (_ref) {
self.wrapper = _ref;
},
verticalAlign: BI.VerticalAlign.Middle,
horizontalAlign: o.horizontalAlign,
columnSize: o.columnSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
populate: function (items) {
this.wrapper.populate(items);
}
});
BI.shortcut("bi.flex_scrollable_vertical_adapt", BI.FlexWrapperVerticalCenter);
BI.shortcut("bi.flex_scrollable_vertical_center_adapt", BI.FlexWrapperVerticalCenter);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexWrapperVerticalLayout
* @extends BI.Layout
*/
BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-layout clearfix",
horizontalAlign: BI.HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrollable: null,
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
@ -31596,24 +31834,30 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-vertical-layout-scrollable h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
var w = BI.FlexWrapperVerticalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative"});
if (o.rowSize[i] > 0) {
w.element.height(o.rowSize[i]);
}
if (o.rowSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
"margin-top": (i === 0 ? o.vgap : 0) + 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"
"margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@ -31639,15 +31883,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_vertical_center布局不需要resize");
// console.log("flex_wrapper_vertical布局不需要resize");
},
populate: function (items) {
BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
BI.FlexWrapperVerticalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_vertical_center", BI.FlexVerticalCenter);/**
BI.shortcut("bi.flex_scrollable_vertical", BI.FlexWrapperVerticalLayout);/**
* 固定子组件上下左右的布局容器
* @class BI.AbsoluteLayout
* @extends BI.Layout

243
dist/bundle.css vendored

@ -1592,7 +1592,7 @@ textarea {
box-sizing: content-box;
/*W3C标准(IE9+,Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
}
.bi-flex-center-layout {
.bi-flex-center-adapt-layout {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -1681,7 +1681,7 @@ textarea {
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.bi-flex-horizontal-layout.middle {
.bi-flex-horizontal-layout.v-middle {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -1692,7 +1692,7 @@ textarea {
-o-align-items: center;
align-items: center;
}
.bi-flex-horizontal-layout.bottom {
.bi-flex-horizontal-layout.v-bottom {
/* 09版 */
-webkit-box-align: flex-end;
/* 12版 */
@ -1703,8 +1703,47 @@ textarea {
-o-align-items: flex-end;
align-items: flex-end;
}
.bi-flex-horizontal-layout.v-stretch {
/* 09版 */
-webkit-box-align: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-horizontal-layout.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 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: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-vertical-center {
.bi-flex-vertical-layout {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -1718,13 +1757,13 @@ textarea {
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
/* 09版 */
-webkit-box-orient: horizontal;
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 09版 */
-webkit-box-pack: flex-start;
/* 12版 */
@ -1734,6 +1773,25 @@ textarea {
-o-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
/* 09版 */
-webkit-box-align: start;
/* 12版 */
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-ms-flex-align: start;
-o-align-items: flex-start;
align-items: flex-start;
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.bi-flex-vertical-layout.h-center {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -1743,24 +1801,38 @@ textarea {
-ms-flex-align: center;
-o-align-items: center;
align-items: center;
}
.bi-flex-vertical-layout.h-right {
/* 09版 */
/*-webkit-box-lines: multiple;*/
-webkit-box-align: flex-end;
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-align-items: flex-end;
-moz-align-items: flex-end;
-ms-align-items: flex-end;
-ms-flex-align: end;
-o-align-items: flex-end;
align-items: flex-end;
}
.bi-flex-vertical-center.stretch {
.bi-flex-vertical-layout.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
-webkit-box-align: stretch;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-vertical-layout.v-stretch {
/* 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版 */
@ -1781,7 +1853,7 @@ textarea {
align-items: stretch;
}
.bi-flex-wrapper-center-layout .flex-wrapper-center-layout-wrapper {
.bi-flex-scrollable-center-adapt-layout .flex-scrollable-center-adapt-layout-wrapper {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -1825,7 +1897,7 @@ textarea {
float: left;
}
.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper {
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -1874,7 +1946,7 @@ textarea {
flex-wrap: nowrap;
min-height: 100%;
}
.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper.middle {
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-middle {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -1884,7 +1956,7 @@ textarea {
-o-align-items: center;
align-items: center;
}
.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper.bottom {
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-bottom {
/* 09版 */
-webkit-box-align: flex-end;
/* 12版 */
@ -1894,8 +1966,46 @@ textarea {
-o-align-items: flex-end;
align-items: flex-end;
}
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-stretch {
/* 09版 */
-webkit-box-align: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 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: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper {
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -1909,13 +2019,13 @@ textarea {
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
/* 09版 */
-webkit-box-orient: horizontal;
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 09版 */
-webkit-box-pack: flex-start;
/* 12版 */
@ -1925,6 +2035,26 @@ textarea {
-ms-flex-pack: start;
-o-justify-content: flex-start;
justify-content: flex-start;
/* 09版 */
-webkit-box-align: flex-start;
/* 12版 */
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-ms-flex-align: start;
-o-align-items: flex-start;
align-items: flex-start;
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
min-width: 100%;
}
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-center {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -1934,33 +2064,45 @@ textarea {
-ms-flex-align: center;
-o-align-items: center;
align-items: center;
}
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-right {
/* 09版 */
/*-webkit-box-lines: multiple;*/
-webkit-box-align: flex-end;
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
min-height: 100%;
float: left;
-webkit-align-items: flex-end;
-moz-align-items: flex-end;
-ms-align-items: flex-end;
-ms-flex-align: end;
-o-align-items: flex-end;
align-items: flex-end;
}
.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper.stretch {
width: 100%;
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
-webkit-box-align: stretch;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.v-stretch {
/* 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版 */
@ -1969,6 +2111,7 @@ textarea {
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}

358
dist/bundle.ie.js vendored

@ -19158,12 +19158,12 @@ BI.prepares.push(function () {
BI.Plugin.registerWidget("bi.center_adapt", function (ob) {
var isIE = BI.isIE(), supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
if (!isIE && supportFlex && justOneItem) {
// 有滚动条的情况下需要用到flex_wrapper_center布局
// 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局
return BI.extend(ob, {type: "bi.flex_wrapper_center"});
// 不是IE用flex_scrollable_center_adapt布局
return BI.extend(ob, {type: "bi.flex_scrollable_center_adapt"});
}
return BI.extend(ob, {type: "bi.flex_center"});
return BI.extend(ob, {type: "bi.flex_center_adapt"});
}
// 一个item的情况下inline布局睥睨天下
if(justOneItem) {
@ -19174,12 +19174,12 @@ BI.prepares.push(function () {
BI.Plugin.registerWidget("bi.vertical_adapt", function (ob) {
var isIE = BI.isIE(), supportFlex = isSupportFlex();
if (!isIE && supportFlex) {
// 有滚动条的情况下需要用到flex_wrapper_center布局
// 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局
return BI.extend({}, ob, {type: "bi.flex_wrapper_vertical_center"});
// 不是IE用flex__scrollable_center_adapt布局
return BI.extend({}, ob, {type: "bi.flex_scrollable_vertical_center_adapt"});
}
return BI.extend(ob, {type: "bi.flex_vertical_center"});
return BI.extend(ob, {type: "bi.flex_vertical_center_adapt"});
}
return BI.extend(ob, {type: "bi.inline_vertical_adapt"});
});
@ -19191,12 +19191,12 @@ BI.prepares.push(function () {
});
BI.Plugin.registerWidget("bi.float_center_adapt", function (ob) {
if (!BI.isIE() && isSupportFlex()) {
// 有滚动条的情况下需要用到flex_wrapper_center布局
// 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局
return BI.extend({}, ob, {type: "bi.flex_wrapper_center"});
// 不是IE用flex_scrollable_center_adapt布局
return BI.extend({}, ob, {type: "bi.flex_scrollable_center_adapt"});
}
return BI.extend(ob, {type: "bi.flex_center"});
return BI.extend(ob, {type: "bi.flex_center_adapt"});
}
return BI.extend(ob, {type: "bi.inline_center_adapt"});
});
@ -31302,7 +31302,7 @@ BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
BI.FlexCenterLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-center-layout"
baseCls: "bi-flex-center-adapt-layout"
});
},
render: function () {
@ -31318,7 +31318,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_center布局不需要resize");
// console.log("flex_center_adapt布局不需要resize");
},
populate: function (items) {
@ -31326,7 +31326,60 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
this._mount();
}
});
BI.shortcut("bi.flex_center", BI.FlexCenterLayout);/**
BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout);/**
* Created by GUY on 2016/12/2.
*
* @class BI.FlexHorizontalCenter
* @extends BI.Layout
*/
BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-center-adapt-layout",
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrolly: false,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.flex_vertical",
ref: function (_ref) {
self.wrapper = _ref;
},
horizontalAlign: BI.HorizontalAlign.Center,
verticalAlign: o.verticalAlign,
rowSize: o.rowSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
resize: function () {
// console.log("flex_vertical_center_adapt布局不需要resize");
},
populate: function (items) {
self.populate(items);
}
});
BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);
BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
@ -31338,6 +31391,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-layout",
verticalAlign: BI.VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Left,// 如果只有一个子元素且想让该子元素横向撑满,设置成Stretch
columnSize: [],
scrollx: true,
hgap: 0,
@ -31351,14 +31405,23 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
render: function () {
BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.element.addClass(o.verticalAlign);
this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative", "flex-shrink": "0"});
w.element.css({
position: "relative",
"flex-shrink": "0"
});
if (o.columnSize[i] > 0) {
w.element.width(o.columnSize[i]);
}
if (o.columnSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
@ -31366,7 +31429,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
}
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"
"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) {
@ -31401,9 +31464,10 @@ BI.shortcut("bi.flex_horizontal", BI.FlexHorizontalLayout);/**
BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-vertical-center",
baseCls: "bi-flex-vertical-center-adapt-layout",
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
scrollx: false,
hgap: 0,
vgap: 0,
lgap: 0,
@ -31413,24 +31477,87 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
var self = this, o = this.options;
return {
type: "bi.flex_horizontal",
ref: function (_ref) {
self.wrapper = _ref;
},
verticalAlign: BI.VerticalAlign.Middle,
horizontalAlign: o.horizontalAlign,
columnSize: o.columnSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
resize: function () {
// console.log("flex_vertical_center_adapt布局不需要resize");
},
populate: function (items) {
self.populate(items);
}
});
BI.shortcut("bi.flex_vertical_adapt", BI.FlexVerticalCenter);
BI.shortcut("bi.flex_vertical_center_adapt", BI.FlexVerticalCenter);/**
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalLayout
* @extends BI.Layout
*/
BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-vertical-layout",
horizontalAlign: BI.HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.element.addClass(o.horizontalAlign);
this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var w = BI.FlexVerticalLayout.superclass._addElement.apply(this, arguments);
var o = this.options;
var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative", "flex-shrink": "0"});
w.element.css({
position: "relative",
"flex-shrink": "0"
});
if (o.rowSize[i] > 0) {
w.element.height(o.rowSize[i]);
}
if (o.rowSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
"margin-top": (i === 0 ? o.vgap : 0) + 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"
"margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@ -31447,15 +31574,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_vertical_center布局不需要resize");
// console.log("flex_vertical布局不需要resize");
},
populate: function (items) {
BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
BI.FlexVerticalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
BI.shortcut("bi.flex_vertical", BI.FlexVerticalLayout);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
@ -31465,12 +31592,12 @@ BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
BI.FlexCenterLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-center-layout clearfix"
baseCls: "bi-flex-scrollable-center-layout clearfix"
});
},
render: function () {
BI.FlexCenterLayout.superclass.render.apply(this, arguments);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-center-adapt-layout-wrapper");
this.populate(this.options.items);
},
@ -31491,7 +31618,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_center布局不需要resize");
// console.log("flex_center_adapt布局不需要resize");
},
populate: function (items) {
@ -31499,20 +31626,73 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_center", BI.FlexCenterLayout);/**
BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexCenterLayout);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalCenter
* @extends BI.Layout
*/
BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexWrapperHorizontalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrollable: null,
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.flex_scrollable_vertical",
ref: function (_ref) {
self.wrapper = _ref;
},
horizontalAlign: BI.HorizontalAlign.Center,
verticalAlign: o.verticalAlign,
rowSize: o.rowSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
populate: function (items) {
this.wrapper.populate(items);
}
});
BI.shortcut("bi.flex_scrollable_horizontal_adapt", BI.FlexWrapperHorizontalCenter);
BI.shortcut("bi.flex_scrollable_horizontal_center_adapt", BI.FlexWrapperHorizontalCenter);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexHorizontalLayout
* @extends BI.Layout
*/
BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-horizontal-layout clearfix",
verticalAlign: BI.VerticalAlign.Middle,
return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-horizontal-layout clearfix",
verticalAlign: BI.VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
// scrollable: true,
scrollable: null,
scrollx: true,
hgap: 0,
vgap: 0,
lgap: 0,
@ -31522,16 +31702,22 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-horizontal-layout-wrapper v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
var w = BI.FlexWrapperHorizontalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative"});
if (o.columnSize[i] > 0) {
w.element.width(o.columnSize[i]);
}
if (o.columnSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
@ -31539,7 +31725,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
}
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"
"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) {
@ -31565,28 +31751,80 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_horizontal布局不需要resize");
// console.log("flex_wrapper_horizontal布局不需要resize");
},
populate: function (items) {
BI.FlexHorizontalLayout.superclass.populate.apply(this, arguments);
BI.FlexWrapperHorizontalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_horizontal", BI.FlexHorizontalLayout);/**
BI.shortcut("bi.flex_scrollable_horizontal", BI.FlexWrapperHorizontalLayout);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalCenter
* @extends BI.Layout
*/
BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-vertical-center clearfix",
horizontalAlign: BI.HorizontalAlign.Middle,
return BI.extend(BI.FlexWrapperVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
// scrollable: true,
scrollx: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.flex_scrollable_horizontal",
ref: function (_ref) {
self.wrapper = _ref;
},
verticalAlign: BI.VerticalAlign.Middle,
horizontalAlign: o.horizontalAlign,
columnSize: o.columnSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
populate: function (items) {
this.wrapper.populate(items);
}
});
BI.shortcut("bi.flex_scrollable_vertical_adapt", BI.FlexWrapperVerticalCenter);
BI.shortcut("bi.flex_scrollable_vertical_center_adapt", BI.FlexWrapperVerticalCenter);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexWrapperVerticalLayout
* @extends BI.Layout
*/
BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-layout clearfix",
horizontalAlign: BI.HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrollable: null,
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
@ -31596,24 +31834,30 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-vertical-layout-scrollable h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
var w = BI.FlexWrapperVerticalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative"});
if (o.rowSize[i] > 0) {
w.element.height(o.rowSize[i]);
}
if (o.rowSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
"margin-top": (i === 0 ? o.vgap : 0) + 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"
"margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@ -31639,15 +31883,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_vertical_center布局不需要resize");
// console.log("flex_wrapper_vertical布局不需要resize");
},
populate: function (items) {
BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
BI.FlexWrapperVerticalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_vertical_center", BI.FlexVerticalCenter);/**
BI.shortcut("bi.flex_scrollable_vertical", BI.FlexWrapperVerticalLayout);/**
* 固定子组件上下左右的布局容器
* @class BI.AbsoluteLayout
* @extends BI.Layout

358
dist/bundle.js vendored

@ -19158,12 +19158,12 @@ BI.prepares.push(function () {
BI.Plugin.registerWidget("bi.center_adapt", function (ob) {
var isIE = BI.isIE(), supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
if (!isIE && supportFlex && justOneItem) {
// 有滚动条的情况下需要用到flex_wrapper_center布局
// 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局
return BI.extend(ob, {type: "bi.flex_wrapper_center"});
// 不是IE用flex_scrollable_center_adapt布局
return BI.extend(ob, {type: "bi.flex_scrollable_center_adapt"});
}
return BI.extend(ob, {type: "bi.flex_center"});
return BI.extend(ob, {type: "bi.flex_center_adapt"});
}
// 一个item的情况下inline布局睥睨天下
if(justOneItem) {
@ -19174,12 +19174,12 @@ BI.prepares.push(function () {
BI.Plugin.registerWidget("bi.vertical_adapt", function (ob) {
var isIE = BI.isIE(), supportFlex = isSupportFlex();
if (!isIE && supportFlex) {
// 有滚动条的情况下需要用到flex_wrapper_center布局
// 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局
return BI.extend({}, ob, {type: "bi.flex_wrapper_vertical_center"});
// 不是IE用flex__scrollable_center_adapt布局
return BI.extend({}, ob, {type: "bi.flex_scrollable_vertical_center_adapt"});
}
return BI.extend(ob, {type: "bi.flex_vertical_center"});
return BI.extend(ob, {type: "bi.flex_vertical_center_adapt"});
}
return BI.extend(ob, {type: "bi.inline_vertical_adapt"});
});
@ -19191,12 +19191,12 @@ BI.prepares.push(function () {
});
BI.Plugin.registerWidget("bi.float_center_adapt", function (ob) {
if (!BI.isIE() && isSupportFlex()) {
// 有滚动条的情况下需要用到flex_wrapper_center布局
// 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局
return BI.extend({}, ob, {type: "bi.flex_wrapper_center"});
// 不是IE用flex_scrollable_center_adapt布局
return BI.extend({}, ob, {type: "bi.flex_scrollable_center_adapt"});
}
return BI.extend(ob, {type: "bi.flex_center"});
return BI.extend(ob, {type: "bi.flex_center_adapt"});
}
return BI.extend(ob, {type: "bi.inline_center_adapt"});
});
@ -31302,7 +31302,7 @@ BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
BI.FlexCenterLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-center-layout"
baseCls: "bi-flex-center-adapt-layout"
});
},
render: function () {
@ -31318,7 +31318,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_center布局不需要resize");
// console.log("flex_center_adapt布局不需要resize");
},
populate: function (items) {
@ -31326,7 +31326,60 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
this._mount();
}
});
BI.shortcut("bi.flex_center", BI.FlexCenterLayout);/**
BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout);/**
* Created by GUY on 2016/12/2.
*
* @class BI.FlexHorizontalCenter
* @extends BI.Layout
*/
BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-center-adapt-layout",
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrolly: false,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.flex_vertical",
ref: function (_ref) {
self.wrapper = _ref;
},
horizontalAlign: BI.HorizontalAlign.Center,
verticalAlign: o.verticalAlign,
rowSize: o.rowSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
resize: function () {
// console.log("flex_vertical_center_adapt布局不需要resize");
},
populate: function (items) {
self.populate(items);
}
});
BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);
BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
@ -31338,6 +31391,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-layout",
verticalAlign: BI.VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Left,// 如果只有一个子元素且想让该子元素横向撑满,设置成Stretch
columnSize: [],
scrollx: true,
hgap: 0,
@ -31351,14 +31405,23 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
render: function () {
BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.element.addClass(o.verticalAlign);
this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative", "flex-shrink": "0"});
w.element.css({
position: "relative",
"flex-shrink": "0"
});
if (o.columnSize[i] > 0) {
w.element.width(o.columnSize[i]);
}
if (o.columnSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
@ -31366,7 +31429,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
}
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"
"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) {
@ -31401,9 +31464,10 @@ BI.shortcut("bi.flex_horizontal", BI.FlexHorizontalLayout);/**
BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-vertical-center",
baseCls: "bi-flex-vertical-center-adapt-layout",
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
scrollx: false,
hgap: 0,
vgap: 0,
lgap: 0,
@ -31413,24 +31477,87 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
var self = this, o = this.options;
return {
type: "bi.flex_horizontal",
ref: function (_ref) {
self.wrapper = _ref;
},
verticalAlign: BI.VerticalAlign.Middle,
horizontalAlign: o.horizontalAlign,
columnSize: o.columnSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
resize: function () {
// console.log("flex_vertical_center_adapt布局不需要resize");
},
populate: function (items) {
self.populate(items);
}
});
BI.shortcut("bi.flex_vertical_adapt", BI.FlexVerticalCenter);
BI.shortcut("bi.flex_vertical_center_adapt", BI.FlexVerticalCenter);/**
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalLayout
* @extends BI.Layout
*/
BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-vertical-layout",
horizontalAlign: BI.HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.element.addClass(o.horizontalAlign);
this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var w = BI.FlexVerticalLayout.superclass._addElement.apply(this, arguments);
var o = this.options;
var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative", "flex-shrink": "0"});
w.element.css({
position: "relative",
"flex-shrink": "0"
});
if (o.rowSize[i] > 0) {
w.element.height(o.rowSize[i]);
}
if (o.rowSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
"margin-top": (i === 0 ? o.vgap : 0) + 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"
"margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@ -31447,15 +31574,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_vertical_center布局不需要resize");
// console.log("flex_vertical布局不需要resize");
},
populate: function (items) {
BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
BI.FlexVerticalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
BI.shortcut("bi.flex_vertical", BI.FlexVerticalLayout);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
@ -31465,12 +31592,12 @@ BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
BI.FlexCenterLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-center-layout clearfix"
baseCls: "bi-flex-scrollable-center-layout clearfix"
});
},
render: function () {
BI.FlexCenterLayout.superclass.render.apply(this, arguments);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-center-adapt-layout-wrapper");
this.populate(this.options.items);
},
@ -31491,7 +31618,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_center布局不需要resize");
// console.log("flex_center_adapt布局不需要resize");
},
populate: function (items) {
@ -31499,20 +31626,73 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_center", BI.FlexCenterLayout);/**
BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexCenterLayout);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalCenter
* @extends BI.Layout
*/
BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexWrapperHorizontalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrollable: null,
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.flex_scrollable_vertical",
ref: function (_ref) {
self.wrapper = _ref;
},
horizontalAlign: BI.HorizontalAlign.Center,
verticalAlign: o.verticalAlign,
rowSize: o.rowSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
populate: function (items) {
this.wrapper.populate(items);
}
});
BI.shortcut("bi.flex_scrollable_horizontal_adapt", BI.FlexWrapperHorizontalCenter);
BI.shortcut("bi.flex_scrollable_horizontal_center_adapt", BI.FlexWrapperHorizontalCenter);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexHorizontalLayout
* @extends BI.Layout
*/
BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-horizontal-layout clearfix",
verticalAlign: BI.VerticalAlign.Middle,
return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-horizontal-layout clearfix",
verticalAlign: BI.VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
// scrollable: true,
scrollable: null,
scrollx: true,
hgap: 0,
vgap: 0,
lgap: 0,
@ -31522,16 +31702,22 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-horizontal-layout-wrapper v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
var w = BI.FlexWrapperHorizontalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative"});
if (o.columnSize[i] > 0) {
w.element.width(o.columnSize[i]);
}
if (o.columnSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
@ -31539,7 +31725,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
}
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"
"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) {
@ -31565,28 +31751,80 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_horizontal布局不需要resize");
// console.log("flex_wrapper_horizontal布局不需要resize");
},
populate: function (items) {
BI.FlexHorizontalLayout.superclass.populate.apply(this, arguments);
BI.FlexWrapperHorizontalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_horizontal", BI.FlexHorizontalLayout);/**
BI.shortcut("bi.flex_scrollable_horizontal", BI.FlexWrapperHorizontalLayout);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalCenter
* @extends BI.Layout
*/
BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-vertical-center clearfix",
horizontalAlign: BI.HorizontalAlign.Middle,
return BI.extend(BI.FlexWrapperVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
// scrollable: true,
scrollx: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.flex_scrollable_horizontal",
ref: function (_ref) {
self.wrapper = _ref;
},
verticalAlign: BI.VerticalAlign.Middle,
horizontalAlign: o.horizontalAlign,
columnSize: o.columnSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
populate: function (items) {
this.wrapper.populate(items);
}
});
BI.shortcut("bi.flex_scrollable_vertical_adapt", BI.FlexWrapperVerticalCenter);
BI.shortcut("bi.flex_scrollable_vertical_center_adapt", BI.FlexWrapperVerticalCenter);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexWrapperVerticalLayout
* @extends BI.Layout
*/
BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-layout clearfix",
horizontalAlign: BI.HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrollable: null,
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
@ -31596,24 +31834,30 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-vertical-layout-scrollable h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
var w = BI.FlexWrapperVerticalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative"});
if (o.rowSize[i] > 0) {
w.element.height(o.rowSize[i]);
}
if (o.rowSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
"margin-top": (i === 0 ? o.vgap : 0) + 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"
"margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@ -31639,15 +31883,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_vertical_center布局不需要resize");
// console.log("flex_wrapper_vertical布局不需要resize");
},
populate: function (items) {
BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
BI.FlexWrapperVerticalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_vertical_center", BI.FlexVerticalCenter);/**
BI.shortcut("bi.flex_scrollable_vertical", BI.FlexWrapperVerticalLayout);/**
* 固定子组件上下左右的布局容器
* @class BI.AbsoluteLayout
* @extends BI.Layout

243
dist/core.css vendored

@ -1592,7 +1592,7 @@ textarea {
box-sizing: content-box;
/*W3C标准(IE9+,Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
}
.bi-flex-center-layout {
.bi-flex-center-adapt-layout {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -1681,7 +1681,7 @@ textarea {
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.bi-flex-horizontal-layout.middle {
.bi-flex-horizontal-layout.v-middle {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -1692,7 +1692,7 @@ textarea {
-o-align-items: center;
align-items: center;
}
.bi-flex-horizontal-layout.bottom {
.bi-flex-horizontal-layout.v-bottom {
/* 09版 */
-webkit-box-align: flex-end;
/* 12版 */
@ -1703,8 +1703,47 @@ textarea {
-o-align-items: flex-end;
align-items: flex-end;
}
.bi-flex-horizontal-layout.v-stretch {
/* 09版 */
-webkit-box-align: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-horizontal-layout.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 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: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-vertical-center {
.bi-flex-vertical-layout {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -1718,13 +1757,13 @@ textarea {
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
/* 09版 */
-webkit-box-orient: horizontal;
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 09版 */
-webkit-box-pack: flex-start;
/* 12版 */
@ -1734,6 +1773,25 @@ textarea {
-o-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
/* 09版 */
-webkit-box-align: start;
/* 12版 */
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-ms-flex-align: start;
-o-align-items: flex-start;
align-items: flex-start;
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.bi-flex-vertical-layout.h-center {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -1743,24 +1801,38 @@ textarea {
-ms-flex-align: center;
-o-align-items: center;
align-items: center;
}
.bi-flex-vertical-layout.h-right {
/* 09版 */
/*-webkit-box-lines: multiple;*/
-webkit-box-align: flex-end;
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-align-items: flex-end;
-moz-align-items: flex-end;
-ms-align-items: flex-end;
-ms-flex-align: end;
-o-align-items: flex-end;
align-items: flex-end;
}
.bi-flex-vertical-center.stretch {
.bi-flex-vertical-layout.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
-webkit-box-align: stretch;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-vertical-layout.v-stretch {
/* 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版 */
@ -1781,7 +1853,7 @@ textarea {
align-items: stretch;
}
.bi-flex-wrapper-center-layout .flex-wrapper-center-layout-wrapper {
.bi-flex-scrollable-center-adapt-layout .flex-scrollable-center-adapt-layout-wrapper {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -1825,7 +1897,7 @@ textarea {
float: left;
}
.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper {
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -1874,7 +1946,7 @@ textarea {
flex-wrap: nowrap;
min-height: 100%;
}
.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper.middle {
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-middle {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -1884,7 +1956,7 @@ textarea {
-o-align-items: center;
align-items: center;
}
.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper.bottom {
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-bottom {
/* 09版 */
-webkit-box-align: flex-end;
/* 12版 */
@ -1894,8 +1966,46 @@ textarea {
-o-align-items: flex-end;
align-items: flex-end;
}
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-stretch {
/* 09版 */
-webkit-box-align: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 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: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper {
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -1909,13 +2019,13 @@ textarea {
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
/* 09版 */
-webkit-box-orient: horizontal;
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 09版 */
-webkit-box-pack: flex-start;
/* 12版 */
@ -1925,6 +2035,26 @@ textarea {
-ms-flex-pack: start;
-o-justify-content: flex-start;
justify-content: flex-start;
/* 09版 */
-webkit-box-align: flex-start;
/* 12版 */
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-ms-flex-align: start;
-o-align-items: flex-start;
align-items: flex-start;
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
min-width: 100%;
}
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-center {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -1934,33 +2064,45 @@ textarea {
-ms-flex-align: center;
-o-align-items: center;
align-items: center;
}
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-right {
/* 09版 */
/*-webkit-box-lines: multiple;*/
-webkit-box-align: flex-end;
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
min-height: 100%;
float: left;
-webkit-align-items: flex-end;
-moz-align-items: flex-end;
-ms-align-items: flex-end;
-ms-flex-align: end;
-o-align-items: flex-end;
align-items: flex-end;
}
.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper.stretch {
width: 100%;
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
-webkit-box-align: stretch;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.v-stretch {
/* 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版 */
@ -1969,6 +2111,7 @@ textarea {
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}

358
dist/core.js vendored

@ -19158,12 +19158,12 @@ BI.prepares.push(function () {
BI.Plugin.registerWidget("bi.center_adapt", function (ob) {
var isIE = BI.isIE(), supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
if (!isIE && supportFlex && justOneItem) {
// 有滚动条的情况下需要用到flex_wrapper_center布局
// 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局
return BI.extend(ob, {type: "bi.flex_wrapper_center"});
// 不是IE用flex_scrollable_center_adapt布局
return BI.extend(ob, {type: "bi.flex_scrollable_center_adapt"});
}
return BI.extend(ob, {type: "bi.flex_center"});
return BI.extend(ob, {type: "bi.flex_center_adapt"});
}
// 一个item的情况下inline布局睥睨天下
if(justOneItem) {
@ -19174,12 +19174,12 @@ BI.prepares.push(function () {
BI.Plugin.registerWidget("bi.vertical_adapt", function (ob) {
var isIE = BI.isIE(), supportFlex = isSupportFlex();
if (!isIE && supportFlex) {
// 有滚动条的情况下需要用到flex_wrapper_center布局
// 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局
return BI.extend({}, ob, {type: "bi.flex_wrapper_vertical_center"});
// 不是IE用flex__scrollable_center_adapt布局
return BI.extend({}, ob, {type: "bi.flex_scrollable_vertical_center_adapt"});
}
return BI.extend(ob, {type: "bi.flex_vertical_center"});
return BI.extend(ob, {type: "bi.flex_vertical_center_adapt"});
}
return BI.extend(ob, {type: "bi.inline_vertical_adapt"});
});
@ -19191,12 +19191,12 @@ BI.prepares.push(function () {
});
BI.Plugin.registerWidget("bi.float_center_adapt", function (ob) {
if (!BI.isIE() && isSupportFlex()) {
// 有滚动条的情况下需要用到flex_wrapper_center布局
// 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局
return BI.extend({}, ob, {type: "bi.flex_wrapper_center"});
// 不是IE用flex_scrollable_center_adapt布局
return BI.extend({}, ob, {type: "bi.flex_scrollable_center_adapt"});
}
return BI.extend(ob, {type: "bi.flex_center"});
return BI.extend(ob, {type: "bi.flex_center_adapt"});
}
return BI.extend(ob, {type: "bi.inline_center_adapt"});
});
@ -31302,7 +31302,7 @@ BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
BI.FlexCenterLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-center-layout"
baseCls: "bi-flex-center-adapt-layout"
});
},
render: function () {
@ -31318,7 +31318,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_center布局不需要resize");
// console.log("flex_center_adapt布局不需要resize");
},
populate: function (items) {
@ -31326,7 +31326,60 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
this._mount();
}
});
BI.shortcut("bi.flex_center", BI.FlexCenterLayout);/**
BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout);/**
* Created by GUY on 2016/12/2.
*
* @class BI.FlexHorizontalCenter
* @extends BI.Layout
*/
BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-center-adapt-layout",
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrolly: false,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.flex_vertical",
ref: function (_ref) {
self.wrapper = _ref;
},
horizontalAlign: BI.HorizontalAlign.Center,
verticalAlign: o.verticalAlign,
rowSize: o.rowSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
resize: function () {
// console.log("flex_vertical_center_adapt布局不需要resize");
},
populate: function (items) {
self.populate(items);
}
});
BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);
BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
@ -31338,6 +31391,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-layout",
verticalAlign: BI.VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Left,// 如果只有一个子元素且想让该子元素横向撑满,设置成Stretch
columnSize: [],
scrollx: true,
hgap: 0,
@ -31351,14 +31405,23 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
render: function () {
BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.element.addClass(o.verticalAlign);
this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative", "flex-shrink": "0"});
w.element.css({
position: "relative",
"flex-shrink": "0"
});
if (o.columnSize[i] > 0) {
w.element.width(o.columnSize[i]);
}
if (o.columnSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
@ -31366,7 +31429,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
}
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"
"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) {
@ -31401,9 +31464,10 @@ BI.shortcut("bi.flex_horizontal", BI.FlexHorizontalLayout);/**
BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-vertical-center",
baseCls: "bi-flex-vertical-center-adapt-layout",
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
scrollx: false,
hgap: 0,
vgap: 0,
lgap: 0,
@ -31413,24 +31477,87 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
var self = this, o = this.options;
return {
type: "bi.flex_horizontal",
ref: function (_ref) {
self.wrapper = _ref;
},
verticalAlign: BI.VerticalAlign.Middle,
horizontalAlign: o.horizontalAlign,
columnSize: o.columnSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
resize: function () {
// console.log("flex_vertical_center_adapt布局不需要resize");
},
populate: function (items) {
self.populate(items);
}
});
BI.shortcut("bi.flex_vertical_adapt", BI.FlexVerticalCenter);
BI.shortcut("bi.flex_vertical_center_adapt", BI.FlexVerticalCenter);/**
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalLayout
* @extends BI.Layout
*/
BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-vertical-layout",
horizontalAlign: BI.HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.element.addClass(o.horizontalAlign);
this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var w = BI.FlexVerticalLayout.superclass._addElement.apply(this, arguments);
var o = this.options;
var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative", "flex-shrink": "0"});
w.element.css({
position: "relative",
"flex-shrink": "0"
});
if (o.rowSize[i] > 0) {
w.element.height(o.rowSize[i]);
}
if (o.rowSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
"margin-top": (i === 0 ? o.vgap : 0) + 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"
"margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@ -31447,15 +31574,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_vertical_center布局不需要resize");
// console.log("flex_vertical布局不需要resize");
},
populate: function (items) {
BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
BI.FlexVerticalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
BI.shortcut("bi.flex_vertical", BI.FlexVerticalLayout);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
@ -31465,12 +31592,12 @@ BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
BI.FlexCenterLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-center-layout clearfix"
baseCls: "bi-flex-scrollable-center-layout clearfix"
});
},
render: function () {
BI.FlexCenterLayout.superclass.render.apply(this, arguments);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-center-adapt-layout-wrapper");
this.populate(this.options.items);
},
@ -31491,7 +31618,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_center布局不需要resize");
// console.log("flex_center_adapt布局不需要resize");
},
populate: function (items) {
@ -31499,20 +31626,73 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_center", BI.FlexCenterLayout);/**
BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexCenterLayout);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalCenter
* @extends BI.Layout
*/
BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexWrapperHorizontalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrollable: null,
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.flex_scrollable_vertical",
ref: function (_ref) {
self.wrapper = _ref;
},
horizontalAlign: BI.HorizontalAlign.Center,
verticalAlign: o.verticalAlign,
rowSize: o.rowSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
populate: function (items) {
this.wrapper.populate(items);
}
});
BI.shortcut("bi.flex_scrollable_horizontal_adapt", BI.FlexWrapperHorizontalCenter);
BI.shortcut("bi.flex_scrollable_horizontal_center_adapt", BI.FlexWrapperHorizontalCenter);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexHorizontalLayout
* @extends BI.Layout
*/
BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-horizontal-layout clearfix",
verticalAlign: BI.VerticalAlign.Middle,
return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-horizontal-layout clearfix",
verticalAlign: BI.VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
// scrollable: true,
scrollable: null,
scrollx: true,
hgap: 0,
vgap: 0,
lgap: 0,
@ -31522,16 +31702,22 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-horizontal-layout-wrapper v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
var w = BI.FlexWrapperHorizontalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative"});
if (o.columnSize[i] > 0) {
w.element.width(o.columnSize[i]);
}
if (o.columnSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
@ -31539,7 +31725,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
}
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"
"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) {
@ -31565,28 +31751,28 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_horizontal布局不需要resize");
// console.log("flex_wrapper_horizontal布局不需要resize");
},
populate: function (items) {
BI.FlexHorizontalLayout.superclass.populate.apply(this, arguments);
BI.FlexWrapperHorizontalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_horizontal", BI.FlexHorizontalLayout);/**
BI.shortcut("bi.flex_scrollable_horizontal", BI.FlexWrapperHorizontalLayout);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalCenter
* @extends BI.Layout
*/
BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-vertical-center clearfix",
horizontalAlign: BI.HorizontalAlign.Middle,
return BI.extend(BI.FlexWrapperVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
// scrollable: true,
scrollx: true,
hgap: 0,
vgap: 0,
lgap: 0,
@ -31596,24 +31782,82 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
var self = this, o = this.options;
return {
type: "bi.flex_scrollable_horizontal",
ref: function (_ref) {
self.wrapper = _ref;
},
verticalAlign: BI.VerticalAlign.Middle,
horizontalAlign: o.horizontalAlign,
columnSize: o.columnSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
populate: function (items) {
this.wrapper.populate(items);
}
});
BI.shortcut("bi.flex_scrollable_vertical_adapt", BI.FlexWrapperVerticalCenter);
BI.shortcut("bi.flex_scrollable_vertical_center_adapt", BI.FlexWrapperVerticalCenter);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexWrapperVerticalLayout
* @extends BI.Layout
*/
BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-layout clearfix",
horizontalAlign: BI.HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrollable: null,
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-vertical-layout-scrollable h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
var w = BI.FlexWrapperVerticalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative"});
if (o.rowSize[i] > 0) {
w.element.height(o.rowSize[i]);
}
if (o.rowSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
"margin-top": (i === 0 ? o.vgap : 0) + 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"
"margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@ -31639,15 +31883,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_vertical_center布局不需要resize");
// console.log("flex_wrapper_vertical布局不需要resize");
},
populate: function (items) {
BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
BI.FlexWrapperVerticalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_vertical_center", BI.FlexVerticalCenter);/**
BI.shortcut("bi.flex_scrollable_vertical", BI.FlexWrapperVerticalLayout);/**
* 固定子组件上下左右的布局容器
* @class BI.AbsoluteLayout
* @extends BI.Layout

243
dist/core_without_normalize.css vendored

@ -1311,7 +1311,7 @@ textarea {
box-sizing: content-box;
/*W3C标准(IE9+,Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
}
.bi-flex-center-layout {
.bi-flex-center-adapt-layout {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -1400,7 +1400,7 @@ textarea {
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.bi-flex-horizontal-layout.middle {
.bi-flex-horizontal-layout.v-middle {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -1411,7 +1411,7 @@ textarea {
-o-align-items: center;
align-items: center;
}
.bi-flex-horizontal-layout.bottom {
.bi-flex-horizontal-layout.v-bottom {
/* 09版 */
-webkit-box-align: flex-end;
/* 12版 */
@ -1422,8 +1422,47 @@ textarea {
-o-align-items: flex-end;
align-items: flex-end;
}
.bi-flex-horizontal-layout.v-stretch {
/* 09版 */
-webkit-box-align: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-horizontal-layout.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 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: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-vertical-center {
.bi-flex-vertical-layout {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -1437,13 +1476,13 @@ textarea {
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
/* 09版 */
-webkit-box-orient: horizontal;
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 09版 */
-webkit-box-pack: flex-start;
/* 12版 */
@ -1453,6 +1492,25 @@ textarea {
-o-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
/* 09版 */
-webkit-box-align: start;
/* 12版 */
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-ms-flex-align: start;
-o-align-items: flex-start;
align-items: flex-start;
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.bi-flex-vertical-layout.h-center {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -1462,24 +1520,38 @@ textarea {
-ms-flex-align: center;
-o-align-items: center;
align-items: center;
}
.bi-flex-vertical-layout.h-right {
/* 09版 */
/*-webkit-box-lines: multiple;*/
-webkit-box-align: flex-end;
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-align-items: flex-end;
-moz-align-items: flex-end;
-ms-align-items: flex-end;
-ms-flex-align: end;
-o-align-items: flex-end;
align-items: flex-end;
}
.bi-flex-vertical-center.stretch {
.bi-flex-vertical-layout.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
-webkit-box-align: stretch;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-vertical-layout.v-stretch {
/* 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版 */
@ -1500,7 +1572,7 @@ textarea {
align-items: stretch;
}
.bi-flex-wrapper-center-layout .flex-wrapper-center-layout-wrapper {
.bi-flex-scrollable-center-adapt-layout .flex-scrollable-center-adapt-layout-wrapper {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -1544,7 +1616,7 @@ textarea {
float: left;
}
.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper {
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -1593,7 +1665,7 @@ textarea {
flex-wrap: nowrap;
min-height: 100%;
}
.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper.middle {
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-middle {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -1603,7 +1675,7 @@ textarea {
-o-align-items: center;
align-items: center;
}
.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper.bottom {
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-bottom {
/* 09版 */
-webkit-box-align: flex-end;
/* 12版 */
@ -1613,8 +1685,46 @@ textarea {
-o-align-items: flex-end;
align-items: flex-end;
}
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-stretch {
/* 09版 */
-webkit-box-align: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 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: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper {
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -1628,13 +1738,13 @@ textarea {
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
/* 09版 */
-webkit-box-orient: horizontal;
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 09版 */
-webkit-box-pack: flex-start;
/* 12版 */
@ -1644,6 +1754,26 @@ textarea {
-ms-flex-pack: start;
-o-justify-content: flex-start;
justify-content: flex-start;
/* 09版 */
-webkit-box-align: flex-start;
/* 12版 */
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-ms-flex-align: start;
-o-align-items: flex-start;
align-items: flex-start;
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
min-width: 100%;
}
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-center {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -1653,33 +1783,45 @@ textarea {
-ms-flex-align: center;
-o-align-items: center;
align-items: center;
}
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-right {
/* 09版 */
/*-webkit-box-lines: multiple;*/
-webkit-box-align: flex-end;
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
min-height: 100%;
float: left;
-webkit-align-items: flex-end;
-moz-align-items: flex-end;
-ms-align-items: flex-end;
-ms-flex-align: end;
-o-align-items: flex-end;
align-items: flex-end;
}
.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper.stretch {
width: 100%;
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
-webkit-box-align: stretch;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.v-stretch {
/* 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版 */
@ -1688,6 +1830,7 @@ textarea {
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}

243
dist/fineui.css vendored

@ -1592,7 +1592,7 @@ textarea {
box-sizing: content-box;
/*W3C标准(IE9+,Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
}
.bi-flex-center-layout {
.bi-flex-center-adapt-layout {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -1681,7 +1681,7 @@ textarea {
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.bi-flex-horizontal-layout.middle {
.bi-flex-horizontal-layout.v-middle {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -1692,7 +1692,7 @@ textarea {
-o-align-items: center;
align-items: center;
}
.bi-flex-horizontal-layout.bottom {
.bi-flex-horizontal-layout.v-bottom {
/* 09版 */
-webkit-box-align: flex-end;
/* 12版 */
@ -1703,8 +1703,47 @@ textarea {
-o-align-items: flex-end;
align-items: flex-end;
}
.bi-flex-horizontal-layout.v-stretch {
/* 09版 */
-webkit-box-align: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-horizontal-layout.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 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: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-vertical-center {
.bi-flex-vertical-layout {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -1718,13 +1757,13 @@ textarea {
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
/* 09版 */
-webkit-box-orient: horizontal;
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 09版 */
-webkit-box-pack: flex-start;
/* 12版 */
@ -1734,6 +1773,25 @@ textarea {
-o-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
/* 09版 */
-webkit-box-align: start;
/* 12版 */
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-ms-flex-align: start;
-o-align-items: flex-start;
align-items: flex-start;
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.bi-flex-vertical-layout.h-center {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -1743,24 +1801,38 @@ textarea {
-ms-flex-align: center;
-o-align-items: center;
align-items: center;
}
.bi-flex-vertical-layout.h-right {
/* 09版 */
/*-webkit-box-lines: multiple;*/
-webkit-box-align: flex-end;
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-align-items: flex-end;
-moz-align-items: flex-end;
-ms-align-items: flex-end;
-ms-flex-align: end;
-o-align-items: flex-end;
align-items: flex-end;
}
.bi-flex-vertical-center.stretch {
.bi-flex-vertical-layout.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
-webkit-box-align: stretch;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-vertical-layout.v-stretch {
/* 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版 */
@ -1781,7 +1853,7 @@ textarea {
align-items: stretch;
}
.bi-flex-wrapper-center-layout .flex-wrapper-center-layout-wrapper {
.bi-flex-scrollable-center-adapt-layout .flex-scrollable-center-adapt-layout-wrapper {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -1825,7 +1897,7 @@ textarea {
float: left;
}
.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper {
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -1874,7 +1946,7 @@ textarea {
flex-wrap: nowrap;
min-height: 100%;
}
.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper.middle {
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-middle {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -1884,7 +1956,7 @@ textarea {
-o-align-items: center;
align-items: center;
}
.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper.bottom {
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-bottom {
/* 09版 */
-webkit-box-align: flex-end;
/* 12版 */
@ -1894,8 +1966,46 @@ textarea {
-o-align-items: flex-end;
align-items: flex-end;
}
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-stretch {
/* 09版 */
-webkit-box-align: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 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: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper {
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -1909,13 +2019,13 @@ textarea {
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
/* 09版 */
-webkit-box-orient: horizontal;
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 09版 */
-webkit-box-pack: flex-start;
/* 12版 */
@ -1925,6 +2035,26 @@ textarea {
-ms-flex-pack: start;
-o-justify-content: flex-start;
justify-content: flex-start;
/* 09版 */
-webkit-box-align: flex-start;
/* 12版 */
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-ms-flex-align: start;
-o-align-items: flex-start;
align-items: flex-start;
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
min-width: 100%;
}
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-center {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -1934,33 +2064,45 @@ textarea {
-ms-flex-align: center;
-o-align-items: center;
align-items: center;
}
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-right {
/* 09版 */
/*-webkit-box-lines: multiple;*/
-webkit-box-align: flex-end;
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
min-height: 100%;
float: left;
-webkit-align-items: flex-end;
-moz-align-items: flex-end;
-ms-align-items: flex-end;
-ms-flex-align: end;
-o-align-items: flex-end;
align-items: flex-end;
}
.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper.stretch {
width: 100%;
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
-webkit-box-align: stretch;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.v-stretch {
/* 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版 */
@ -1969,6 +2111,7 @@ textarea {
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}

358
dist/fineui.ie.js vendored

@ -19403,12 +19403,12 @@ BI.prepares.push(function () {
BI.Plugin.registerWidget("bi.center_adapt", function (ob) {
var isIE = BI.isIE(), supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
if (!isIE && supportFlex && justOneItem) {
// 有滚动条的情况下需要用到flex_wrapper_center布局
// 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局
return BI.extend(ob, {type: "bi.flex_wrapper_center"});
// 不是IE用flex_scrollable_center_adapt布局
return BI.extend(ob, {type: "bi.flex_scrollable_center_adapt"});
}
return BI.extend(ob, {type: "bi.flex_center"});
return BI.extend(ob, {type: "bi.flex_center_adapt"});
}
// 一个item的情况下inline布局睥睨天下
if(justOneItem) {
@ -19419,12 +19419,12 @@ BI.prepares.push(function () {
BI.Plugin.registerWidget("bi.vertical_adapt", function (ob) {
var isIE = BI.isIE(), supportFlex = isSupportFlex();
if (!isIE && supportFlex) {
// 有滚动条的情况下需要用到flex_wrapper_center布局
// 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局
return BI.extend({}, ob, {type: "bi.flex_wrapper_vertical_center"});
// 不是IE用flex__scrollable_center_adapt布局
return BI.extend({}, ob, {type: "bi.flex_scrollable_vertical_center_adapt"});
}
return BI.extend(ob, {type: "bi.flex_vertical_center"});
return BI.extend(ob, {type: "bi.flex_vertical_center_adapt"});
}
return BI.extend(ob, {type: "bi.inline_vertical_adapt"});
});
@ -19436,12 +19436,12 @@ BI.prepares.push(function () {
});
BI.Plugin.registerWidget("bi.float_center_adapt", function (ob) {
if (!BI.isIE() && isSupportFlex()) {
// 有滚动条的情况下需要用到flex_wrapper_center布局
// 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局
return BI.extend({}, ob, {type: "bi.flex_wrapper_center"});
// 不是IE用flex_scrollable_center_adapt布局
return BI.extend({}, ob, {type: "bi.flex_scrollable_center_adapt"});
}
return BI.extend(ob, {type: "bi.flex_center"});
return BI.extend(ob, {type: "bi.flex_center_adapt"});
}
return BI.extend(ob, {type: "bi.inline_center_adapt"});
});
@ -31547,7 +31547,7 @@ BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
BI.FlexCenterLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-center-layout"
baseCls: "bi-flex-center-adapt-layout"
});
},
render: function () {
@ -31563,7 +31563,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_center布局不需要resize");
// console.log("flex_center_adapt布局不需要resize");
},
populate: function (items) {
@ -31571,7 +31571,60 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
this._mount();
}
});
BI.shortcut("bi.flex_center", BI.FlexCenterLayout);/**
BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout);/**
* Created by GUY on 2016/12/2.
*
* @class BI.FlexHorizontalCenter
* @extends BI.Layout
*/
BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-center-adapt-layout",
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrolly: false,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.flex_vertical",
ref: function (_ref) {
self.wrapper = _ref;
},
horizontalAlign: BI.HorizontalAlign.Center,
verticalAlign: o.verticalAlign,
rowSize: o.rowSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
resize: function () {
// console.log("flex_vertical_center_adapt布局不需要resize");
},
populate: function (items) {
self.populate(items);
}
});
BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);
BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
@ -31583,6 +31636,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-layout",
verticalAlign: BI.VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Left,// 如果只有一个子元素且想让该子元素横向撑满,设置成Stretch
columnSize: [],
scrollx: true,
hgap: 0,
@ -31596,14 +31650,23 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
render: function () {
BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.element.addClass(o.verticalAlign);
this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative", "flex-shrink": "0"});
w.element.css({
position: "relative",
"flex-shrink": "0"
});
if (o.columnSize[i] > 0) {
w.element.width(o.columnSize[i]);
}
if (o.columnSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
@ -31611,7 +31674,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
}
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"
"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) {
@ -31646,9 +31709,10 @@ BI.shortcut("bi.flex_horizontal", BI.FlexHorizontalLayout);/**
BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-vertical-center",
baseCls: "bi-flex-vertical-center-adapt-layout",
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
scrollx: false,
hgap: 0,
vgap: 0,
lgap: 0,
@ -31658,24 +31722,87 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
var self = this, o = this.options;
return {
type: "bi.flex_horizontal",
ref: function (_ref) {
self.wrapper = _ref;
},
verticalAlign: BI.VerticalAlign.Middle,
horizontalAlign: o.horizontalAlign,
columnSize: o.columnSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
resize: function () {
// console.log("flex_vertical_center_adapt布局不需要resize");
},
populate: function (items) {
self.populate(items);
}
});
BI.shortcut("bi.flex_vertical_adapt", BI.FlexVerticalCenter);
BI.shortcut("bi.flex_vertical_center_adapt", BI.FlexVerticalCenter);/**
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalLayout
* @extends BI.Layout
*/
BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-vertical-layout",
horizontalAlign: BI.HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.element.addClass(o.horizontalAlign);
this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var w = BI.FlexVerticalLayout.superclass._addElement.apply(this, arguments);
var o = this.options;
var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative", "flex-shrink": "0"});
w.element.css({
position: "relative",
"flex-shrink": "0"
});
if (o.rowSize[i] > 0) {
w.element.height(o.rowSize[i]);
}
if (o.rowSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
"margin-top": (i === 0 ? o.vgap : 0) + 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"
"margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@ -31692,15 +31819,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_vertical_center布局不需要resize");
// console.log("flex_vertical布局不需要resize");
},
populate: function (items) {
BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
BI.FlexVerticalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
BI.shortcut("bi.flex_vertical", BI.FlexVerticalLayout);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
@ -31710,12 +31837,12 @@ BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
BI.FlexCenterLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-center-layout clearfix"
baseCls: "bi-flex-scrollable-center-layout clearfix"
});
},
render: function () {
BI.FlexCenterLayout.superclass.render.apply(this, arguments);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-center-adapt-layout-wrapper");
this.populate(this.options.items);
},
@ -31736,7 +31863,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_center布局不需要resize");
// console.log("flex_center_adapt布局不需要resize");
},
populate: function (items) {
@ -31744,20 +31871,73 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_center", BI.FlexCenterLayout);/**
BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexCenterLayout);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalCenter
* @extends BI.Layout
*/
BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexWrapperHorizontalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrollable: null,
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.flex_scrollable_vertical",
ref: function (_ref) {
self.wrapper = _ref;
},
horizontalAlign: BI.HorizontalAlign.Center,
verticalAlign: o.verticalAlign,
rowSize: o.rowSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
populate: function (items) {
this.wrapper.populate(items);
}
});
BI.shortcut("bi.flex_scrollable_horizontal_adapt", BI.FlexWrapperHorizontalCenter);
BI.shortcut("bi.flex_scrollable_horizontal_center_adapt", BI.FlexWrapperHorizontalCenter);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexHorizontalLayout
* @extends BI.Layout
*/
BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-horizontal-layout clearfix",
verticalAlign: BI.VerticalAlign.Middle,
return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-horizontal-layout clearfix",
verticalAlign: BI.VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
// scrollable: true,
scrollable: null,
scrollx: true,
hgap: 0,
vgap: 0,
lgap: 0,
@ -31767,16 +31947,22 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-horizontal-layout-wrapper v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
var w = BI.FlexWrapperHorizontalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative"});
if (o.columnSize[i] > 0) {
w.element.width(o.columnSize[i]);
}
if (o.columnSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
@ -31784,7 +31970,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
}
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"
"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) {
@ -31810,28 +31996,80 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_horizontal布局不需要resize");
// console.log("flex_wrapper_horizontal布局不需要resize");
},
populate: function (items) {
BI.FlexHorizontalLayout.superclass.populate.apply(this, arguments);
BI.FlexWrapperHorizontalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_horizontal", BI.FlexHorizontalLayout);/**
BI.shortcut("bi.flex_scrollable_horizontal", BI.FlexWrapperHorizontalLayout);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalCenter
* @extends BI.Layout
*/
BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-vertical-center clearfix",
horizontalAlign: BI.HorizontalAlign.Middle,
return BI.extend(BI.FlexWrapperVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
// scrollable: true,
scrollx: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.flex_scrollable_horizontal",
ref: function (_ref) {
self.wrapper = _ref;
},
verticalAlign: BI.VerticalAlign.Middle,
horizontalAlign: o.horizontalAlign,
columnSize: o.columnSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
populate: function (items) {
this.wrapper.populate(items);
}
});
BI.shortcut("bi.flex_scrollable_vertical_adapt", BI.FlexWrapperVerticalCenter);
BI.shortcut("bi.flex_scrollable_vertical_center_adapt", BI.FlexWrapperVerticalCenter);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexWrapperVerticalLayout
* @extends BI.Layout
*/
BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-layout clearfix",
horizontalAlign: BI.HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrollable: null,
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
@ -31841,24 +32079,30 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-vertical-layout-scrollable h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
var w = BI.FlexWrapperVerticalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative"});
if (o.rowSize[i] > 0) {
w.element.height(o.rowSize[i]);
}
if (o.rowSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
"margin-top": (i === 0 ? o.vgap : 0) + 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"
"margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@ -31884,15 +32128,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_vertical_center布局不需要resize");
// console.log("flex_wrapper_vertical布局不需要resize");
},
populate: function (items) {
BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
BI.FlexWrapperVerticalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_vertical_center", BI.FlexVerticalCenter);/**
BI.shortcut("bi.flex_scrollable_vertical", BI.FlexWrapperVerticalLayout);/**
* 固定子组件上下左右的布局容器
* @class BI.AbsoluteLayout
* @extends BI.Layout

358
dist/fineui.js vendored

@ -19403,12 +19403,12 @@ BI.prepares.push(function () {
BI.Plugin.registerWidget("bi.center_adapt", function (ob) {
var isIE = BI.isIE(), supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
if (!isIE && supportFlex && justOneItem) {
// 有滚动条的情况下需要用到flex_wrapper_center布局
// 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局
return BI.extend(ob, {type: "bi.flex_wrapper_center"});
// 不是IE用flex_scrollable_center_adapt布局
return BI.extend(ob, {type: "bi.flex_scrollable_center_adapt"});
}
return BI.extend(ob, {type: "bi.flex_center"});
return BI.extend(ob, {type: "bi.flex_center_adapt"});
}
// 一个item的情况下inline布局睥睨天下
if(justOneItem) {
@ -19419,12 +19419,12 @@ BI.prepares.push(function () {
BI.Plugin.registerWidget("bi.vertical_adapt", function (ob) {
var isIE = BI.isIE(), supportFlex = isSupportFlex();
if (!isIE && supportFlex) {
// 有滚动条的情况下需要用到flex_wrapper_center布局
// 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局
return BI.extend({}, ob, {type: "bi.flex_wrapper_vertical_center"});
// 不是IE用flex__scrollable_center_adapt布局
return BI.extend({}, ob, {type: "bi.flex_scrollable_vertical_center_adapt"});
}
return BI.extend(ob, {type: "bi.flex_vertical_center"});
return BI.extend(ob, {type: "bi.flex_vertical_center_adapt"});
}
return BI.extend(ob, {type: "bi.inline_vertical_adapt"});
});
@ -19436,12 +19436,12 @@ BI.prepares.push(function () {
});
BI.Plugin.registerWidget("bi.float_center_adapt", function (ob) {
if (!BI.isIE() && isSupportFlex()) {
// 有滚动条的情况下需要用到flex_wrapper_center布局
// 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局
return BI.extend({}, ob, {type: "bi.flex_wrapper_center"});
// 不是IE用flex_scrollable_center_adapt布局
return BI.extend({}, ob, {type: "bi.flex_scrollable_center_adapt"});
}
return BI.extend(ob, {type: "bi.flex_center"});
return BI.extend(ob, {type: "bi.flex_center_adapt"});
}
return BI.extend(ob, {type: "bi.inline_center_adapt"});
});
@ -31547,7 +31547,7 @@ BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
BI.FlexCenterLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-center-layout"
baseCls: "bi-flex-center-adapt-layout"
});
},
render: function () {
@ -31563,7 +31563,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_center布局不需要resize");
// console.log("flex_center_adapt布局不需要resize");
},
populate: function (items) {
@ -31571,7 +31571,60 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
this._mount();
}
});
BI.shortcut("bi.flex_center", BI.FlexCenterLayout);/**
BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout);/**
* Created by GUY on 2016/12/2.
*
* @class BI.FlexHorizontalCenter
* @extends BI.Layout
*/
BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-center-adapt-layout",
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrolly: false,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.flex_vertical",
ref: function (_ref) {
self.wrapper = _ref;
},
horizontalAlign: BI.HorizontalAlign.Center,
verticalAlign: o.verticalAlign,
rowSize: o.rowSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
resize: function () {
// console.log("flex_vertical_center_adapt布局不需要resize");
},
populate: function (items) {
self.populate(items);
}
});
BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);
BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
@ -31583,6 +31636,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-layout",
verticalAlign: BI.VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Left,// 如果只有一个子元素且想让该子元素横向撑满,设置成Stretch
columnSize: [],
scrollx: true,
hgap: 0,
@ -31596,14 +31650,23 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
render: function () {
BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.element.addClass(o.verticalAlign);
this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative", "flex-shrink": "0"});
w.element.css({
position: "relative",
"flex-shrink": "0"
});
if (o.columnSize[i] > 0) {
w.element.width(o.columnSize[i]);
}
if (o.columnSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
@ -31611,7 +31674,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
}
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"
"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) {
@ -31646,9 +31709,10 @@ BI.shortcut("bi.flex_horizontal", BI.FlexHorizontalLayout);/**
BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-vertical-center",
baseCls: "bi-flex-vertical-center-adapt-layout",
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
scrollx: false,
hgap: 0,
vgap: 0,
lgap: 0,
@ -31658,24 +31722,87 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
var self = this, o = this.options;
return {
type: "bi.flex_horizontal",
ref: function (_ref) {
self.wrapper = _ref;
},
verticalAlign: BI.VerticalAlign.Middle,
horizontalAlign: o.horizontalAlign,
columnSize: o.columnSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
resize: function () {
// console.log("flex_vertical_center_adapt布局不需要resize");
},
populate: function (items) {
self.populate(items);
}
});
BI.shortcut("bi.flex_vertical_adapt", BI.FlexVerticalCenter);
BI.shortcut("bi.flex_vertical_center_adapt", BI.FlexVerticalCenter);/**
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalLayout
* @extends BI.Layout
*/
BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-vertical-layout",
horizontalAlign: BI.HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.element.addClass(o.horizontalAlign);
this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var w = BI.FlexVerticalLayout.superclass._addElement.apply(this, arguments);
var o = this.options;
var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative", "flex-shrink": "0"});
w.element.css({
position: "relative",
"flex-shrink": "0"
});
if (o.rowSize[i] > 0) {
w.element.height(o.rowSize[i]);
}
if (o.rowSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
"margin-top": (i === 0 ? o.vgap : 0) + 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"
"margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@ -31692,15 +31819,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_vertical_center布局不需要resize");
// console.log("flex_vertical布局不需要resize");
},
populate: function (items) {
BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
BI.FlexVerticalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
BI.shortcut("bi.flex_vertical", BI.FlexVerticalLayout);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
@ -31710,12 +31837,12 @@ BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
BI.FlexCenterLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-center-layout clearfix"
baseCls: "bi-flex-scrollable-center-layout clearfix"
});
},
render: function () {
BI.FlexCenterLayout.superclass.render.apply(this, arguments);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-center-adapt-layout-wrapper");
this.populate(this.options.items);
},
@ -31736,7 +31863,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_center布局不需要resize");
// console.log("flex_center_adapt布局不需要resize");
},
populate: function (items) {
@ -31744,20 +31871,73 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_center", BI.FlexCenterLayout);/**
BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexCenterLayout);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalCenter
* @extends BI.Layout
*/
BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexWrapperHorizontalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrollable: null,
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.flex_scrollable_vertical",
ref: function (_ref) {
self.wrapper = _ref;
},
horizontalAlign: BI.HorizontalAlign.Center,
verticalAlign: o.verticalAlign,
rowSize: o.rowSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
populate: function (items) {
this.wrapper.populate(items);
}
});
BI.shortcut("bi.flex_scrollable_horizontal_adapt", BI.FlexWrapperHorizontalCenter);
BI.shortcut("bi.flex_scrollable_horizontal_center_adapt", BI.FlexWrapperHorizontalCenter);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexHorizontalLayout
* @extends BI.Layout
*/
BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-horizontal-layout clearfix",
verticalAlign: BI.VerticalAlign.Middle,
return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-horizontal-layout clearfix",
verticalAlign: BI.VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
// scrollable: true,
scrollable: null,
scrollx: true,
hgap: 0,
vgap: 0,
lgap: 0,
@ -31767,16 +31947,22 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-horizontal-layout-wrapper v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
var w = BI.FlexWrapperHorizontalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative"});
if (o.columnSize[i] > 0) {
w.element.width(o.columnSize[i]);
}
if (o.columnSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
@ -31784,7 +31970,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
}
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"
"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) {
@ -31810,28 +31996,80 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_horizontal布局不需要resize");
// console.log("flex_wrapper_horizontal布局不需要resize");
},
populate: function (items) {
BI.FlexHorizontalLayout.superclass.populate.apply(this, arguments);
BI.FlexWrapperHorizontalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_horizontal", BI.FlexHorizontalLayout);/**
BI.shortcut("bi.flex_scrollable_horizontal", BI.FlexWrapperHorizontalLayout);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalCenter
* @extends BI.Layout
*/
BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-vertical-center clearfix",
horizontalAlign: BI.HorizontalAlign.Middle,
return BI.extend(BI.FlexWrapperVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
// scrollable: true,
scrollx: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.flex_scrollable_horizontal",
ref: function (_ref) {
self.wrapper = _ref;
},
verticalAlign: BI.VerticalAlign.Middle,
horizontalAlign: o.horizontalAlign,
columnSize: o.columnSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
populate: function (items) {
this.wrapper.populate(items);
}
});
BI.shortcut("bi.flex_scrollable_vertical_adapt", BI.FlexWrapperVerticalCenter);
BI.shortcut("bi.flex_scrollable_vertical_center_adapt", BI.FlexWrapperVerticalCenter);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexWrapperVerticalLayout
* @extends BI.Layout
*/
BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-layout clearfix",
horizontalAlign: BI.HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrollable: null,
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
@ -31841,24 +32079,30 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-vertical-layout-scrollable h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
var w = BI.FlexWrapperVerticalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative"});
if (o.rowSize[i] > 0) {
w.element.height(o.rowSize[i]);
}
if (o.rowSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
"margin-top": (i === 0 ? o.vgap : 0) + 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"
"margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@ -31884,15 +32128,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_vertical_center布局不需要resize");
// console.log("flex_wrapper_vertical布局不需要resize");
},
populate: function (items) {
BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
BI.FlexWrapperVerticalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_vertical_center", BI.FlexVerticalCenter);/**
BI.shortcut("bi.flex_scrollable_vertical", BI.FlexWrapperVerticalLayout);/**
* 固定子组件上下左右的布局容器
* @class BI.AbsoluteLayout
* @extends BI.Layout

334
dist/fineui_without_jquery_polyfill.js vendored

@ -20228,7 +20228,7 @@ BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
BI.FlexCenterLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-center-layout"
baseCls: "bi-flex-center-adapt-layout"
});
},
render: function () {
@ -20244,7 +20244,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_center布局不需要resize");
// console.log("flex_center_adapt布局不需要resize");
},
populate: function (items) {
@ -20252,7 +20252,60 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
this._mount();
}
});
BI.shortcut("bi.flex_center", BI.FlexCenterLayout);/**
BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout);/**
* Created by GUY on 2016/12/2.
*
* @class BI.FlexHorizontalCenter
* @extends BI.Layout
*/
BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-center-adapt-layout",
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrolly: false,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.flex_vertical",
ref: function (_ref) {
self.wrapper = _ref;
},
horizontalAlign: BI.HorizontalAlign.Center,
verticalAlign: o.verticalAlign,
rowSize: o.rowSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
resize: function () {
// console.log("flex_vertical_center_adapt布局不需要resize");
},
populate: function (items) {
self.populate(items);
}
});
BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);
BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
@ -20264,6 +20317,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-layout",
verticalAlign: BI.VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Left,// 如果只有一个子元素且想让该子元素横向撑满,设置成Stretch
columnSize: [],
scrollx: true,
hgap: 0,
@ -20277,14 +20331,23 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
render: function () {
BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.element.addClass(o.verticalAlign);
this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative", "flex-shrink": "0"});
w.element.css({
position: "relative",
"flex-shrink": "0"
});
if (o.columnSize[i] > 0) {
w.element.width(o.columnSize[i]);
}
if (o.columnSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
@ -20292,7 +20355,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
}
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"
"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) {
@ -20327,9 +20390,10 @@ BI.shortcut("bi.flex_horizontal", BI.FlexHorizontalLayout);/**
BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-vertical-center",
baseCls: "bi-flex-vertical-center-adapt-layout",
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
scrollx: false,
hgap: 0,
vgap: 0,
lgap: 0,
@ -20339,24 +20403,87 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
var self = this, o = this.options;
return {
type: "bi.flex_horizontal",
ref: function (_ref) {
self.wrapper = _ref;
},
verticalAlign: BI.VerticalAlign.Middle,
horizontalAlign: o.horizontalAlign,
columnSize: o.columnSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
resize: function () {
// console.log("flex_vertical_center_adapt布局不需要resize");
},
populate: function (items) {
self.populate(items);
}
});
BI.shortcut("bi.flex_vertical_adapt", BI.FlexVerticalCenter);
BI.shortcut("bi.flex_vertical_center_adapt", BI.FlexVerticalCenter);/**
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalLayout
* @extends BI.Layout
*/
BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-vertical-layout",
horizontalAlign: BI.HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.element.addClass(o.horizontalAlign);
this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var w = BI.FlexVerticalLayout.superclass._addElement.apply(this, arguments);
var o = this.options;
var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative", "flex-shrink": "0"});
w.element.css({
position: "relative",
"flex-shrink": "0"
});
if (o.rowSize[i] > 0) {
w.element.height(o.rowSize[i]);
}
if (o.rowSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
"margin-top": (i === 0 ? o.vgap : 0) + 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"
"margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@ -20373,15 +20500,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_vertical_center布局不需要resize");
// console.log("flex_vertical布局不需要resize");
},
populate: function (items) {
BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
BI.FlexVerticalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
BI.shortcut("bi.flex_vertical", BI.FlexVerticalLayout);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
@ -20391,12 +20518,12 @@ BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);/**
BI.FlexCenterLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-center-layout clearfix"
baseCls: "bi-flex-scrollable-center-layout clearfix"
});
},
render: function () {
BI.FlexCenterLayout.superclass.render.apply(this, arguments);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-center-adapt-layout-wrapper");
this.populate(this.options.items);
},
@ -20417,7 +20544,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_center布局不需要resize");
// console.log("flex_center_adapt布局不需要resize");
},
populate: function (items) {
@ -20425,20 +20552,73 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_center", BI.FlexCenterLayout);/**
BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexCenterLayout);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalCenter
* @extends BI.Layout
*/
BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexWrapperHorizontalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrollable: null,
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.flex_scrollable_vertical",
ref: function (_ref) {
self.wrapper = _ref;
},
horizontalAlign: BI.HorizontalAlign.Center,
verticalAlign: o.verticalAlign,
rowSize: o.rowSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
populate: function (items) {
this.wrapper.populate(items);
}
});
BI.shortcut("bi.flex_scrollable_horizontal_adapt", BI.FlexWrapperHorizontalCenter);
BI.shortcut("bi.flex_scrollable_horizontal_center_adapt", BI.FlexWrapperHorizontalCenter);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexHorizontalLayout
* @extends BI.Layout
*/
BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-horizontal-layout clearfix",
verticalAlign: BI.VerticalAlign.Middle,
return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-horizontal-layout clearfix",
verticalAlign: BI.VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
// scrollable: true,
scrollable: null,
scrollx: true,
hgap: 0,
vgap: 0,
lgap: 0,
@ -20448,16 +20628,22 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-horizontal-layout-wrapper v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
var w = BI.FlexWrapperHorizontalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative"});
if (o.columnSize[i] > 0) {
w.element.width(o.columnSize[i]);
}
if (o.columnSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
@ -20465,7 +20651,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
}
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"
"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) {
@ -20491,28 +20677,80 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_horizontal布局不需要resize");
// console.log("flex_wrapper_horizontal布局不需要resize");
},
populate: function (items) {
BI.FlexHorizontalLayout.superclass.populate.apply(this, arguments);
BI.FlexWrapperHorizontalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_horizontal", BI.FlexHorizontalLayout);/**
BI.shortcut("bi.flex_scrollable_horizontal", BI.FlexWrapperHorizontalLayout);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalCenter
* @extends BI.Layout
*/
BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-vertical-center clearfix",
horizontalAlign: BI.HorizontalAlign.Middle,
return BI.extend(BI.FlexWrapperVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
// scrollable: true,
scrollx: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.flex_scrollable_horizontal",
ref: function (_ref) {
self.wrapper = _ref;
},
verticalAlign: BI.VerticalAlign.Middle,
horizontalAlign: o.horizontalAlign,
columnSize: o.columnSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
populate: function (items) {
this.wrapper.populate(items);
}
});
BI.shortcut("bi.flex_scrollable_vertical_adapt", BI.FlexWrapperVerticalCenter);
BI.shortcut("bi.flex_scrollable_vertical_center_adapt", BI.FlexWrapperVerticalCenter);/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexWrapperVerticalLayout
* @extends BI.Layout
*/
BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-layout clearfix",
horizontalAlign: BI.HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrollable: null,
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
@ -20522,24 +20760,30 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-vertical-layout-scrollable h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
var w = BI.FlexWrapperVerticalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative"});
if (o.rowSize[i] > 0) {
w.element.height(o.rowSize[i]);
}
if (o.rowSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
"margin-top": (i === 0 ? o.vgap : 0) + 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"
"margin-left": o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) + "px"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
@ -20565,15 +20809,15 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_vertical_center布局不需要resize");
// console.log("flex_wrapper_vertical布局不需要resize");
},
populate: function (items) {
BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
BI.FlexWrapperVerticalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_vertical_center", BI.FlexVerticalCenter);/**
BI.shortcut("bi.flex_scrollable_vertical", BI.FlexWrapperVerticalLayout);/**
* 固定子组件上下左右的布局容器
* @class BI.AbsoluteLayout
* @extends BI.Layout

24
src/core/platform/web/config.js

@ -47,12 +47,12 @@ BI.prepares.push(function () {
BI.Plugin.registerWidget("bi.center_adapt", function (ob) {
var isIE = BI.isIE(), supportFlex = isSupportFlex(), justOneItem = (ob.items && ob.items.length <= 1);
if (!isIE && supportFlex && justOneItem) {
// 有滚动条的情况下需要用到flex_wrapper_center布局
// 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局
return BI.extend(ob, {type: "bi.flex_wrapper_center"});
// 不是IE用flex_scrollable_center_adapt布局
return BI.extend(ob, {type: "bi.flex_scrollable_center_adapt"});
}
return BI.extend(ob, {type: "bi.flex_center"});
return BI.extend(ob, {type: "bi.flex_center_adapt"});
}
// 一个item的情况下inline布局睥睨天下
if(justOneItem) {
@ -63,12 +63,12 @@ BI.prepares.push(function () {
BI.Plugin.registerWidget("bi.vertical_adapt", function (ob) {
var isIE = BI.isIE(), supportFlex = isSupportFlex();
if (!isIE && supportFlex) {
// 有滚动条的情况下需要用到flex_wrapper_center布局
// 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局
return BI.extend({}, ob, {type: "bi.flex_wrapper_vertical_center"});
// 不是IE用flex__scrollable_center_adapt布局
return BI.extend({}, ob, {type: "bi.flex_scrollable_vertical_center_adapt"});
}
return BI.extend(ob, {type: "bi.flex_vertical_center"});
return BI.extend(ob, {type: "bi.flex_vertical_center_adapt"});
}
return BI.extend(ob, {type: "bi.inline_vertical_adapt"});
});
@ -80,12 +80,12 @@ BI.prepares.push(function () {
});
BI.Plugin.registerWidget("bi.float_center_adapt", function (ob) {
if (!BI.isIE() && isSupportFlex()) {
// 有滚动条的情况下需要用到flex_wrapper_center布局
// 有滚动条的情况下需要用到flex_scrollable_center_adapt布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局
return BI.extend({}, ob, {type: "bi.flex_wrapper_center"});
// 不是IE用flex_scrollable_center_adapt布局
return BI.extend({}, ob, {type: "bi.flex_scrollable_center_adapt"});
}
return BI.extend(ob, {type: "bi.flex_center"});
return BI.extend(ob, {type: "bi.flex_center_adapt"});
}
return BI.extend(ob, {type: "bi.inline_center_adapt"});
});

6
src/core/wrapper/layout/flex/flex.center.js

@ -8,7 +8,7 @@
BI.FlexCenterLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-center-layout"
baseCls: "bi-flex-center-adapt-layout"
});
},
render: function () {
@ -24,7 +24,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_center布局不需要resize");
// console.log("flex_center_adapt布局不需要resize");
},
populate: function (items) {
@ -32,4 +32,4 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
this._mount();
}
});
BI.shortcut("bi.flex_center", BI.FlexCenterLayout);
BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout);

54
src/core/wrapper/layout/flex/flex.horizontal.center.js

@ -0,0 +1,54 @@
/**
* Created by GUY on 2016/12/2.
*
* @class BI.FlexHorizontalCenter
* @extends BI.Layout
*/
BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-center-adapt-layout",
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrolly: false,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.flex_vertical",
ref: function (_ref) {
self.wrapper = _ref;
},
horizontalAlign: BI.HorizontalAlign.Center,
verticalAlign: o.verticalAlign,
rowSize: o.rowSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
resize: function () {
// console.log("flex_vertical_center_adapt布局不需要resize");
},
populate: function (items) {
self.populate(items);
}
});
BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);
BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);

16
src/core/wrapper/layout/flex/flex.horizontal.js

@ -10,6 +10,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-layout",
verticalAlign: BI.VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Left,// 如果只有一个子元素且想让该子元素横向撑满,设置成Stretch
columnSize: [],
scrollx: true,
hgap: 0,
@ -23,14 +24,23 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
render: function () {
BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.element.addClass(o.verticalAlign);
this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative", "flex-shrink": "0"});
w.element.css({
position: "relative",
"flex-shrink": "0"
});
if (o.columnSize[i] > 0) {
w.element.width(o.columnSize[i]);
}
if (o.columnSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
@ -38,7 +48,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
}
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"
"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) {

62
src/core/wrapper/layout/flex/flex.vertical.center.js

@ -8,9 +8,10 @@
BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-vertical-center",
baseCls: "bi-flex-vertical-center-adapt-layout",
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
scrollx: false,
hgap: 0,
vgap: 0,
lgap: 0,
@ -20,46 +21,35 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
var o = this.options;
this.element.addClass(o.horizontalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative", "flex-shrink": "0"});
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;
var self = this, o = this.options;
return {
type: "bi.flex_horizontal",
ref: function (_ref) {
self.wrapper = _ref;
},
verticalAlign: BI.VerticalAlign.Middle,
horizontalAlign: o.horizontalAlign,
columnSize: o.columnSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
resize: function () {
// console.log("flex_vertical_center布局不需要resize");
// console.log("flex_vertical_center_adapt布局不需要resize");
},
populate: function (items) {
BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
this._mount();
self.populate(items);
}
});
BI.shortcut("bi.flex_vertical_center", BI.FlexVerticalCenter);
BI.shortcut("bi.flex_vertical_adapt", BI.FlexVerticalCenter);
BI.shortcut("bi.flex_vertical_center_adapt", BI.FlexVerticalCenter);

75
src/core/wrapper/layout/flex/flex.vertical.js

@ -0,0 +1,75 @@
/**
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalLayout
* @extends BI.Layout
*/
BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-vertical-layout",
horizontalAlign: BI.HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var w = BI.FlexVerticalLayout.superclass._addElement.apply(this, arguments);
var o = this.options;
w.element.css({
position: "relative",
"flex-shrink": "0"
});
if (o.rowSize[i] > 0) {
w.element.height(o.rowSize[i]);
}
if (o.rowSize[i] === "fill") {
w.element.css("flex", "1");
}
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
w.element.css({
"margin-top": (i === 0 ? o.vgap : 0) + 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": o.hgap + 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 () {
// console.log("flex_vertical布局不需要resize");
},
populate: function (items) {
BI.FlexVerticalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_vertical", BI.FlexVerticalLayout);

8
src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js

@ -8,12 +8,12 @@
BI.FlexCenterLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-center-layout clearfix"
baseCls: "bi-flex-scrollable-center-layout clearfix"
});
},
render: function () {
BI.FlexCenterLayout.superclass.render.apply(this, arguments);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-center-layout-wrapper");
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-center-adapt-layout-wrapper");
this.populate(this.options.items);
},
@ -34,7 +34,7 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_center布局不需要resize");
// console.log("flex_center_adapt布局不需要resize");
},
populate: function (items) {
@ -42,4 +42,4 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_center", BI.FlexCenterLayout);
BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexCenterLayout);

52
src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js

@ -0,0 +1,52 @@
/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexVerticalCenter
* @extends BI.Layout
*/
BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexWrapperHorizontalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrollable: null,
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.flex_scrollable_vertical",
ref: function (_ref) {
self.wrapper = _ref;
},
horizontalAlign: BI.HorizontalAlign.Center,
verticalAlign: o.verticalAlign,
rowSize: o.rowSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
populate: function (items) {
this.wrapper.populate(items);
}
});
BI.shortcut("bi.flex_scrollable_horizontal_adapt", BI.FlexWrapperHorizontalCenter);
BI.shortcut("bi.flex_scrollable_horizontal_center_adapt", BI.FlexWrapperHorizontalCenter);

32
src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js

@ -5,13 +5,15 @@
* @class BI.FlexHorizontalLayout
* @extends BI.Layout
*/
BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-horizontal-layout clearfix",
verticalAlign: BI.VerticalAlign.Middle,
return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-horizontal-layout clearfix",
verticalAlign: BI.VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
// scrollable: true,
scrollable: null,
scrollx: true,
hgap: 0,
vgap: 0,
lgap: 0,
@ -21,16 +23,22 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-horizontal-layout-wrapper " + o.verticalAlign);
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-horizontal-layout-wrapper v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments);
var w = BI.FlexWrapperHorizontalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative"});
if (o.columnSize[i] > 0) {
w.element.width(o.columnSize[i]);
}
if (o.columnSize[i] === "fill") {
w.element.css("flex", "1");
}
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"
@ -38,7 +46,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
}
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"
"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) {
@ -64,12 +72,12 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
},
resize: function () {
// console.log("flex_horizontal布局不需要resize");
// console.log("flex_wrapper_horizontal布局不需要resize");
},
populate: function (items) {
BI.FlexHorizontalLayout.superclass.populate.apply(this, arguments);
BI.FlexWrapperHorizontalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_wrapper_horizontal", BI.FlexHorizontalLayout);
BI.shortcut("bi.flex_scrollable_horizontal", BI.FlexWrapperHorizontalLayout);

80
src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js

@ -5,13 +5,13 @@
* @class BI.FlexVerticalCenter
* @extends BI.Layout
*/
BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-vertical-center clearfix",
horizontalAlign: BI.HorizontalAlign.Middle,
return BI.extend(BI.FlexWrapperVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-center-adapt-layout clearfix",
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
// scrollable: true,
scrollx: true,
hgap: 0,
vgap: 0,
lgap: 0,
@ -21,55 +21,31 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
});
},
render: function () {
BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
var o = this.options;
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexVerticalCenter.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative"});
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;
},
appendFragment: function (frag) {
this.$wrapper.append(frag);
this.element.append(this.$wrapper);
},
_getWrapper: function () {
return this.$wrapper;
},
resize: function () {
// console.log("flex_vertical_center布局不需要resize");
var self = this, o = this.options;
return {
type: "bi.flex_scrollable_horizontal",
ref: function (_ref) {
self.wrapper = _ref;
},
verticalAlign: BI.VerticalAlign.Middle,
horizontalAlign: o.horizontalAlign,
columnSize: o.columnSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
items: o.items
};
},
populate: function (items) {
BI.FlexVerticalCenter.superclass.populate.apply(this, arguments);
this._mount();
this.wrapper.populate(items);
}
});
BI.shortcut("bi.flex_wrapper_vertical_center", BI.FlexVerticalCenter);
BI.shortcut("bi.flex_scrollable_vertical_adapt", BI.FlexWrapperVerticalCenter);
BI.shortcut("bi.flex_scrollable_vertical_center_adapt", BI.FlexWrapperVerticalCenter);

83
src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js

@ -0,0 +1,83 @@
/**
*自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2.
*
* @class BI.FlexWrapperVerticalLayout
* @extends BI.Layout
*/
BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-scrollable-vertical-layout clearfix",
horizontalAlign: BI.HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Top,
rowSize: [],
scrollable: null,
scrolly: true,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("flex-scrollable-vertical-layout-scrollable h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.FlexWrapperVerticalLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative"});
if (o.rowSize[i] > 0) {
w.element.height(o.rowSize[i]);
}
if (o.rowSize[i] === "fill") {
w.element.css("flex", "1");
}
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
w.element.css({
"margin-top": (i === 0 ? o.vgap : 0) + 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": o.hgap + 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;
},
appendFragment: function (frag) {
this.$wrapper.append(frag);
this.element.append(this.$wrapper);
},
_getWrapper: function () {
return this.$wrapper;
},
resize: function () {
// console.log("flex_wrapper_vertical布局不需要resize");
},
populate: function (items) {
BI.FlexWrapperVerticalLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.flex_scrollable_vertical", BI.FlexWrapperVerticalLayout);

243
src/css/core/wrapper/flex.css

@ -1,4 +1,4 @@
.bi-flex-center-layout {
.bi-flex-center-adapt-layout {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -87,7 +87,7 @@
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.bi-flex-horizontal-layout.middle {
.bi-flex-horizontal-layout.v-middle {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -98,7 +98,7 @@
-o-align-items: center;
align-items: center;
}
.bi-flex-horizontal-layout.bottom {
.bi-flex-horizontal-layout.v-bottom {
/* 09版 */
-webkit-box-align: flex-end;
/* 12版 */
@ -109,8 +109,47 @@
-o-align-items: flex-end;
align-items: flex-end;
}
.bi-flex-horizontal-layout.v-stretch {
/* 09版 */
-webkit-box-align: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-horizontal-layout.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 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: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-vertical-center {
.bi-flex-vertical-layout {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -124,13 +163,13 @@
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
/* 09版 */
-webkit-box-orient: horizontal;
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 09版 */
-webkit-box-pack: flex-start;
/* 12版 */
@ -140,6 +179,25 @@
-o-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
/* 09版 */
-webkit-box-align: start;
/* 12版 */
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-ms-flex-align: start;
-o-align-items: flex-start;
align-items: flex-start;
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.bi-flex-vertical-layout.h-center {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -149,24 +207,38 @@
-ms-flex-align: center;
-o-align-items: center;
align-items: center;
}
.bi-flex-vertical-layout.h-right {
/* 09版 */
/*-webkit-box-lines: multiple;*/
-webkit-box-align: flex-end;
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-align-items: flex-end;
-moz-align-items: flex-end;
-ms-align-items: flex-end;
-ms-flex-align: end;
-o-align-items: flex-end;
align-items: flex-end;
}
.bi-flex-vertical-center.stretch {
.bi-flex-vertical-layout.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
-webkit-box-align: stretch;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-vertical-layout.v-stretch {
/* 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版 */
@ -187,7 +259,7 @@
align-items: stretch;
}
.bi-flex-wrapper-center-layout .flex-wrapper-center-layout-wrapper {
.bi-flex-scrollable-center-adapt-layout .flex-scrollable-center-adapt-layout-wrapper {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -231,7 +303,7 @@
float: left;
}
.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper {
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -280,7 +352,7 @@
flex-wrap: nowrap;
min-height: 100%;
}
.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper.middle {
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-middle {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -290,7 +362,7 @@
-o-align-items: center;
align-items: center;
}
.bi-flex-wrapper-horizontal-layout .flex-wrapper-horizontal-layout-wrapper.bottom {
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-bottom {
/* 09版 */
-webkit-box-align: flex-end;
/* 12版 */
@ -300,8 +372,46 @@
-o-align-items: flex-end;
align-items: flex-end;
}
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.v-stretch {
/* 09版 */
-webkit-box-align: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-scrollable-horizontal-layout .flex-scrollable-horizontal-layout-wrapper.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 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: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper {
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper {
display: box;
/* OLD - Android 4.4- */
display: -webkit-box;
@ -315,13 +425,13 @@
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
/* 09版 */
-webkit-box-orient: horizontal;
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 09版 */
-webkit-box-pack: flex-start;
/* 12版 */
@ -331,6 +441,26 @@
-ms-flex-pack: start;
-o-justify-content: flex-start;
justify-content: flex-start;
/* 09版 */
-webkit-box-align: flex-start;
/* 12版 */
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-ms-flex-align: start;
-o-align-items: flex-start;
align-items: flex-start;
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
min-width: 100%;
}
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-center {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -340,33 +470,45 @@
-ms-flex-align: center;
-o-align-items: center;
align-items: center;
}
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-right {
/* 09版 */
/*-webkit-box-lines: multiple;*/
-webkit-box-align: flex-end;
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
min-height: 100%;
float: left;
-webkit-align-items: flex-end;
-moz-align-items: flex-end;
-ms-align-items: flex-end;
-ms-flex-align: end;
-o-align-items: flex-end;
align-items: flex-end;
}
.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper.stretch {
width: 100%;
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
-webkit-box-align: stretch;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.bi-flex-scrollable-vertical-layout .flex-scrollable-vertical-layout-wrapper.v-stretch {
/* 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版 */
@ -375,6 +517,7 @@
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}

2
src/less/core/wrapper/flex.center.less

@ -1,4 +1,4 @@
.bi-flex-center-layout {
.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) */

45
src/less/core/wrapper/flex.horizontal.less

@ -44,7 +44,7 @@
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
&.middle {
&.v-middle {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -55,7 +55,7 @@
-o-align-items: center;
align-items: center;
}
&.bottom {
&.v-bottom {
/* 09版 */
-webkit-box-align: flex-end;
/* 12版 */
@ -66,4 +66,45 @@
-o-align-items: flex-end;
align-items: flex-end;
}
&.v-stretch {
/* 09版 */
-webkit-box-align: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
&.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 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: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
}

76
src/less/core/wrapper/flex.vertical.center.less

@ -1,76 +0,0 @@
.bi-flex-vertical-center {
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: flex-start;
/* 12版 */
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-o-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
/* 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;
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
&.stretch {
/* 09版 */
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 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: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
}

110
src/less/core/wrapper/flex.vertical.less

@ -0,0 +1,110 @@
.bi-flex-vertical-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: vertical;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 09版 */
-webkit-box-pack: flex-start;
/* 12版 */
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-o-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
/* 09版 */
-webkit-box-align: start;
/* 12版 */
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-ms-flex-align: start;
-o-align-items: flex-start;
align-items: flex-start;
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
&.h-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;
}
&.h-right {
/* 09版 */
-webkit-box-align: flex-end;
/* 12版 */
-webkit-align-items: flex-end;
-moz-align-items: flex-end;
-ms-align-items: flex-end;
-ms-flex-align: end;
-o-align-items: flex-end;
align-items: flex-end;
}
&.h-stretch {
/* 09版 */
-webkit-box-align: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
&.v-stretch {
/* 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: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
}

4
src/less/core/wrapper/flex.wrapper.center.less

@ -1,5 +1,5 @@
.bi-flex-wrapper-center-layout {
& .flex-wrapper-center-layout-wrapper {
.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) */

47
src/less/core/wrapper/flex.wrapper.horizontal.less

@ -1,5 +1,5 @@
.bi-flex-wrapper-horizontal-layout {
& .flex-wrapper-horizontal-layout-wrapper {
.bi-flex-scrollable-horizontal-layout {
& .flex-scrollable-horizontal-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) */
@ -46,7 +46,7 @@
min-height: 100%;
&.middle {
&.v-middle {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
@ -56,7 +56,7 @@
-o-align-items: center;
align-items: center;
}
&.bottom {
&.v-bottom {
/* 09版 */
-webkit-box-align: flex-end;
/* 12版 */
@ -66,5 +66,44 @@
-o-align-items: flex-end;
align-items: flex-end;
}
&.v-stretch {
/* 09版 */
-webkit-box-align: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-o-align-items: stretch;
align-items: stretch;
}
&.h-stretch {
/* 09版 */
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 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: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
}
}

80
src/less/core/wrapper/flex.wrapper.vertical.center.less

@ -1,80 +0,0 @@
.bi-flex-wrapper-vertical-center {
& .flex-wrapper-vertical-center-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: flex-start;
/* 12版 */
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-ms-flex-pack: start;
-o-justify-content: flex-start;
justify-content: flex-start;
/* 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;
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
min-height: 100%;
float: left;
&.stretch {
width: 100%;
/* 09版 */
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 09版 */
-webkit-box-pack: center;
/* 12版 */
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
/* 09版 */
-webkit-box-align: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-o-align-items: stretch;
align-items: stretch;
}
}
}

113
src/less/core/wrapper/flex.wrapper.vertical.less

@ -0,0 +1,113 @@
.bi-flex-scrollable-vertical-layout {
& .flex-scrollable-vertical-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: vertical;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
/* 09版 */
-webkit-box-pack: flex-start;
/* 12版 */
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-ms-flex-pack: start;
-o-justify-content: flex-start;
justify-content: flex-start;
/* 09版 */
-webkit-box-align: flex-start;
/* 12版 */
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-ms-flex-align: start;
-o-align-items: flex-start;
align-items: flex-start;
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
min-width: 100%;
&.h-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;
}
&.h-right {
/* 09版 */
-webkit-box-align: flex-end;
/* 12版 */
-webkit-align-items: flex-end;
-moz-align-items: flex-end;
-ms-align-items: flex-end;
-ms-flex-align: end;
-o-align-items: flex-end;
align-items: flex-end;
}
&.h-stretch {
/* 09版 */
-webkit-box-align: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
&.v-stretch {
/* 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: stretch;
/* 12版 */
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-ms-flex-align: stretch;
-o-align-items: stretch;
align-items: stretch;
}
}
}
Loading…
Cancel
Save