guy 7 years ago
parent
commit
9191616062
  1. 93
      bi/core.css
  2. 25
      bi/core.js
  3. 93
      dist/bundle.css
  4. 25
      dist/bundle.js
  5. 2
      dist/bundle.min.css
  6. 76
      dist/bundle.min.js
  7. 93
      dist/core.css
  8. 25
      dist/core.js
  9. 25
      dist/demo.js
  10. 6
      src/core/var.js
  11. 5
      src/core/wrapper/layout/adapt/adapt.vertical.js
  12. 2
      src/core/wrapper/layout/flex/flex.horizontal.js
  13. 2
      src/core/wrapper/layout/flex/flex.vertical.center.js
  14. 4
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
  15. 6
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js
  16. 46
      src/css/core/wrapper/flex.vertical.center.css
  17. 47
      src/css/core/wrapper/flex.wrapper.vertical.center.css
  18. 47
      src/less/core/wrapper/flex.vertical.center.less
  19. 48
      src/less/core/wrapper/flex.wrapper.vertical.center.less

93
bi/core.css

@ -1306,29 +1306,29 @@ i {
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;
-webkit-box-pack: center;
/* 12版 */
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-o-justify-content: flex-start;
justify-content: flex-start;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
/* 09版 */
-webkit-box-align: center;
-webkit-box-align: flex-start;
/* 12版 */
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-o-align-items: flex-start;
align-items: flex-start;
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
@ -1338,6 +1338,16 @@ i {
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.bi-flex-vertical-center.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-wrapper-center-layout .flex-wrapper-center-layout-wrapper {
display: box;
/* OLD - Android 4.4- */
@ -1460,29 +1470,29 @@ i {
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;
-webkit-box-pack: center;
/* 12版 */
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-o-justify-content: flex-start;
justify-content: flex-start;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
/* 09版 */
-webkit-box-align: center;
-webkit-box-align: flex-start;
/* 12版 */
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-o-align-items: flex-start;
align-items: flex-start;
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
@ -1494,6 +1504,17 @@ i {
min-height: 100%;
float: left;
}
.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper.stretch {
width: 100%;
/* 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-inline-center-adapt-layout:after {
display: inline-block;
width: 0;

25
bi/core.js

@ -4190,12 +4190,14 @@ _.extend(BI, {
HorizontalAlign: {
Left: "left",
Right: "right",
Center: "center"
Center: "center",
Stretch: "stretch"
},
VerticalAlign: {
Middle: "middle",
Top: "top",
Bottom: "bottom"
Bottom: "bottom",
Stretch: "stretch"
}
});/**
* 客户端观察者主要处理事件的添加删除执行等
@ -12104,6 +12106,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
props: {
baseCls: "bi-vertical-adapt-layout",
columnSize: [],
horizontalAlign: BI.HorizontalAlign.Left,
hgap: 0,
vgap: 0,
lgap: 0,
@ -12113,8 +12116,10 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
},
render: function () {
BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.$table = $("<table>").attr({"cellspacing": 0, "cellpadding": 0}).css({
"position": "relative",
"width": o.horizontalAlign === BI.HorizontalAlign.Stretch ? "100%" : "auto",
"height": "100%",
"white-space": "nowrap",
"border-spacing": "0px",
@ -12197,7 +12202,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
}
},
_getWrapper: function(){
_getWrapper: function () {
return this.$tr;
},
@ -12459,7 +12464,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-layout",
verticalAlign: "middle",
verticalAlign: BI.VerticalAlign.Middle,
columnSize: [],
scrollx: true,
hgap: 0,
@ -12524,6 +12529,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-vertical-center",
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
hgap: 0,
vgap: 0,
@ -12536,6 +12542,7 @@ 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);
},
@ -12641,9 +12648,9 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-horizontal-layout clearfix",
verticalAlign: "middle",
verticalAlign: BI.VerticalAlign.Middle,
columnSize: [],
scrollx: true,
// scrollable: true,
hgap: 0,
vgap: 0,
lgap: 0,
@ -12726,7 +12733,9 @@ BI.FlexVerticalCenter = 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,
columnSize: [],
// scrollable: true,
hgap: 0,
vgap: 0,
lgap: 0,
@ -12738,7 +12747,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
render: function () {
BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
var o = this.options;
this.$wrapper = $("<div>").addClass("flex-wrapper-vertical-center-wrapper");
this.$wrapper = $("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
this.populate(this.options.items);
},
@ -12785,7 +12794,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
}
},
_getWrapper: function(){
_getWrapper: function () {
return this.$wrapper;
},

93
dist/bundle.css vendored

@ -1306,29 +1306,29 @@ i {
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;
-webkit-box-pack: center;
/* 12版 */
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-o-justify-content: flex-start;
justify-content: flex-start;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
/* 09版 */
-webkit-box-align: center;
-webkit-box-align: flex-start;
/* 12版 */
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-o-align-items: flex-start;
align-items: flex-start;
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
@ -1338,6 +1338,16 @@ i {
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.bi-flex-vertical-center.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-wrapper-center-layout .flex-wrapper-center-layout-wrapper {
display: box;
/* OLD - Android 4.4- */
@ -1460,29 +1470,29 @@ i {
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;
-webkit-box-pack: center;
/* 12版 */
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-o-justify-content: flex-start;
justify-content: flex-start;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
/* 09版 */
-webkit-box-align: center;
-webkit-box-align: flex-start;
/* 12版 */
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-o-align-items: flex-start;
align-items: flex-start;
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
@ -1494,6 +1504,17 @@ i {
min-height: 100%;
float: left;
}
.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper.stretch {
width: 100%;
/* 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-inline-center-adapt-layout:after {
display: inline-block;
width: 0;

25
dist/bundle.js vendored

@ -25092,12 +25092,14 @@ _.extend(BI, {
HorizontalAlign: {
Left: "left",
Right: "right",
Center: "center"
Center: "center",
Stretch: "stretch"
},
VerticalAlign: {
Middle: "middle",
Top: "top",
Bottom: "bottom"
Bottom: "bottom",
Stretch: "stretch"
}
});BI.version = "2.0";/**
* absolute实现的居中布局
@ -25663,6 +25665,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
props: {
baseCls: "bi-vertical-adapt-layout",
columnSize: [],
horizontalAlign: BI.HorizontalAlign.Left,
hgap: 0,
vgap: 0,
lgap: 0,
@ -25672,8 +25675,10 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
},
render: function () {
BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.$table = $("<table>").attr({"cellspacing": 0, "cellpadding": 0}).css({
"position": "relative",
"width": o.horizontalAlign === BI.HorizontalAlign.Stretch ? "100%" : "auto",
"height": "100%",
"white-space": "nowrap",
"border-spacing": "0px",
@ -25756,7 +25761,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
}
},
_getWrapper: function(){
_getWrapper: function () {
return this.$tr;
},
@ -26018,7 +26023,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-layout",
verticalAlign: "middle",
verticalAlign: BI.VerticalAlign.Middle,
columnSize: [],
scrollx: true,
hgap: 0,
@ -26083,6 +26088,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-vertical-center",
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
hgap: 0,
vgap: 0,
@ -26095,6 +26101,7 @@ 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);
},
@ -26200,9 +26207,9 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-horizontal-layout clearfix",
verticalAlign: "middle",
verticalAlign: BI.VerticalAlign.Middle,
columnSize: [],
scrollx: true,
// scrollable: true,
hgap: 0,
vgap: 0,
lgap: 0,
@ -26285,7 +26292,9 @@ BI.FlexVerticalCenter = 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,
columnSize: [],
// scrollable: true,
hgap: 0,
vgap: 0,
lgap: 0,
@ -26297,7 +26306,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
render: function () {
BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
var o = this.options;
this.$wrapper = $("<div>").addClass("flex-wrapper-vertical-center-wrapper");
this.$wrapper = $("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
this.populate(this.options.items);
},
@ -26344,7 +26353,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
}
},
_getWrapper: function(){
_getWrapper: function () {
return this.$wrapper;
},

2
dist/bundle.min.css vendored

File diff suppressed because one or more lines are too long

76
dist/bundle.min.js vendored

File diff suppressed because one or more lines are too long

93
dist/core.css vendored

@ -1306,29 +1306,29 @@ i {
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;
-webkit-box-pack: center;
/* 12版 */
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-o-justify-content: flex-start;
justify-content: flex-start;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
/* 09版 */
-webkit-box-align: center;
-webkit-box-align: flex-start;
/* 12版 */
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-o-align-items: flex-start;
align-items: flex-start;
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
@ -1338,6 +1338,16 @@ i {
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.bi-flex-vertical-center.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-wrapper-center-layout .flex-wrapper-center-layout-wrapper {
display: box;
/* OLD - Android 4.4- */
@ -1460,29 +1470,29 @@ i {
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;
-webkit-box-pack: center;
/* 12版 */
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-o-justify-content: flex-start;
justify-content: flex-start;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
/* 09版 */
-webkit-box-align: center;
-webkit-box-align: flex-start;
/* 12版 */
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-o-align-items: flex-start;
align-items: flex-start;
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
@ -1494,6 +1504,17 @@ i {
min-height: 100%;
float: left;
}
.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper.stretch {
width: 100%;
/* 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-inline-center-adapt-layout:after {
display: inline-block;
width: 0;

25
dist/core.js vendored

@ -25041,12 +25041,14 @@ _.extend(BI, {
HorizontalAlign: {
Left: "left",
Right: "right",
Center: "center"
Center: "center",
Stretch: "stretch"
},
VerticalAlign: {
Middle: "middle",
Top: "top",
Bottom: "bottom"
Bottom: "bottom",
Stretch: "stretch"
}
});BI.version = "2.0";/**
* absolute实现的居中布局
@ -25612,6 +25614,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
props: {
baseCls: "bi-vertical-adapt-layout",
columnSize: [],
horizontalAlign: BI.HorizontalAlign.Left,
hgap: 0,
vgap: 0,
lgap: 0,
@ -25621,8 +25624,10 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
},
render: function () {
BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.$table = $("<table>").attr({"cellspacing": 0, "cellpadding": 0}).css({
"position": "relative",
"width": o.horizontalAlign === BI.HorizontalAlign.Stretch ? "100%" : "auto",
"height": "100%",
"white-space": "nowrap",
"border-spacing": "0px",
@ -25705,7 +25710,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
}
},
_getWrapper: function(){
_getWrapper: function () {
return this.$tr;
},
@ -25967,7 +25972,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-layout",
verticalAlign: "middle",
verticalAlign: BI.VerticalAlign.Middle,
columnSize: [],
scrollx: true,
hgap: 0,
@ -26032,6 +26037,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-vertical-center",
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
hgap: 0,
vgap: 0,
@ -26044,6 +26050,7 @@ 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);
},
@ -26149,9 +26156,9 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-horizontal-layout clearfix",
verticalAlign: "middle",
verticalAlign: BI.VerticalAlign.Middle,
columnSize: [],
scrollx: true,
// scrollable: true,
hgap: 0,
vgap: 0,
lgap: 0,
@ -26234,7 +26241,9 @@ BI.FlexVerticalCenter = 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,
columnSize: [],
// scrollable: true,
hgap: 0,
vgap: 0,
lgap: 0,
@ -26246,7 +26255,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
render: function () {
BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
var o = this.options;
this.$wrapper = $("<div>").addClass("flex-wrapper-vertical-center-wrapper");
this.$wrapper = $("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
this.populate(this.options.items);
},
@ -26293,7 +26302,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
}
},
_getWrapper: function(){
_getWrapper: function () {
return this.$wrapper;
},

25
dist/demo.js vendored

@ -8464,19 +8464,30 @@ Demo.Slider = BI.inherit(BI.Widget, {
console.log(this.getValue());
});
var singleSliderLabel = BI.createWidget({
type: "bi.single_slider_label",
height: 30,
width: 300,
digit: 0,
unit: "个"
});
singleSliderLabel.setMinAndMax({
min: 0,
max: 100
});
singleSliderLabel.setValue(10);
singleSliderLabel.populate();
var normalSingleSlider = BI.createWidget({
type: "bi.single_slider_normal",
height: 30,
width: 300
});
normalSingleSlider.setMinAndMax({
min: 0,
max: 100
});
normalSingleSlider.setValue(10);
normalSingleSlider.populate();
BI.createWidget({
@ -8498,6 +8509,14 @@ Demo.Slider = BI.inherit(BI.Widget, {
}]
},
height: 200
}, {
el: {
type: "bi.center_adapt",
items: [{
el: singleSliderLabel
}]
},
height: 200
}],
hgap: 20
});

6
src/core/var.js

@ -71,11 +71,13 @@ _.extend(BI, {
HorizontalAlign: {
Left: "left",
Right: "right",
Center: "center"
Center: "center",
Stretch: "stretch"
},
VerticalAlign: {
Middle: "middle",
Top: "top",
Bottom: "bottom"
Bottom: "bottom",
Stretch: "stretch"
}
});

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

@ -7,6 +7,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
props: {
baseCls: "bi-vertical-adapt-layout",
columnSize: [],
horizontalAlign: BI.HorizontalAlign.Left,
hgap: 0,
vgap: 0,
lgap: 0,
@ -16,8 +17,10 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
},
render: function () {
BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
var o = this.options;
this.$table = $("<table>").attr({"cellspacing": 0, "cellpadding": 0}).css({
"position": "relative",
"width": o.horizontalAlign === BI.HorizontalAlign.Stretch ? "100%" : "auto",
"height": "100%",
"white-space": "nowrap",
"border-spacing": "0px",
@ -100,7 +103,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
}
},
_getWrapper: function(){
_getWrapper: function () {
return this.$tr;
},

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

@ -9,7 +9,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-horizontal-layout",
verticalAlign: "middle",
verticalAlign: BI.VerticalAlign.Middle,
columnSize: [],
scrollx: true,
hgap: 0,

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

@ -9,6 +9,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-vertical-center",
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [],
hgap: 0,
vgap: 0,
@ -21,6 +22,7 @@ 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);
},

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

@ -9,9 +9,9 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-wrapper-horizontal-layout clearfix",
verticalAlign: "middle",
verticalAlign: BI.VerticalAlign.Middle,
columnSize: [],
scrollx: true,
// scrollable: true,
hgap: 0,
vgap: 0,
lgap: 0,

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

@ -9,7 +9,9 @@ BI.FlexVerticalCenter = 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,
columnSize: [],
// scrollable: true,
hgap: 0,
vgap: 0,
lgap: 0,
@ -21,7 +23,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
render: function () {
BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
var o = this.options;
this.$wrapper = $("<div>").addClass("flex-wrapper-vertical-center-wrapper");
this.$wrapper = $("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
this.populate(this.options.items);
},
@ -68,7 +70,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
}
},
_getWrapper: function(){
_getWrapper: function () {
return this.$wrapper;
},

46
src/css/core/wrapper/flex.vertical.center.css

@ -12,29 +12,29 @@
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;
-webkit-box-pack: center;
/* 12版 */
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-o-justify-content: flex-start;
justify-content: flex-start;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
/* 09版 */
-webkit-box-align: center;
-webkit-box-align: flex-start;
/* 12版 */
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-o-align-items: flex-start;
align-items: flex-start;
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
@ -44,3 +44,13 @@
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.bi-flex-vertical-center.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;
}

47
src/css/core/wrapper/flex.wrapper.vertical.center.css

@ -12,29 +12,29 @@
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;
-webkit-box-pack: center;
/* 12版 */
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-o-justify-content: flex-start;
justify-content: flex-start;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
/* 09版 */
-webkit-box-align: center;
-webkit-box-align: flex-start;
/* 12版 */
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-o-align-items: flex-start;
align-items: flex-start;
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
@ -46,3 +46,14 @@
min-height: 100%;
float: left;
}
.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper.stretch {
width: 100%;
/* 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;
}

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

@ -7,31 +7,31 @@
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;
-webkit-box-pack: center;
/* 12版 */
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-o-justify-content: flex-start;
justify-content: flex-start;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
/* 09版 */
-webkit-box-align: center;
-webkit-box-align: flex-start;
/* 12版 */
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-o-align-items: flex-start;
align-items: flex-start;
/* 09版 */
/*-webkit-box-lines: multiple;*/
@ -41,4 +41,15 @@
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
&.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;
}
}

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

@ -7,31 +7,31 @@
display: -webkit-flex; /* NEW - Chrome */
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;
-webkit-box-pack: center;
/* 12版 */
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-o-justify-content: flex-start;
justify-content: flex-start;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
/* 09版 */
-webkit-box-align: center;
-webkit-box-align: flex-start;
/* 12版 */
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-o-align-items: flex-start;
align-items: flex-start;
/* 09版 */
/*-webkit-box-lines: multiple;*/
@ -44,5 +44,17 @@
min-height: 100%;
float: left;
&.stretch {
width: 100%;
/* 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;
}
}
}
Loading…
Cancel
Save