Browse Source

添加响应式布局

es6
guy 3 years ago
parent
commit
c9e085a311
  1. 70
      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

70
examples/dev.html

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

4
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,

19
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) {

15
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();
});

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

13
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;
}
}
}

Loading…
Cancel
Save