Frank
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge pull request #104 in FUI/fineui from ~GUY/fineui:master to master 

* commit '919161606273e3c7545b0a5da99b1082b022c1a3':
  add
es6
guy 7 years ago
parent
b44aa62bba 9191616062
commit
421d76996f
19 changed files with 416 additions and 254 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 93
      bi/core.css
  2. 21
      bi/core.js
  3. 93
      dist/bundle.css
  4. 21
      dist/bundle.js
  5. 2
      dist/bundle.min.css
  6. 76
      dist/bundle.min.js
  7. 93
      dist/core.css
  8. 21
      dist/core.js
  9. 25
      dist/demo.js
  10. 6
      src/core/var.js
  11. 3
      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. 4
      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
Unescape View File

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

21
bi/core.js
Unescape View File

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

93
dist/bundle.css vendored
Unescape View File

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

21
dist/bundle.js vendored
Unescape View File

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

2
dist/bundle.min.css vendored
View File

File diff suppressed because one or more lines are too long

76
dist/bundle.min.js vendored
View File

File diff suppressed because one or more lines are too long

93
dist/core.css vendored
Unescape View File

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

21
dist/core.js vendored
Unescape View File

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

25
dist/demo.js vendored
Unescape View File

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

6
src/core/var.js
Unescape View File

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

3
src/core/wrapper/layout/adapt/adapt.vertical.js
Unescape View File

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

2
src/core/wrapper/layout/flex/flex.horizontal.js
Unescape View File

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

2
src/core/wrapper/layout/flex/flex.vertical.center.js
Unescape View File

@ -9,6 +9,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
props: function () { props: function () {
return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), { return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
baseCls: "bi-flex-vertical-center", baseCls: "bi-flex-vertical-center",
horizontalAlign: BI.HorizontalAlign.Left,
columnSize: [], columnSize: [],
hgap: 0, hgap: 0,
vgap: 0, vgap: 0,
@ -21,6 +22,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
render: function () { render: function () {
BI.FlexVerticalCenter.superclass.render.apply(this, arguments); BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
var o = this.options; var o = this.options;
this.element.addClass(o.horizontalAlign);
this.populate(this.options.items); this.populate(this.options.items);
}, },

4
src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
Unescape View File

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

4
src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js
Unescape View File

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

46
src/css/core/wrapper/flex.vertical.center.css
Unescape View File

@ -12,29 +12,29 @@
display: flex; display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */ /* NEW, Spec - Opera 12.1, Firefox 20+ */
/* 09版 */ /* 09版 */
-webkit-box-orient: horizontal; -webkit-box-orient: vertical;
/* 12版 */ /* 12版 */
-webkit-flex-direction: row; -webkit-flex-direction: column;
-moz-flex-direction: row; -moz-flex-direction: column;
-ms-flex-direction: row; -ms-flex-direction: column;
-o-flex-direction: row; -o-flex-direction: column;
flex-direction: row; flex-direction: column;
/* 09版 */ /* 09版 */
-webkit-box-pack: flex-start; -webkit-box-pack: center;
/* 12版 */ /* 12版 */
-webkit-justify-content: flex-start; -webkit-justify-content: center;
-moz-justify-content: flex-start; -moz-justify-content: center;
-ms-justify-content: flex-start; -ms-justify-content: center;
-o-justify-content: flex-start; -o-justify-content: center;
justify-content: flex-start; justify-content: center;
/* 09版 */ /* 09版 */
-webkit-box-align: center; -webkit-box-align: flex-start;
/* 12版 */ /* 12版 */
-webkit-align-items: center; -webkit-align-items: flex-start;
-moz-align-items: center; -moz-align-items: flex-start;
-ms-align-items: center; -ms-align-items: flex-start;
-o-align-items: center; -o-align-items: flex-start;
align-items: center; align-items: flex-start;
/* 09版 */ /* 09版 */
/*-webkit-box-lines: multiple;*/ /*-webkit-box-lines: multiple;*/
/* 12版 */ /* 12版 */
@ -44,3 +44,13 @@
-o-flex-wrap: nowrap; -o-flex-wrap: nowrap;
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
Unescape View File

@ -12,29 +12,29 @@
display: flex; display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */ /* NEW, Spec - Opera 12.1, Firefox 20+ */
/* 09版 */ /* 09版 */
-webkit-box-orient: horizontal; -webkit-box-orient: vertical;
/* 12版 */ /* 12版 */
-webkit-flex-direction: row; -webkit-flex-direction: column;
-moz-flex-direction: row; -moz-flex-direction: column;
-ms-flex-direction: row; -ms-flex-direction: column;
-o-flex-direction: row; -o-flex-direction: column;
flex-direction: row; flex-direction: column;
/* 09版 */ /* 09版 */
-webkit-box-pack: flex-start; -webkit-box-pack: center;
/* 12版 */ /* 12版 */
-webkit-justify-content: flex-start; -webkit-justify-content: center;
-moz-justify-content: flex-start; -moz-justify-content: center;
-ms-justify-content: flex-start; -ms-justify-content: center;
-o-justify-content: flex-start; -o-justify-content: center;
justify-content: flex-start; justify-content: center;
/* 09版 */ /* 09版 */
-webkit-box-align: center; -webkit-box-align: flex-start;
/* 12版 */ /* 12版 */
-webkit-align-items: center; -webkit-align-items: flex-start;
-moz-align-items: center; -moz-align-items: flex-start;
-ms-align-items: center; -ms-align-items: flex-start;
-o-align-items: center; -o-align-items: flex-start;
align-items: center; align-items: flex-start;
/* 09版 */ /* 09版 */
/*-webkit-box-lines: multiple;*/ /*-webkit-box-lines: multiple;*/
/* 12版 */ /* 12版 */
@ -46,3 +46,14 @@
min-height: 100%; min-height: 100%;
float: left; 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
Unescape View File

@ -7,31 +7,31 @@
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
/* 09版 */ /* 09版 */
-webkit-box-orient: horizontal; -webkit-box-orient: vertical;
/* 12版 */ /* 12版 */
-webkit-flex-direction: row; -webkit-flex-direction: column;
-moz-flex-direction: row; -moz-flex-direction: column;
-ms-flex-direction: row; -ms-flex-direction: column;
-o-flex-direction: row; -o-flex-direction: column;
flex-direction: row; flex-direction: column;
/* 09版 */ /* 09版 */
-webkit-box-pack: flex-start; -webkit-box-pack: center;
/* 12版 */ /* 12版 */
-webkit-justify-content: flex-start; -webkit-justify-content: center;
-moz-justify-content: flex-start; -moz-justify-content: center;
-ms-justify-content: flex-start; -ms-justify-content: center;
-o-justify-content: flex-start; -o-justify-content: center;
justify-content: flex-start; justify-content: center;
/* 09版 */ /* 09版 */
-webkit-box-align: center; -webkit-box-align: flex-start;
/* 12版 */ /* 12版 */
-webkit-align-items: center; -webkit-align-items: flex-start;
-moz-align-items: center; -moz-align-items: flex-start;
-ms-align-items: center; -ms-align-items: flex-start;
-o-align-items: center; -o-align-items: flex-start;
align-items: center; align-items: flex-start;
/* 09版 */ /* 09版 */
/*-webkit-box-lines: multiple;*/ /*-webkit-box-lines: multiple;*/
@ -41,4 +41,15 @@
-ms-flex-wrap: nowrap; -ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap; -o-flex-wrap: nowrap;
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
Unescape View File

@ -7,31 +7,31 @@
display: -webkit-flex; /* NEW - Chrome */ display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
/* 09版 */ /* 09版 */
-webkit-box-orient: horizontal; -webkit-box-orient: vertical;
/* 12版 */ /* 12版 */
-webkit-flex-direction: row; -webkit-flex-direction: column;
-moz-flex-direction: row; -moz-flex-direction: column;
-ms-flex-direction: row; -ms-flex-direction: column;
-o-flex-direction: row; -o-flex-direction: column;
flex-direction: row; flex-direction: column;
/* 09版 */ /* 09版 */
-webkit-box-pack: flex-start; -webkit-box-pack: center;
/* 12版 */ /* 12版 */
-webkit-justify-content: flex-start; -webkit-justify-content: center;
-moz-justify-content: flex-start; -moz-justify-content: center;
-ms-justify-content: flex-start; -ms-justify-content: center;
-o-justify-content: flex-start; -o-justify-content: center;
justify-content: flex-start; justify-content: center;
/* 09版 */ /* 09版 */
-webkit-box-align: center; -webkit-box-align: flex-start;
/* 12版 */ /* 12版 */
-webkit-align-items: center; -webkit-align-items: flex-start;
-moz-align-items: center; -moz-align-items: flex-start;
-ms-align-items: center; -ms-align-items: flex-start;
-o-align-items: center; -o-align-items: flex-start;
align-items: center; align-items: flex-start;
/* 09版 */ /* 09版 */
/*-webkit-box-lines: multiple;*/ /*-webkit-box-lines: multiple;*/
@ -44,5 +44,17 @@
min-height: 100%; min-height: 100%;
float: left; 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;
}
} }
} }
Write Preview
Loading…
Cancel
Save