forked from fanruan/fineui
guy
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