Browse Source

添加响应式布局

es6
guy 3 years ago
parent
commit
c9e085a311
  1. 74
      examples/dev.html
  2. 4
      src/base/single/label/abstract.label.js
  3. 19
      src/core/platform/web/config.js
  4. 15
      src/core/system.js
  5. 47
      src/core/wrapper/layout/responsive/responsive.flex.horizontal.js
  6. 41
      src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js
  7. 65
      src/core/wrapper/layout/responsive/responsive.inline..js
  8. 11
      src/less/core/wrapper/flex.horizontal.less
  9. 13
      src/less/core/wrapper/flex.wrapper.horizontal.less

74
examples/dev.html

@ -9,71 +9,35 @@
<body> <body>
<div id="wrapper"></div> <div id="wrapper"></div>
<script> <script>
var Model = BI.inherit(Fix.Model, {
state: function () {
return {
columnSize: [200, "fill"]
};
}
});
BI.model("demo.model", Model);
BI.config("bi.provider.system", function (provider) {
provider.setResponsiveMode(true);
});
var Widget = BI.inherit(BI.Widget, { var Widget = BI.inherit(BI.Widget, {
props: { props: {},
height: 200, render: function () {
width: 600 return {
}, type: "bi.vertical",
beforeInit: function () { items: [{
return new Promise(function (resolve) { type: "bi.horizontal",
setTimeout(function () { height: 300,
resolve(); columnSize: [300, "fill"],
}, 1000);
});
},
_store: function () {
return BI.Models.getModel("demo.model");
},
setup: function () {
var store = BI.useStore();
return function () {
return {
type: "bi.htape",
columnSize: function () {
return store.model.columnSize;
},
items: [{ items: [{
type: "bi.label", type: "bi.label",
css: { css: {background: "#eee"},
background: "#eee" text: "123"
}
}, { }, {
type: "bi.center_adapt", type: "bi.label",
css: { css: {background: "#e0e0e0"},
background: "#e0e0e0" text: "123"
},
items: [{
type: "bi.button",
text: "点击",
handler: function () {
store.model.columnSize = [300, "fill"];
}
}]
}] }]
}; }]
}; };
} }
}); });
BI.shortcut("demo.hooks", Widget); BI.shortcut("demo.responsive", Widget);
BI.createWidget({ BI.createWidget({
type: "bi.absolute", type: "demo.responsive",
items: [{
el: {
type: "demo.hooks"
},
top: 100,
left: 100
}],
element: "#wrapper" element: "#wrapper"
}); });
</script> </script>

4
src/base/single/label/abstract.label.js

@ -106,6 +106,7 @@
"line-height": o.height / BI.pixRatio + BI.pixUnit "line-height": o.height / BI.pixRatio + BI.pixUnit
}); });
json.textAlign = o.textAlign; json.textAlign = o.textAlign;
delete json.maxWidth;
this.text = BI.createWidget(BI.extend(json, { this.text = BI.createWidget(BI.extend(json, {
element: this, element: this,
hgap: o.hgap, hgap: o.hgap,
@ -175,6 +176,7 @@
"line-height": o.height / BI.pixRatio + BI.pixUnit "line-height": o.height / BI.pixRatio + BI.pixUnit
}); });
json.textAlign = o.textAlign; json.textAlign = o.textAlign;
delete json.maxWidth;
this.text = BI.createWidget(BI.extend(json, { this.text = BI.createWidget(BI.extend(json, {
element: this, element: this,
hgap: o.hgap, hgap: o.hgap,
@ -251,6 +253,7 @@
"line-height": (o.height - (o.vgap * 2)) / BI.pixRatio + BI.pixUnit "line-height": (o.height - (o.vgap * 2)) / BI.pixRatio + BI.pixUnit
}); });
} }
delete json.maxWidth;
this.text = BI.createWidget(BI.extend(json, { this.text = BI.createWidget(BI.extend(json, {
element: this, element: this,
hgap: o.hgap, hgap: o.hgap,
@ -309,6 +312,7 @@
"line-height": (o.height - (o.vgap * 2)) / BI.pixRatio + BI.pixUnit "line-height": (o.height - (o.vgap * 2)) / BI.pixRatio + BI.pixUnit
}); });
} }
delete json.maxWidth;
this.text = BI.createWidget(BI.extend(json, { // 2.6 this.text = BI.createWidget(BI.extend(json, { // 2.6
element: this, element: this,
hgap: o.hgap, hgap: o.hgap,

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

@ -2,10 +2,9 @@
BI.prepares.push(function () { BI.prepares.push(function () {
// 注册布局 // 注册布局
// adapt类布局优先级规则 // adapt类布局优先级规则
// 1、在非IE且支持flex的浏览器下使用flex布局 // 1、支持flex的浏览器下使用flex布局
// 2、IE或者不支持flex的浏览器下使用inline布局 // 2、不支持flex的浏览器下使用inline布局
// 3、在2的情况下如果布局的items大于1的话使用display:table的布局 // 3、当列宽既需要自动列宽又需要自适应列宽时,inline布局也处理不了了。当横向出滚动条时使用table布局,不出滚动条时使用float布局
// 4、在3的情况下如果IE版本低于8使用table标签布局
var _isSupportFlex; var _isSupportFlex;
var isSupportFlex = function () { var isSupportFlex = function () {
if (_isSupportFlex == null) { if (_isSupportFlex == null) {
@ -57,6 +56,9 @@ BI.prepares.push(function () {
horizontalAlign: BI.HorizontalAlign.Stretch horizontalAlign: BI.HorizontalAlign.Stretch
}, ob, {type: "bi.table_adapt"}); }, ob, {type: "bi.table_adapt"});
} }
if (BI.Providers.getProvider("bi.provider.system").getResponsiveMode()) {
return BI.extend({}, ob, {type: "bi.responsive_inline"});
}
return ob; return ob;
}); });
BI.Plugin.configWidget("bi.center_adapt", function (ob) { BI.Plugin.configWidget("bi.center_adapt", function (ob) {
@ -145,7 +147,8 @@ BI.prepares.push(function () {
type: "bi.td", type: "bi.td",
items: BI.map(ob.items, function (i, item) { items: BI.map(ob.items, function (i, item) {
return [item]; return [item];
})}); })
});
}); });
BI.Plugin.configWidget("bi.left_right_vertical_adapt", function (ob) { 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) { BI.Plugin.configWidget("bi.flex_horizontal", function (ob) {
if (ob.scrollable === true || ob.scrollx !== false) { if (ob.scrollable === true || ob.scrollx !== false) {
if (ob.hgap > 0 || ob.rgap > 0) {// flex中最后一个margin-right不生效 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"}); 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) { BI.Plugin.configWidget("bi.flex_vertical", function (ob) {
if (ob.scrollable === true || ob.scrollx === true) { if (ob.scrollable === true || ob.scrollx === true) {

15
src/core/system.js

@ -7,12 +7,13 @@
!(function () { !(function () {
var system = { var system = {
dependencies: {}, dependencies: {},
responsiveMode: false,
size: { // 尺寸 size: { // 尺寸
TOOL_BAR_HEIGHT: 24, TOOL_BAR_HEIGHT: 24,
LIST_ITEM_HEIGHT: 24, LIST_ITEM_HEIGHT: 24,
TRIGGER_HEIGHT: 24, TRIGGER_HEIGHT: 24,
TOAST_TOP: 10 TOAST_TOP: 10
}, }
}; };
var provider = function () { var provider = function () {
@ -20,7 +21,11 @@
this.SYSTEM = system; this.SYSTEM = system;
this.setSize = function (opt) { 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) { this.addDependency = function (moduleId, minVersion, maxVersion) {
@ -41,6 +46,10 @@
return system.size; return system.size;
}, },
getResponsiveMode: function () {
return system.responsiveMode;
},
getDependencies: function () { getDependencies: function () {
return system.dependencies; return system.dependencies;
} }
@ -52,5 +61,5 @@
})(); })();
BI.prepares.push(function () { BI.prepares.push(function () {
BI.SIZE_CONSANTS = BI.Providers.getProvider('bi.provider.system').getSize(); BI.SIZE_CONSANTS = BI.Providers.getProvider("bi.provider.system").getSize();
}); });

47
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);

41
src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js

@ -0,0 +1,41 @@
/**
* 横向响应式布局
* Created by GUY on 2016/12/2.
*
* @class BI.ResponsiveFlexWrapperHorizontalLayout
* @extends BI.FlexWrapperHorizontalLayout
*/
BI.ResponsiveFlexWrapperHorizontalLayout = BI.inherit(BI.FlexWrapperHorizontalLayout, {
_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);

65
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);

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

@ -62,6 +62,17 @@
-o-flex-wrap: nowrap; -o-flex-wrap: nowrap;
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 { &.v-middle {
/* 09版 */ /* 09版 */
-webkit-box-align: center; -webkit-box-align: center;

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

@ -269,4 +269,17 @@
flex-grow: 1; 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;
}
}
} }

Loading…
Cancel
Save