diff --git a/examples/dev.html b/examples/dev.html
index 009f32b8d..bf845c987 100644
--- a/examples/dev.html
+++ b/examples/dev.html
@@ -9,71 +9,35 @@
diff --git a/src/base/single/label/abstract.label.js b/src/base/single/label/abstract.label.js
index 8bbfbee15..76fb27fbd 100644
--- a/src/base/single/label/abstract.label.js
+++ b/src/base/single/label/abstract.label.js
@@ -106,6 +106,7 @@
"line-height": o.height / BI.pixRatio + BI.pixUnit
});
json.textAlign = o.textAlign;
+ delete json.maxWidth;
this.text = BI.createWidget(BI.extend(json, {
element: this,
hgap: o.hgap,
@@ -175,6 +176,7 @@
"line-height": o.height / BI.pixRatio + BI.pixUnit
});
json.textAlign = o.textAlign;
+ delete json.maxWidth;
this.text = BI.createWidget(BI.extend(json, {
element: this,
hgap: o.hgap,
@@ -251,6 +253,7 @@
"line-height": (o.height - (o.vgap * 2)) / BI.pixRatio + BI.pixUnit
});
}
+ delete json.maxWidth;
this.text = BI.createWidget(BI.extend(json, {
element: this,
hgap: o.hgap,
@@ -309,6 +312,7 @@
"line-height": (o.height - (o.vgap * 2)) / BI.pixRatio + BI.pixUnit
});
}
+ delete json.maxWidth;
this.text = BI.createWidget(BI.extend(json, { // 2.6
element: this,
hgap: o.hgap,
diff --git a/src/core/platform/web/config.js b/src/core/platform/web/config.js
index f6ce80dfb..e8001d87f 100644
--- a/src/core/platform/web/config.js
+++ b/src/core/platform/web/config.js
@@ -2,10 +2,9 @@
BI.prepares.push(function () {
// 注册布局
// adapt类布局优先级规则
- // 1、在非IE且支持flex的浏览器下使用flex布局
- // 2、IE或者不支持flex的浏览器下使用inline布局
- // 3、在2的情况下如果布局的items大于1的话使用display:table的布局
- // 4、在3的情况下如果IE版本低于8使用table标签布局
+ // 1、支持flex的浏览器下使用flex布局
+ // 2、不支持flex的浏览器下使用inline布局
+ // 3、当列宽既需要自动列宽又需要自适应列宽时，inline布局也处理不了了。当横向出滚动条时使用table布局，不出滚动条时使用float布局
var _isSupportFlex;
var isSupportFlex = function () {
if (_isSupportFlex == null) {
@@ -57,6 +56,9 @@ BI.prepares.push(function () {
horizontalAlign: BI.HorizontalAlign.Stretch
}, ob, {type: "bi.table_adapt"});
}
+ if (BI.Providers.getProvider("bi.provider.system").getResponsiveMode()) {
+ return BI.extend({}, ob, {type: "bi.responsive_inline"});
+ }
return ob;
});
BI.Plugin.configWidget("bi.center_adapt", function (ob) {
@@ -145,7 +147,8 @@ BI.prepares.push(function () {
type: "bi.td",
items: BI.map(ob.items, function (i, item) {
return [item];
- })});
+ })
+ });
});
BI.Plugin.configWidget("bi.left_right_vertical_adapt", function (ob) {
@@ -160,9 +163,15 @@ BI.prepares.push(function () {
BI.Plugin.configWidget("bi.flex_horizontal", function (ob) {
if (ob.scrollable === true || ob.scrollx !== false) {
if (ob.hgap > 0 || ob.rgap > 0) {// flex中最后一个margin-right不生效
+ if (BI.Providers.getProvider("bi.provider.system").getResponsiveMode()) {
+ return BI.extend({}, ob, {type: "bi.responsive_flex_scrollable_horizontal"});
+ }
return BI.extend({}, ob, {type: "bi.flex_scrollable_horizontal"});
}
}
+ if (BI.Providers.getProvider("bi.provider.system").getResponsiveMode()) {
+ return BI.extend({}, ob, {type: "bi.responsive_flex_horizontal"});
+ }
});
BI.Plugin.configWidget("bi.flex_vertical", function (ob) {
if (ob.scrollable === true || ob.scrollx === true) {
diff --git a/src/core/system.js b/src/core/system.js
index 3fae2a600..08a872860 100644
--- a/src/core/system.js
+++ b/src/core/system.js
@@ -7,12 +7,13 @@
!(function () {
var system = {
dependencies: {},
+ responsiveMode: false,
size: { // 尺寸
TOOL_BAR_HEIGHT: 24,
LIST_ITEM_HEIGHT: 24,
TRIGGER_HEIGHT: 24,
TOAST_TOP: 10
- },
+ }
};
var provider = function () {
@@ -20,7 +21,11 @@
this.SYSTEM = system;
this.setSize = function (opt) {
- BI.deepExtend(system, { size: opt });
+ BI.deepExtend(system, {size: opt});
+ };
+
+ this.setResponsiveMode = function (mode) {
+ system.responsiveMode = !!mode;
};
this.addDependency = function (moduleId, minVersion, maxVersion) {
@@ -41,6 +46,10 @@
return system.size;
},
+ getResponsiveMode: function () {
+ return system.responsiveMode;
+ },
+
getDependencies: function () {
return system.dependencies;
}
@@ -52,5 +61,5 @@
})();
BI.prepares.push(function () {
- BI.SIZE_CONSANTS = BI.Providers.getProvider('bi.provider.system').getSize();
+ BI.SIZE_CONSANTS = BI.Providers.getProvider("bi.provider.system").getSize();
});
diff --git a/src/core/wrapper/layout/responsive/responsive.flex.horizontal.js b/src/core/wrapper/layout/responsive/responsive.flex.horizontal.js
new file mode 100644
index 000000000..4d5fa2b27
--- /dev/null
+++ b/src/core/wrapper/layout/responsive/responsive.flex.horizontal.js
@@ -0,0 +1,47 @@
+/**
+ * 横向响应式布局
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.ResponsiveFlexHorizontalLayout
+ * @extends BI.FlexHorizontalLayout
+ */
+BI.ResponsiveFlexHorizontalLayout = BI.inherit(BI.FlexHorizontalLayout, {
+ props: function () {
+ return BI.extend(BI.ResponsiveFlexHorizontalLayout.superclass.props.apply(this, arguments), {
+ extraCls: "bi-responsive-f-h"
+ });
+ },
+
+ _addElement: function (i, item) {
+ var w = BI.ResponsiveFlexHorizontalLayout.superclass._addElement.apply(this, arguments);
+ var o = this.options;
+ var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width >= 1 ? null : item.width;
+ if (o.columnSize.length > 0) {
+ if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
+ columnSize = null;
+ }
+ }
+ if (columnSize === "fill") {
+ // 给自适应列设置一个min-width
+ var length = 0;
+ var fillCount = 0, autoCount = 0;
+ for (var k = 0, len = o.columnSize.length || o.items.length; k < len; k++) {
+ var cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width;
+ if (cz === "fill") {
+ fillCount++;
+ cz = 0;
+ } else if (cz === "" || BI.isNull(cz)) {
+ autoCount++;
+ cz = 0;
+ }
+ length += cz;
+ }
+ var count = (o.columnSize.length || o.items.length) - fillCount - autoCount;
+ if (count > 0) {
+ w.element.css("min-width", length / count / BI.pixRatio + BI.pixUnit);
+ }
+ }
+ return w;
+ }
+});
+BI.shortcut("bi.responsive_flex_horizontal", BI.ResponsiveFlexHorizontalLayout);
diff --git a/src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js b/src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js
new file mode 100644
index 000000000..58869e51d
--- /dev/null
+++ b/src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js
@@ -0,0 +1,47 @@
+/**
+ * 横向响应式布局
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.ResponsiveFlexWrapperHorizontalLayout
+ * @extends BI.FlexWrapperHorizontalLayout
+ */
+BI.ResponsiveFlexWrapperHorizontalLayout = BI.inherit(BI.FlexWrapperHorizontalLayout, {
+ props: function () {
+ return BI.extend(BI.ResponsiveFlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
+ extraCls: "bi-responsive-f-h"
+ });
+ },
+
+ _addElement: function (i, item) {
+ var w = BI.ResponsiveFlexHorizontalLayout.superclass._addElement.apply(this, arguments);
+ var o = this.options;
+ var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width >= 1 ? null : item.width;
+ if (o.columnSize.length > 0) {
+ if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
+ columnSize = null;
+ }
+ }
+ if (columnSize === "fill") {
+ // 给自适应列设置一个min-width
+ var length = 0;
+ var fillCount = 0, autoCount = 0;
+ for (var k = 0, len = o.columnSize.length || o.items.length; k < len; k++) {
+ var cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width;
+ if (cz === "fill") {
+ fillCount++;
+ cz = 0;
+ } else if (cz === "" || BI.isNull(cz)) {
+ autoCount++;
+ cz = 0;
+ }
+ length += cz;
+ }
+ var count = (o.columnSize.length || o.items.length) - fillCount - autoCount;
+ if (count > 0) {
+ w.element.css("min-width", length / count / BI.pixRatio + BI.pixUnit);
+ }
+ }
+ return w;
+ }
+});
+BI.shortcut("bi.responsive_flex_scrollable_horizontal", BI.ResponsiveFlexWrapperHorizontalLayout);
diff --git a/src/core/wrapper/layout/responsive/responsive.inline..js b/src/core/wrapper/layout/responsive/responsive.inline..js
new file mode 100644
index 000000000..7b6e97e5b
--- /dev/null
+++ b/src/core/wrapper/layout/responsive/responsive.inline..js
@@ -0,0 +1,65 @@
+/**
+ * 横向响应式布局
+ * Created by GUY on 2016/12/2.
+ *
+ * @class BI.ResponsiveInlineLayout
+ * @extends BI.InlineLayout
+ */
+BI.ResponsiveInlineLayout = BI.inherit(BI.InlineLayout, {
+ _addElement: function (i, item) {
+ var o = this.options;
+ var w = BI.InlineLayout.superclass._addElement.apply(this, arguments);
+ var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width >= 1 ? null : item.width;
+ if (o.columnSize.length > 0) {
+ if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
+ columnSize = null;
+ }
+ }
+ if (columnSize > 0) {
+ w.element.width(columnSize < 1 ? ((columnSize * 100).toFixed(1) + "%") : (columnSize / BI.pixRatio + BI.pixUnit));
+ }
+ w.element.css({
+ position: "relative",
+ "vertical-align": o.verticalAlign
+ });
+ w.element.addClass("i-item");
+ if (columnSize === "fill" || columnSize === "") {
+ var length = o.hgap, czs = 0;
+ var fillCount = 0, autoCount = 0;
+ for (var k = 0, len = o.columnSize.length || o.items.length; k < len; k++) {
+ var cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width;
+ if (cz === "fill") {
+ fillCount++;
+ cz = 0;
+ } else if (cz === "" || BI.isNull(cz)) {
+ autoCount++;
+ cz = 0;
+ }
+ length += o.hgap + o.lgap + o.rgap + (o.items[k].lgap || 0) + (o.items[k].rgap || 0) + (o.items[k].hgap || 0) + cz;
+ czs += cz;
+ }
+ if (columnSize === "fill") {
+ var count = (o.columnSize.length || o.items.length) - fillCount - autoCount;
+ if (count > 0) {
+ w.element.css("min-width", czs / count / BI.pixRatio + BI.pixUnit);
+ }
+ w.element.css("width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")");
+ }
+ if (o.horizontalAlign === BI.HorizontalAlign.Stretch || !(o.scrollable === true || o.scrollx === true)) {
+ if (columnSize === "fill") {
+ w.element.css("max-width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")");
+ } else {
+ w.element.css("max-width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (autoCount > 1 ? "/" + autoCount : "") + ")");
+ }
+ }
+ }
+ this._handleGap(w, item, i);
+ if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) {
+ var top = o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0),
+ bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0);
+ w.element.css("height", "calc(100% - " + ((top + bottom) / BI.pixRatio + BI.pixUnit) + ")");
+ }
+ return w;
+ }
+});
+BI.shortcut("bi.responsive_inline", BI.ResponsiveInlineLayout);
diff --git a/src/less/core/wrapper/flex.horizontal.less b/src/less/core/wrapper/flex.horizontal.less
index b58fe25c4..933df5b33 100644
--- a/src/less/core/wrapper/flex.horizontal.less
+++ b/src/less/core/wrapper/flex.horizontal.less
@@ -62,6 +62,17 @@
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
+ &.bi-responsive-f-h {
+ /* 09版 */
+ /*-webkit-box-lines: multiple;*/
+ /* 12版 */
+ -webkit-flex-wrap: wrap;
+ -moz-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ -o-flex-wrap: wrap;
+ flex-wrap: wrap;
+ }
+
&.v-middle {
/* 09版 */
-webkit-box-align: center;
diff --git a/src/less/core/wrapper/flex.wrapper.horizontal.less b/src/less/core/wrapper/flex.wrapper.horizontal.less
index a54b68075..420676ea7 100644
--- a/src/less/core/wrapper/flex.wrapper.horizontal.less
+++ b/src/less/core/wrapper/flex.wrapper.horizontal.less
@@ -269,4 +269,17 @@
flex-grow: 1;
}
}
+
+ &.bi-responsive-f-h {
+ & .f-s-h-w {
+ /* 09版 */
+ /*-webkit-box-lines: multiple;*/
+ /* 12版 */
+ -webkit-flex-wrap: wrap;
+ -moz-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ -o-flex-wrap: wrap;
+ flex-wrap: wrap;
+ }
+ }
}