From 10281e3a2f40f1441e5dd33948cb2677a14d34f1 Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Wed, 22 Mar 2017 10:16:32 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B8=83=E5=B1=80demo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/config.js | 70 ++------ demo/js/layout/demo.border.js | 97 +++++++++++ demo/js/layout/demo.center.js | 35 ++++ demo/js/layout/demo.float_center.js | 27 +++ demo/js/layout/demo.flow.js | 85 +++++++++ demo/js/layout/demo.grid.js | 137 +++++++++++++++ demo/js/layout/demo.horizontal.js | 50 ++++++ demo/js/layout/demo.horizontal_adapt.js | 42 +++++ demo/js/layout/demo.horizontal_auto.js | 42 +++++ demo/js/layout/demo.horizontal_float.js | 35 ++++ demo/js/layout/demo.htape.js | 38 ++++ demo/js/layout/demo.inline.js | 47 +++++ .../layout/demo.left_right_vertical_adapt.js | 44 +++++ demo/js/layout/demo.table.js | 162 ++++++++++++++++++ demo/js/layout/demo.td.js | 59 +++++++ demo/js/layout/demo.vertical.js | 25 +++ demo/js/layout/demo.vertical_adapt.js | 42 +++++ demo/js/layout/demo.vtape.js | 38 ++++ dist/core.css | 2 +- dist/core.js | 4 +- .../wrapper/layout/adapt/float.horizontal.js | 4 +- src/css/utils/widget.css | 2 +- 22 files changed, 1028 insertions(+), 59 deletions(-) create mode 100644 demo/js/layout/demo.border.js create mode 100644 demo/js/layout/demo.center.js create mode 100644 demo/js/layout/demo.float_center.js create mode 100644 demo/js/layout/demo.flow.js create mode 100644 demo/js/layout/demo.grid.js create mode 100644 demo/js/layout/demo.horizontal.js create mode 100644 demo/js/layout/demo.horizontal_adapt.js create mode 100644 demo/js/layout/demo.horizontal_auto.js create mode 100644 demo/js/layout/demo.horizontal_float.js create mode 100644 demo/js/layout/demo.htape.js create mode 100644 demo/js/layout/demo.inline.js create mode 100644 demo/js/layout/demo.left_right_vertical_adapt.js create mode 100644 demo/js/layout/demo.table.js create mode 100644 demo/js/layout/demo.td.js create mode 100644 demo/js/layout/demo.vertical.js create mode 100644 demo/js/layout/demo.vertical_adapt.js create mode 100644 demo/js/layout/demo.vtape.js diff --git a/demo/js/config.js b/demo/js/config.js index e2a314c17..6ca641c57 100644 --- a/demo/js/config.js +++ b/demo/js/config.js @@ -17,108 +17,72 @@ Demo.CONFIG = [{ pId: 1, text: "bi.center_adapt", value: "demo.center_adapt" -}, { - pId: 1, - text: "bi.float_center_adapt", - value: "float_center_adapt" -}, { - pId: 1, - text: "bi.absolute_center_adapt", - value: "absolute_center_adapt" -}, { - pId: 1, - text: "bi.flex_center", - value: "flex_center" -}, { - pId: 1, - text: "bi.inline_center_adapt", - value: "inline_center_adapt" }, { pId: 1, text: "bi.vertical_adapt", - value: "vertical_adapt" -}, { - pId: 1, - text: "bi.inline_vertical_adapt", - value: "inline_vertical_adapt" + value: "demo.vertical_adapt" }, { pId: 1, text: "bi.horizontal_adapt", - value: "horizontal_adapt" + value: "demo.horizontal_adapt" }, { pId: 1, text: "bi.horizontal_auto", - value: "horizontal_auto" + value: "demo.horizontal_auto" }, { pId: 1, text: "bi.horizontal_float", - value: "horizontal_float" + value: "demo.horizontal_float" }, { pId: 1, text: "bi.left_right_vertical_adapt", - value: "left_right_vertical_adapt" + value: "demo.left_right_vertical_adapt" }, { pId: 1, text: "bi.center", - value: "center" + value: "demo.center_layout" }, { pId: 1, text: "bi.float_center", - value: "float_center" + value: "demo.float_center" }, { pId: 1, text: "bi.vertical", - value: "vertical" + value: "demo.vertical" }, { pId: 1, text: "bi.horizontal", - value: "horizontal" + value: "demo.horizontal" }, { pId: 1, text: "bi.border", - value: "border" -}, { - pId: 1, - text: "bi.card", - value: "card" + value: "demo.border" }, { pId: 1, text: "bi.left, bi.right", - value: "flow" -}, { - pId: 1, - text: "bi.lattice", - value: "lattice" + value: "demo.flow" }, { pId: 1, text: "bi.inline", - value: "inline" + value: "demo.inline" }, { pId: 1, text: "bi.htape", - value: "htape" + value: "demo.htape" }, { pId: 1, text: "bi.vtape", - value: "vtape" + value: "demo.vtape" }, { pId: 1, text: "bi.grid", - value: "grid" + value: "demo.grid" }, { pId: 1, text: "bi.table", - value: "table" -}, { - pId: 1, - text: "bi.division", - value: "division" -}, { - pId: 1, - text: "bi.window", - value: "window" + value: "demo.table_layout" }, { pId: 1, text: "bi.td", - value: "td" + value: "demo.td" }]; \ No newline at end of file diff --git a/demo/js/layout/demo.border.js b/demo/js/layout/demo.border.js new file mode 100644 index 000000000..0391d51fa --- /dev/null +++ b/demo/js/layout/demo.border.js @@ -0,0 +1,97 @@ +/** + * Created by User on 2017/3/22. + */ +Demo.BorderLayout = BI.inherit(BI.Widget, { + props: { + baseCls: "demo-border" + }, + + _createNorth: function(){ + return BI.createWidget({ + type: "bi.label", + text: "North", + cls: "layout-bg1", + height: 30 + }) + }, + + _createWest: function(){ + return BI.createWidget({ + type: "bi.center", + cls: "layout-bg2", + items:[{ + type: "bi.label", + text: "West", + whiteSpace: "normal" + }] + }) + }, + + _createCenter: function(){ + return BI.createWidget({ + type: "bi.center", + cls: "layout-bg3", + items: [{ + type: "bi.label", + text: "Center", + whiteSpace: "normal" + }] + }) + }, + + _createEast: function(){ + return BI.createWidget({ + type: "bi.center", + cls: "layout-bg5", + items: [{ + type: "bi.label", + text: "East", + whiteSpace: "normal" + }] + }) + }, + + _createSouth: function(){ + return BI.createWidget({ + type: "bi.label", + text: "South", + cls: "layout-bg6", + height: 50 + }) + }, + + render: function () { + return { + type: "bi.border", + cls: "", + items: { + north: { + el: this._createNorth(), + height: 30, + top: 20, + left: 20, + right: 20 + }, + south: { + el: this._createSouth(), + height: 50, + bottom: 20, + left: 20, + right: 20 + }, + west: { + el: this._createWest(), + width: 200, + left: 20 + }, + east: { + el: this._createEast(), + width: 300, + right: 20 + }, + center: this._createCenter() + } + } + } +}); +$.shortcut("demo.border", Demo.BorderLayout); \ No newline at end of file diff --git a/demo/js/layout/demo.center.js b/demo/js/layout/demo.center.js new file mode 100644 index 000000000..d33893622 --- /dev/null +++ b/demo/js/layout/demo.center.js @@ -0,0 +1,35 @@ +/** + * Created by User on 2017/3/22. + */ +Demo.CenterLayout = BI.inherit(BI.Widget, { + props: { + baseCls: "demo-center" + }, + render: function () { + return { + type: "bi.center", + items: [{ + type: "bi.label", + text: "Center 1，这里虽然设置label的高度30，但是最终影响高度的是center布局", + cls: "layout-bg1", + whiteSpace: "normal" + },{ + type: "bi.label", + text: "Center 2，为了演示label是占满整个的，用了一个whiteSpace:normal", + cls: "layout-bg2", + whiteSpace: "normal" + },{ + type: "bi.label", + text: "Center 3", + cls: "layout-bg3" + },{ + type: "bi.label", + text: "Center 4", + cls: "layout-bg5" + }], + hgap: 20, + vgap: 20 + } + } +}); +$.shortcut("demo.center_layout", Demo.CenterLayout); \ No newline at end of file diff --git a/demo/js/layout/demo.float_center.js b/demo/js/layout/demo.float_center.js new file mode 100644 index 000000000..248af4e80 --- /dev/null +++ b/demo/js/layout/demo.float_center.js @@ -0,0 +1,27 @@ +/** + * Created by User on 2017/3/22. + */ +Demo.FloatCenterLayout = BI.inherit(BI.Widget, { + props: { + baseCls: "demo-float-center" + }, + render: function () { + return { + type: "bi.float_center", + items: [{ + type: "bi.label", + text: "floatCenter与center的不同在于，它可以控制最小宽度和最大宽度", + cls: "layout-bg1", + whiteSpace: "normal" + }, { + type: "bi.label", + text: "floatCenter与center的不同在于，它可以控制最小宽度和最大宽度", + cls: "layout-bg2", + whiteSpace: "normal" + }], + hgap: 20, + vgap: 20 + } + } +}); +$.shortcut("demo.float_center", Demo.FloatCenterLayout); \ No newline at end of file diff --git a/demo/js/layout/demo.flow.js b/demo/js/layout/demo.flow.js new file mode 100644 index 000000000..4c0811486 --- /dev/null +++ b/demo/js/layout/demo.flow.js @@ -0,0 +1,85 @@ +/** + * Created by User on 2017/3/22. + */ +Demo.FlowLayout = BI.inherit(BI.Widget, { + props: { + baseCls: "demo-flow" + }, + render: function () { + return { + type: "bi.center_adapt", + items: [{ + type: "bi.left", + items: [{ + type: "bi.label", + height: 30, + text: "Left-1", + cls: "layout-bg1", + hgap: 20 + }, { + type: "bi.label", + height: 30, + text: "Left-2", + cls: "layout-bg2", + hgap: 20 + }, { + type: "bi.label", + height: 30, + text: "Left-3", + cls: "layout-bg3", + hgap: 20 + }, { + type: "bi.label", + height: 30, + text: "Left-4", + cls: "layout-bg4", + hgap: 20 + }, { + type: "bi.label", + height: 30, + text: "Left-5", + cls: "layout-bg5", + hgap: 20 + }], + hgap: 20, + vgap: 20 + }, { + type: "bi.right", + items: [{ + type: "bi.label", + height: 30, + text: "Right-1", + cls: "layout-bg1", + hgap: 20 + }, { + type: "bi.label", + height: 30, + text: "Right-2", + cls: "layout-bg2", + hgap: 20 + }, { + type: "bi.label", + height: 30, + text: "Right-3", + cls: "layout-bg3", + hgap: 20 + }, { + type: "bi.label", + height: 30, + text: "Right-4", + cls: "layout-bg4", + hgap: 20 + }, { + type: "bi.label", + height: 30, + text: "Right-5", + cls: "layout-bg5", + hgap: 20 + }], + hgap: 20, + vgap: 20 + }] + } + } +}); +$.shortcut("demo.flow", Demo.FlowLayout); \ No newline at end of file diff --git a/demo/js/layout/demo.grid.js b/demo/js/layout/demo.grid.js new file mode 100644 index 000000000..0b8aeb53c --- /dev/null +++ b/demo/js/layout/demo.grid.js @@ -0,0 +1,137 @@ +/** + * Created by User on 2017/3/22. + */ +Demo.GridLayout = BI.inherit(BI.Widget, { + props: { + baseCls: "demo-grid" + }, + render: function () { + return { + type: "bi.grid", + columns: 5, + rows: 3, + items: [{ + column: 0, + row: 0, + el: { + type: "bi.label", + text: "column-0, row-0", + cls: "layout-bg1" + } + }, { + column: 1, + row: 0, + el: { + type: "bi.label", + text: "column-1, row-0", + cls: "layout-bg2" + } + }, { + column: 2, + row: 0, + el: { + type: "bi.label", + text: "column-2, row-0", + cls: "layout-bg6" + } + }, { + column: 3, + row: 0, + el: { + type: "bi.label", + text: "column-3, row-0", + cls: "layout-bg3" + } + }, { + column: 4, + row: 0, + el: { + type: "bi.label", + text: "column-4, row-0", + cls: "layout-bg4" + } + }, { + column: 0, + row: 1, + el: { + type: "bi.label", + text: "column-0, row-1", + cls: "layout-bg5" + } + }, { + column: 1, + row: 1, + el: { + type: "bi.label", + text: "column-1, row-1", + cls: "layout-bg6" + } + }, { + column: 2, + row: 1, + el: { + type: "bi.label", + text: "column-2, row-1", + cls: "layout-bg7" + } + }, { + column: 3, + row: 1, + el: { + type: "bi.label", + text: "column-3, row-1", + cls: "layout-bg1" + } + }, { + column: 4, + row: 1, + el: { + type: "bi.label", + text: "column-4, row-1", + cls: "layout-bg3" + } + }, { + column: 0, + row: 2, + el: { + type: "bi.label", + text: "column-0, row-2", + cls: "layout-bg2" + } + }, { + column: 1, + row: 2, + el: { + type: "bi.label", + text: "column-1, row-2", + cls: "layout-bg3" + } + }, { + column: 2, + row: 2, + el: { + type: "bi.label", + text: "column-2, row-2", + cls: "layout-bg4" + } + }, { + column: 3, + row: 2, + el: { + type: "bi.label", + text: "column-3, row-2", + cls: "layout-bg5" + } + }, { + column: 4, + row: 2, + el: { + type: "bi.label", + text: "column-4, row-2", + cls: "layout-bg6" + } + }] + } + } +}); +$.shortcut("demo.grid", Demo.GridLayout); \ No newline at end of file diff --git a/demo/js/layout/demo.horizontal.js b/demo/js/layout/demo.horizontal.js new file mode 100644 index 000000000..5662ffb9b --- /dev/null +++ b/demo/js/layout/demo.horizontal.js @@ -0,0 +1,50 @@ +/** + * Created by User on 2017/3/21. + */ +Demo.Horizontal = BI.inherit(BI.Widget, { + props: { + baseCls: "demo-horizontal" + }, + render: function () { + return { + type: "bi.vertical", + items: [{ + type: "bi.horizontal", + items: [{ + type: "bi.absolute", + items: [{ + el: { + type: "bi.text_button", + cls: "layout-bg1", + text: "这里设置了lgap(左边距)，rgap(右边距)，tgap(上边距)，bgap(下边距)这里设置了lgap(左边距)，rgap(右边距)，tgap(上边距)，bgap(下边距)", + height: 30 + }, + left: 0, + right: 0 + }], + width: 100, + height: 30 + }, { + type: "bi.absolute", + items: [{ + el: { + type: "bi.text_button", + cls: "layout-bg2", + text: "这里设置了lgap(左边距)，rgap(右边距)，tgap(上边距)，bgap(下边距)这里设置了lgap(左边距)，rgap(右边距)，tgap(上边距)，bgap(下边距)", + height: 30 + }, + left: 0, + right: 0 + }], + width: 200, + height: 30 + }] + }], + lgap: 20, + rgap: 80, + tgap: 80, + bgap: 50 + } + } +}); +$.shortcut("demo.horizontal", Demo.Horizontal); \ No newline at end of file diff --git a/demo/js/layout/demo.horizontal_adapt.js b/demo/js/layout/demo.horizontal_adapt.js new file mode 100644 index 000000000..8688906ce --- /dev/null +++ b/demo/js/layout/demo.horizontal_adapt.js @@ -0,0 +1,42 @@ +/** + * Created by User on 2017/3/22. + */ +Demo.HorizontalAdapt = BI.inherit(BI.Widget, { + props: { + baseCls: "demo-horizontal-adapt" + }, + + _createLayout: function () { + return BI.createWidget({ + type: "bi.horizontal_adapt", + vgap: 10, + items: [{ + type: "bi.label", + text: "Horizontal Adapt左右自适应", + cls: "layout-bg1", + width: 300, + height: 30 + }, { + type: "bi.label", + text: "Horizontal Adapt左右自适应", + cls: "layout-bg2", + //width: 300, + height: 30 + }] + }) + }, + + render: function () { + return { + type: "bi.grid", + columns: 1, + rows: 2, + items: [{ + column: 0, + row: 0, + el: this._createLayout() + }] + } + } +}); +$.shortcut("demo.horizontal_adapt", Demo.HorizontalAdapt); \ No newline at end of file diff --git a/demo/js/layout/demo.horizontal_auto.js b/demo/js/layout/demo.horizontal_auto.js new file mode 100644 index 000000000..a4837d609 --- /dev/null +++ b/demo/js/layout/demo.horizontal_auto.js @@ -0,0 +1,42 @@ +/** + * Created by User on 2017/3/22. + */ +Demo.HorizontalAuto = BI.inherit(BI.Widget, { + props: { + baseCls: "demo-horizontal-auto" + }, + + _createLayout: function () { + return BI.createWidget({ + type: "bi.horizontal_auto", + vgap: 10, + items: [{ + type: "bi.label", + text: "Horizontal Auto左右自适应", + cls: "layout-bg1", + width: 300, + height: 30 + }, { + type: "bi.label", + text: "Horizontal Auto左右自适应", + cls: "layout-bg2", + width: 300, + height: 30 + }] + }) + }, + + render: function () { + return { + type: "bi.grid", + columns: 1, + rows: 2, + items: [{ + column: 0, + row: 0, + el: this._createLayout() + }] + } + } +}); +$.shortcut("demo.horizontal_auto", Demo.HorizontalAuto); \ No newline at end of file diff --git a/demo/js/layout/demo.horizontal_float.js b/demo/js/layout/demo.horizontal_float.js new file mode 100644 index 000000000..217b832af --- /dev/null +++ b/demo/js/layout/demo.horizontal_float.js @@ -0,0 +1,35 @@ +/** + * Created by User on 2017/3/22. + */ +Demo.HorizontalFloat = BI.inherit(BI.Widget, { + props: { + baseCls: "demo-horizontal-float" + }, + + _createLayout: function () { + return BI.createWidget({ + type: "bi.horizontal_float", + vgap: 10, + items: [{ + type: "bi.label", + text: "Horizontal Float左右自适应", + cls: "layout-bg1", + width: 100 + }] + }) + }, + + render: function () { + return { + type: "bi.grid", + columns: 1, + rows: 2, + items: [{ + column: 0, + row: 0, + el: this._createLayout() + }] + } + } +}); +$.shortcut("demo.horizontal_float", Demo.HorizontalFloat); \ No newline at end of file diff --git a/demo/js/layout/demo.htape.js b/demo/js/layout/demo.htape.js new file mode 100644 index 000000000..fddfa2ca4 --- /dev/null +++ b/demo/js/layout/demo.htape.js @@ -0,0 +1,38 @@ +/** + * Created by User on 2017/3/22. + */ +Demo.HtapeLayout = BI.inherit(BI.Widget, { + props: { + baseCls: "demo-htape" + }, + render: function () { + return { + type: "bi.htape", + items : [ + { + width: 100, + el : { + type : 'bi.label', + text : '1', + cls: "layout-bg1" + } + }, { + width: 200, + el : { + type : 'bi.label', + text : '2', + cls: "layout-bg2" + } + }, { + width: 'fill', + el : { + type : 'bi.label', + text : '3', + cls: "layout-bg3" + } + } + ] + } + } +}); +$.shortcut("demo.htape", Demo.HtapeLayout); \ No newline at end of file diff --git a/demo/js/layout/demo.inline.js b/demo/js/layout/demo.inline.js new file mode 100644 index 000000000..d3bde0799 --- /dev/null +++ b/demo/js/layout/demo.inline.js @@ -0,0 +1,47 @@ +/** + * Created by User on 2017/3/22. + */ +Demo.InlineLayout = BI.inherit(BI.Widget, { + props: { + baseCls: "demo-inline" + }, + render: function () { + return { + type: "bi.inline", + items: [{ + type: "bi.label", + height: 30, + text: "Left-1", + cls: "layout-bg1", + hgap: 200 + }, { + type: "bi.label", + height: 30, + text: "Left-2", + cls: "layout-bg2", + hgap: 200 + }, { + type: "bi.label", + height: 30, + text: "Left-3", + cls: "layout-bg3", + hgap: 200 + }, { + type: "bi.label", + height: 30, + text: "Left-4", + cls: "layout-bg4", + hgap: 200 + }, { + type: "bi.label", + height: 30, + text: "Left-5", + cls: "layout-bg5", + hgap: 200 + }], + hgap: 20, + vgap: 20 + } + } +}); +$.shortcut("demo.inline", Demo.InlineLayout); \ No newline at end of file diff --git a/demo/js/layout/demo.left_right_vertical_adapt.js b/demo/js/layout/demo.left_right_vertical_adapt.js new file mode 100644 index 000000000..c92d3a9ea --- /dev/null +++ b/demo/js/layout/demo.left_right_vertical_adapt.js @@ -0,0 +1,44 @@ +/** + * Created by User on 2017/3/22. + */ +Demo.LeftRightVerticalAdaptLayout = BI.inherit(BI.Widget, { + props: { + baseCls: "demo-left-right-vertical-adapt" + }, + render: function () { + return { + type: "bi.left_right_vertical_adapt", + lhgap: 10, + rhgap: 30, + items: { + left: [{ + type: "bi.label", + text: "左边的垂直居中", + cls: "layout-bg1", + width: 100, + height: 30 + }, { + type: "bi.label", + text: "左边的垂直居中", + cls: "layout-bg2", + width: 100, + height: 30 + }], + right: [{ + type: "bi.label", + text: "右边的垂直居中", + cls: "layout-bg1", + width: 100, + height: 30 + }, { + type: "bi.label", + text: "右边的垂直居中", + cls: "layout-bg2", + width: 100, + height: 30 + }] + } + } + } +}); +$.shortcut("demo.left_right_vertical_adapt", Demo.LeftRightVerticalAdaptLayout); \ No newline at end of file diff --git a/demo/js/layout/demo.table.js b/demo/js/layout/demo.table.js new file mode 100644 index 000000000..617735556 --- /dev/null +++ b/demo/js/layout/demo.table.js @@ -0,0 +1,162 @@ +/** + * Created by User on 2017/3/22. + */ +Demo.TableLayout = BI.inherit(BI.Widget, { + props: { + baseCls: "demo-table-layout" + }, + + _createTable1: function () { + return { + type: "bi.table", + items: BI.createItems([ + [ + { + el: { + cls: "layout-bg1" + } + }, + { + el: { + cls: "layout-bg2" + } + }, + { + el: { + cls: "layout-bg3" + } + } + ], + [ + { + el: { + cls: "layout-bg4" + } + }, + { + el: { + cls: "layout-bg5" + } + }, + { + el: { + cls: "layout-bg6" + } + } + ], + [ + { + el: { + cls: "layout-bg7" + } + }, + { + el: { + cls: "layout-bg8" + } + }, + { + el: { + cls: "layout-bg1" + } + } + ], + [ + { + el: { + cls: "layout-bg2" + } + }, + { + el: { + cls: "layout-bg3" + } + }, + { + el: { + cls: "layout-bg4" + } + } + ], + [ + { + el: { + cls: "layout-bg5" + } + }, + { + el: { + cls: "layout-bg6" + } + }, + { + el: { + cls: "layout-bg7" + } + } + ], + [ + { + el: { + cls: "layout-bg8" + } + }, + { + el: { + cls: "layout-bg1" + } + }, + { + el: { + cls: "layout-bg2" + } + } + ], + [ + { + el: { + cls: "layout-bg6" + } + }, + { + el: { + cls: "layout-bg7" + } + }, + { + el: { + cls: "layout-bg8" + } + } + ] + ], { + type: "bi.layout" + }), + columnSize: [100, "fill", 200], + rowSize: [10, 30, 50, 70, 90, 110, 130], + hgap: 20, + vgap: 10 + } + }, + + render: function () { + return { + type: "bi.grid", + columns: 1, + rows: 1, + items: [ + { + column: 0, + row: 0, + el: this._createTable1() + } + //, { + // column: 0, + // row: 1, + // el: this._createTable2() + //} + ] + } + } +}); +$.shortcut("demo.table_layout", Demo.TableLayout); \ No newline at end of file diff --git a/demo/js/layout/demo.td.js b/demo/js/layout/demo.td.js new file mode 100644 index 000000000..2b21f41fb --- /dev/null +++ b/demo/js/layout/demo.td.js @@ -0,0 +1,59 @@ +/** + * Created by User on 2017/3/22. + */ +Demo.TdLayout = BI.inherit(BI.Widget, { + props: { + baseCls: "demo-td" + }, + render: function () { + return { + type: "bi.vertical", + items: [{ + type: "bi.td", + columnSize: [100, 100, ""], + items: BI.createItems([ + [{ + el: { + type: 'bi.label', + text: '这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写', + cls: "layout-bg1" + } + }, { + el: { + type: 'bi.label', + text: '这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写', + cls: "layout-bg2" + } + }, { + el: { + type: 'bi.label', + text: '这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写', + cls: "layout-bg3" + } + }], [{ + el: { + type: 'bi.label', + text: '这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写', + cls: "layout-bg5" + } + }, { + el: { + type: 'bi.label', + text: '这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写', + cls: "layout-bg6" + } + }, { + el: { + type: 'bi.label', + text: '这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写', + cls: "layout-bg7" + } + }] + ], { + whiteSpace: "normal" + }) + }] + } + } +}); +$.shortcut("demo.td", Demo.TdLayout); \ No newline at end of file diff --git a/demo/js/layout/demo.vertical.js b/demo/js/layout/demo.vertical.js new file mode 100644 index 000000000..19d18fb6a --- /dev/null +++ b/demo/js/layout/demo.vertical.js @@ -0,0 +1,25 @@ +/** + * Created by User on 2017/3/21. + */ +Demo.VerticalLayout = BI.inherit(BI.Widget, { + props: { + baseCls: "demo-vertical" + }, + render: function () { + return { + type: "bi.vertical", + items: [{ + type: "bi.label", + cls: "layout-bg1", + text: "这里设置了hgap(水平间距)，vgap(垂直间距)", + height: 30 + }, { + type: "bi.label", + cls: "layout-bg2", + text: "这里设置了hgap(水平间距)，vgap(垂直间距)", + height: 30 + }] + } + } +}); +$.shortcut("demo.vertical", Demo.VerticalLayout); \ No newline at end of file diff --git a/demo/js/layout/demo.vertical_adapt.js b/demo/js/layout/demo.vertical_adapt.js new file mode 100644 index 000000000..dc030e756 --- /dev/null +++ b/demo/js/layout/demo.vertical_adapt.js @@ -0,0 +1,42 @@ +/** + * Created by User on 2017/3/22. + */ +Demo.VerticalAdaptLayout = BI.inherit(BI.Widget, { + props: { + baseCls: "demo-vertical-adapt" + }, + + _createLayout: function () { + return BI.createWidget({ + type: "bi.vertical_adapt", + vgap: 10, + items: [{ + type: "bi.label", + text: "Vertical Adapt上下自适应", + cls: "layout-bg1", + width: 300, + height: 30 + }, { + type: "bi.label", + text: "Vertical Adapt上下自适应", + cls: "layout-bg2", + width: 300, + height: 30 + }] + }) + }, + + render: function () { + return { + type: "bi.grid", + columns: 2, + rows: 1, + items: [{ + column: 0, + row: 0, + el: this._createLayout() + }] + } + } +}); +$.shortcut("demo.vertical_adapt", Demo.VerticalAdaptLayout); \ No newline at end of file diff --git a/demo/js/layout/demo.vtape.js b/demo/js/layout/demo.vtape.js new file mode 100644 index 000000000..6309482f8 --- /dev/null +++ b/demo/js/layout/demo.vtape.js @@ -0,0 +1,38 @@ +/** + * Created by User on 2017/3/22. + */ +Demo.VtapeLayout = BI.inherit(BI.Widget, { + props: { + baseCls: "demo-vtape" + }, + render: function () { + return { + type: "bi.vtape", + items : [ + { + height: 100, + el : { + type : 'bi.label', + text : '1', + cls: "layout-bg1" + } + }, { + height: 200, + el : { + type : 'bi.label', + text : '2', + cls: "layout-bg2" + } + }, { + height: 'fill', + el : { + type : 'bi.label', + text : '3', + cls: "layout-bg3" + } + } + ] + } + } +}); +$.shortcut("demo.vtape", Demo.VtapeLayout); \ No newline at end of file diff --git a/dist/core.css b/dist/core.css index 485d2d341..c533d6120 100644 --- a/dist/core.css +++ b/dist/core.css @@ -9807,7 +9807,7 @@ textarea::-webkit-scrollbar-thumb { /**** custom color(自定义颜色,用于特定场景) ****/ @font-face { font-family: 'bi'; - src: url('${servletURL}?op=resource&resource=/com/fr/bi/web/resources/fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('${servletURL}?op=resource&resource=/com/fr/bi/web/resources/fonts/iconfont.woff') format('woff'), /* chrome、firefox */ url('${servletURL}?op=resource&resource=/com/fr/bi/web/resources/fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('${servletURL}?op=resource&resource=/com/fr/bi/web/resources/fonts/iconfont.svg#svgFontName') format('svg'); + src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/iconfont.woff') format('woff'), /* chrome、firefox */ url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('font/iconfont.svg#svgFontName') format('svg'); /* iOS 4.1- */ } diff --git a/dist/core.js b/dist/core.js index 806cd26fd..386c8eeb1 100644 --- a/dist/core.js +++ b/dist/core.js @@ -24841,7 +24841,7 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, { var self = this, o = this.options; this.left = BI.createWidget({ type: "bi.vertical", - items: items, + items: [item], hgap: o.hgap, vgap: o.vgap, tgap: o.tgap, @@ -24856,7 +24856,7 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, { items: [this.left] }); - return left; + return this.left; }, populate: function (items) { diff --git a/src/core/wrapper/layout/adapt/float.horizontal.js b/src/core/wrapper/layout/adapt/float.horizontal.js index 261ebc018..5d9044504 100644 --- a/src/core/wrapper/layout/adapt/float.horizontal.js +++ b/src/core/wrapper/layout/adapt/float.horizontal.js @@ -39,7 +39,7 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, { var self = this, o = this.options; this.left = BI.createWidget({ type: "bi.vertical", - items: items, + items: [item], hgap: o.hgap, vgap: o.vgap, tgap: o.tgap, @@ -54,7 +54,7 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, { items: [this.left] }); - return left; + return this.left; }, populate: function (items) { diff --git a/src/css/utils/widget.css b/src/css/utils/widget.css index cc3812b8d..0ccd6dba8 100644 --- a/src/css/utils/widget.css +++ b/src/css/utils/widget.css @@ -3,7 +3,7 @@ /**** custom color(自定义颜色,用于特定场景) ****/ @font-face { font-family: 'bi'; - src: url('${servletURL}?op=resource&resource=/com/fr/bi/web/resources/fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('${servletURL}?op=resource&resource=/com/fr/bi/web/resources/fonts/iconfont.woff') format('woff'), /* chrome、firefox */ url('${servletURL}?op=resource&resource=/com/fr/bi/web/resources/fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('${servletURL}?op=resource&resource=/com/fr/bi/web/resources/fonts/iconfont.svg#svgFontName') format('svg'); + src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/iconfont.woff') format('woff'), /* chrome、firefox */ url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('font/iconfont.svg#svgFontName') format('svg'); /* iOS 4.1- */ }