forked from fanruan/fineui
windy
8 years ago
23 changed files with 1029 additions and 65 deletions
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
Loading…
Reference in new issue