fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

添加响应式布局

es6
guy 3 years ago
parent
450ad5a979
commit
c9e085a311
9 changed files with 226 additions and 63 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. 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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

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

Write Preview
Loading…
Cancel
Save