guy
7 years ago
25 changed files with 3632 additions and 270 deletions
@ -0,0 +1,102 @@ |
|||||||
|
.mvc-button:hover, |
||||||
|
.mvc-button.hover { |
||||||
|
opacity: 0.5; |
||||||
|
filter: alpha(opacity=50); |
||||||
|
} |
||||||
|
.mvc-button.active, |
||||||
|
.mvc-button:active { |
||||||
|
opacity: 0.5; |
||||||
|
filter: alpha(opacity=50); |
||||||
|
} |
||||||
|
.bi-set-get .left-title, |
||||||
|
.bi-set-get .right-title { |
||||||
|
background: #0088cc; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
.bi-set-get .left-nav { |
||||||
|
border-bottom: 1px solid #cccccc; |
||||||
|
} |
||||||
|
.bi-set-get .left-nav.active, |
||||||
|
.bi-set-get .left-nav:active { |
||||||
|
color: #ffffff; |
||||||
|
background-color: #d9534f; |
||||||
|
} |
||||||
|
.bi-local .top-button { |
||||||
|
background-color: #448eea; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
.bi-local .bottom-label { |
||||||
|
background-color: #EA4738; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
.bi-local .delete-button { |
||||||
|
background-color: #008B8B; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
.bi-local .vessel-border { |
||||||
|
border-left: 1px solid #cccccc; |
||||||
|
border-bottom: 1px solid #cccccc; |
||||||
|
border-right: 1px solid #cccccc; |
||||||
|
} |
||||||
|
.bi-event .title { |
||||||
|
background: #0088cc; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
.bi-event .front { |
||||||
|
background: #ADD8E6; |
||||||
|
} |
||||||
|
.bi-event .nav { |
||||||
|
border: 1px solid #cccccc; |
||||||
|
} |
||||||
|
.bi-skip-to { |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
.bi-skip-to .red-pane { |
||||||
|
background-color: #0088cc; |
||||||
|
} |
||||||
|
.bi-skip-to .blue-pane { |
||||||
|
background-color: #6495ED; |
||||||
|
} |
||||||
|
.bi-skip-to .green-pane { |
||||||
|
background-color: #008B8B; |
||||||
|
} |
||||||
|
.bi-skip-to .yellow-pane { |
||||||
|
background-color: #B8860B; |
||||||
|
} |
||||||
|
.bi-change .outer-text { |
||||||
|
background-color: #0088cc; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
.bi-change .inner { |
||||||
|
border-left: 1px solid #cccccc; |
||||||
|
border-bottom: 1px solid #cccccc; |
||||||
|
border-right: 1px solid #cccccc; |
||||||
|
} |
||||||
|
.bi-change .type-first { |
||||||
|
background-color: #008B8B; |
||||||
|
} |
||||||
|
.bi-change .type-second { |
||||||
|
background-color: #6495ED; |
||||||
|
} |
||||||
|
.bi-change .type-third { |
||||||
|
background-color: #0088cc; |
||||||
|
} |
||||||
|
.bi-tmp .tmp-button { |
||||||
|
color: #ffffff; |
||||||
|
background: #0088cc; |
||||||
|
} |
||||||
|
.bi-splice-duplicate .superiors-label { |
||||||
|
color: white; |
||||||
|
background-color: #008B8B; |
||||||
|
} |
||||||
|
.bi-splice-duplicate .sd-child { |
||||||
|
border: 1px solid #cccccc; |
||||||
|
} |
||||||
|
.bi-splice-duplicate .sd-child .right-button-add { |
||||||
|
color: white; |
||||||
|
background-color: #0088cc; |
||||||
|
} |
||||||
|
.bi-splice-duplicate .sd-child .right-button-del { |
||||||
|
color: white; |
||||||
|
background-color: #d9534f; |
||||||
|
} |
||||||
@ -1,17 +1,17 @@ |
|||||||
Demo.ADDONS_CONFIG = [{ |
Demo.ADDONS_CONFIG = [{ |
||||||
id: 6, |
id: 7, |
||||||
text: "addons" |
text: "addons" |
||||||
}, { |
}, { |
||||||
pId: 6, |
pId: 7, |
||||||
id: 601, |
id: 701, |
||||||
text: "拓展图表控件" |
text: "拓展图表控件" |
||||||
}, { |
}, { |
||||||
pId: 601, |
pId: 701, |
||||||
text: "柱状图", |
text: "柱状图", |
||||||
value: "demo.axis_chart" |
value: "demo.axis_chart" |
||||||
}, { |
}, { |
||||||
pId: 6, |
pId: 7, |
||||||
id: 602, |
id: 702, |
||||||
text: "滚动sliders", |
text: "滚动sliders", |
||||||
value: "demo.slider" |
value: "demo.slider" |
||||||
}]; |
}]; |
||||||
@ -0,0 +1,83 @@ |
|||||||
|
//定义Model路由
|
||||||
|
var modelRouter = new (BI.inherit(BI.WRouter, { |
||||||
|
routes: { |
||||||
|
"": "index" |
||||||
|
}, |
||||||
|
|
||||||
|
index: function () { |
||||||
|
return {}; |
||||||
|
} |
||||||
|
})); |
||||||
|
//定义View路由
|
||||||
|
var viewRouter = new (BI.inherit(BI.WRouter, { |
||||||
|
routes: { |
||||||
|
"": "TestView", |
||||||
|
"/setget": "SetGetView", |
||||||
|
"/local": "LocalView", |
||||||
|
"/skipTo": "SkipToView", |
||||||
|
"/skipTo/:child": "getSkipToView", |
||||||
|
"/change": "ChangeView", |
||||||
|
"/change/inner": "ChangeInnerView", |
||||||
|
"/static": "StaticView", |
||||||
|
"/event": "EventView", |
||||||
|
"/layer": "LayerView", |
||||||
|
"/masker": "MaskerView", |
||||||
|
"/floatbox": "FloatBoxView", |
||||||
|
|
||||||
|
"/spliceDuplicate": "SpliceDuplicateView", |
||||||
|
"/spliceDuplicate/sdSub": "SDSubView", |
||||||
|
|
||||||
|
"/tmp": "TmpView", |
||||||
|
"/tmp/child": "TmpChildView", |
||||||
|
"/tmp/child/child": "TmpChildChildView", |
||||||
|
}, |
||||||
|
|
||||||
|
getSkipToView: function (v) { |
||||||
|
switch (v) { |
||||||
|
case "red": |
||||||
|
return "SkipToRedView"; |
||||||
|
case "blue": |
||||||
|
return "SkipToBlueView"; |
||||||
|
case "green": |
||||||
|
return "SkipToGreenView"; |
||||||
|
case "yellow": |
||||||
|
return "SkipToYellowView"; |
||||||
|
default : |
||||||
|
return "SkipToRedView"; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
})); |
||||||
|
|
||||||
|
//注册路由
|
||||||
|
BI.View.registerVMRouter(viewRouter, modelRouter); |
||||||
|
|
||||||
|
|
||||||
|
Demo.VM_CONFIG = [{ |
||||||
|
id: 6, |
||||||
|
text: "数据流框架" |
||||||
|
}, { |
||||||
|
pId: 6, |
||||||
|
text: "set,get方法", |
||||||
|
value: "demo.setget" |
||||||
|
}, { |
||||||
|
pId: 6, |
||||||
|
text: "local函数", |
||||||
|
value: "demo.local" |
||||||
|
}, { |
||||||
|
pId: 6, |
||||||
|
text: "skipTo函数", |
||||||
|
value: "demo.skipTo" |
||||||
|
}, { |
||||||
|
pId: 6, |
||||||
|
text: "change函数", |
||||||
|
value: "demo.change" |
||||||
|
}, { |
||||||
|
pId: 6, |
||||||
|
text: "splice和duplicate函数", |
||||||
|
value: "demo.spliceDuplicate" |
||||||
|
}, { |
||||||
|
pId: 6, |
||||||
|
text: "tmp方法", |
||||||
|
value: "demo.tmp" |
||||||
|
}]; |
||||||
@ -0,0 +1,195 @@ |
|||||||
|
//change函数
|
||||||
|
ChangeView = BI.inherit(BI.View, { |
||||||
|
_defaultConfig: function(){ |
||||||
|
return BI.extend(ChangeView.superclass._defaultConfig.apply(this, arguments),{ |
||||||
|
baseCls: "bi-change" |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function(){ |
||||||
|
ChangeView.superclass._init.apply(this, arguments); |
||||||
|
}, |
||||||
|
|
||||||
|
change: function(changed){ |
||||||
|
if(changed.child){ |
||||||
|
this._showModelData(); |
||||||
|
} |
||||||
|
if(changed.superiors){ |
||||||
|
this._showModelData(); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_showModelData: function(){ |
||||||
|
this.outerText.setText("父级Model层数据: " + JSON.stringify(this.model.toJSON())); |
||||||
|
}, |
||||||
|
|
||||||
|
_createOuter: function(){ |
||||||
|
this.outerText = BI.createWidget({ |
||||||
|
type: "bi.label", |
||||||
|
cls: "outer-text", |
||||||
|
whiteSpace: "normal" |
||||||
|
}); |
||||||
|
|
||||||
|
return BI.createWidget({ |
||||||
|
type: "bi.border", |
||||||
|
items: { |
||||||
|
north: { |
||||||
|
el: this.outerText, |
||||||
|
height: 50 |
||||||
|
}, |
||||||
|
center: this._createInner() |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
_createInner: function(){ |
||||||
|
var innerPane = BI.createWidget({ |
||||||
|
type: "bi.absolute", |
||||||
|
cls: "inner" |
||||||
|
}); |
||||||
|
this.addSubVessel("innerPane", innerPane, { |
||||||
|
defaultShowName: "inner" |
||||||
|
}); |
||||||
|
return innerPane; |
||||||
|
}, |
||||||
|
|
||||||
|
render: function(vessel){ |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.center", |
||||||
|
element: vessel, |
||||||
|
items: [this._createOuter()], |
||||||
|
hgap: 100, |
||||||
|
vgap: 100 |
||||||
|
}); |
||||||
|
|
||||||
|
this._showModelData(); |
||||||
|
}, |
||||||
|
|
||||||
|
refresh: function(){ |
||||||
|
this.skipTo("inner", "innerPane", "superiors"); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
ChangeModel = BI.inherit(BI.Model, { |
||||||
|
_defaultConfig: function(){ |
||||||
|
return BI.extend(ChangeModel.superclass._defaultConfig.apply(this, arguments),{ |
||||||
|
superiors: { |
||||||
|
child: "default" |
||||||
|
}, |
||||||
|
child: "default" |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function(){ |
||||||
|
ChangeModel.superclass._init.apply(this, arguments); |
||||||
|
}, |
||||||
|
|
||||||
|
change: function(changed){ |
||||||
|
if(changed.superiors){ |
||||||
|
this.set("child", changed.superiors.child); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
//ChangeView 的子级
|
||||||
|
ChangeInnerView = BI.inherit(BI.View, { |
||||||
|
_init: function(){ |
||||||
|
ChangeInnerView.superclass._init.apply(this, arguments); |
||||||
|
}, |
||||||
|
|
||||||
|
change: function(changed){ |
||||||
|
if(changed.child){ |
||||||
|
this._showModelData(); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_createOuter: function(){ |
||||||
|
var self = this; |
||||||
|
this.text = BI.createWidget({ |
||||||
|
type: "bi.label", |
||||||
|
height: 26 |
||||||
|
}); |
||||||
|
|
||||||
|
this.buttons = BI.createWidget({ |
||||||
|
type: "bi.button_group", |
||||||
|
items: BI.createItems(this.model.get("items"), { |
||||||
|
type: "bi.text_button", |
||||||
|
height: 30, |
||||||
|
textAlign: "center", |
||||||
|
hgap: 20 |
||||||
|
}) |
||||||
|
}); |
||||||
|
|
||||||
|
this.buttons.on(BI.ButtonGroup.EVENT_CHANGE, function(){ |
||||||
|
self.model.set("child", this.getValue()[0]); |
||||||
|
}); |
||||||
|
|
||||||
|
return BI.createWidget({ |
||||||
|
type: "bi.vertical", |
||||||
|
vgap: 20, |
||||||
|
items: [{ |
||||||
|
type: "bi.center", |
||||||
|
items: [this.buttons], |
||||||
|
height: 30 |
||||||
|
}, this.text] |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
_showModelData: function(){ |
||||||
|
this.text.setText("子级Model层数据: " + JSON.stringify(this.model.toJSON())); |
||||||
|
}, |
||||||
|
|
||||||
|
render: function(vessel){ |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.center", |
||||||
|
element: vessel, |
||||||
|
items: [this._createOuter()] |
||||||
|
}); |
||||||
|
this._showModelData(); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
ChangeInnerModel = BI.inherit(BI.Model, { |
||||||
|
_defaultConfig: function(){ |
||||||
|
return BI.extend(ChangeInnerModel.superclass._defaultConfig.apply(this, arguments),{ |
||||||
|
|
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_static: function(){ |
||||||
|
return { |
||||||
|
items: [{ |
||||||
|
text: "Type-1", |
||||||
|
value: "First", |
||||||
|
cls: "type-first mvc-button" |
||||||
|
}, { |
||||||
|
text: "Type-2", |
||||||
|
value: "Second", |
||||||
|
cls: "type-second mvc-button" |
||||||
|
}, { |
||||||
|
text: "Type-3", |
||||||
|
value: "third", |
||||||
|
cls: "type-third mvc-button" |
||||||
|
}] |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function(){ |
||||||
|
ChangeInnerModel.superclass._init.apply(this, arguments); |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
Demo.Func = BI.inherit(BI.Widget, { |
||||||
|
render: function () { |
||||||
|
var view = BI.View.createView("/change", {}, { |
||||||
|
element: this |
||||||
|
}); |
||||||
|
view.populate(); |
||||||
|
}, |
||||||
|
|
||||||
|
mounted: function () { |
||||||
|
} |
||||||
|
}); |
||||||
|
BI.shortcut("demo.change", Demo.Func); |
||||||
@ -0,0 +1,173 @@ |
|||||||
|
//local函数
|
||||||
|
LocalView = BI.inherit(BI.View, { |
||||||
|
_defaultConfig: function(){ |
||||||
|
return BI.extend(LocalView.superclass._defaultConfig.apply(this, arguments),{ |
||||||
|
baseCls: "bi-local" |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function(){ |
||||||
|
LocalView.superclass._init.apply(this, arguments); |
||||||
|
this.buttons = {}; |
||||||
|
}, |
||||||
|
|
||||||
|
_addElement2Vessel: function(id){ |
||||||
|
var self = this; |
||||||
|
this.buttons[id] = this.elementVessel.addItem({ |
||||||
|
type: "bi.text_button", |
||||||
|
text: "Button:" + id, |
||||||
|
width: 180, |
||||||
|
height: 22, |
||||||
|
cls: "delete-button button", |
||||||
|
handler: function(){ |
||||||
|
self.set("delete", id); |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_deleteElement: function(id){ |
||||||
|
this.buttons[id] && this.buttons[id].destroy(); |
||||||
|
delete this.buttons[id]; |
||||||
|
}, |
||||||
|
|
||||||
|
_createTop: function(){ |
||||||
|
var self = this; |
||||||
|
this.elementVessel = BI.createWidget({ |
||||||
|
type: "bi.left", |
||||||
|
height: 200, |
||||||
|
cls: "vessel-border", |
||||||
|
scrollable: true, |
||||||
|
vgap: 10, |
||||||
|
hgap: 10 |
||||||
|
}); |
||||||
|
|
||||||
|
return BI.createWidget({ |
||||||
|
type: "bi.vertical", |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
el: { |
||||||
|
type: "bi.text_button", |
||||||
|
text: "点击添加元素", |
||||||
|
cls: "top-button", |
||||||
|
handler: function(){ |
||||||
|
self.model.set("add", true); |
||||||
|
}, |
||||||
|
height: 30 |
||||||
|
} |
||||||
|
}, |
||||||
|
this.elementVessel |
||||||
|
] |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_showModelData: function(){ |
||||||
|
this.text.setText(JSON.stringify(this.model.toJSON())); |
||||||
|
}, |
||||||
|
|
||||||
|
_createCenter: function(){ |
||||||
|
var modelData = BI.createWidget({ |
||||||
|
type: "bi.center", |
||||||
|
vgap: 10, |
||||||
|
hgap: 10, |
||||||
|
cls: "vessel-border", |
||||||
|
height: 200, |
||||||
|
items: [{ |
||||||
|
el: this.text = BI.createWidget({ |
||||||
|
type: "bi.label", |
||||||
|
hgap: 30, |
||||||
|
textHeight: 30, |
||||||
|
whiteSpace: "normal" |
||||||
|
}) |
||||||
|
}] |
||||||
|
}); |
||||||
|
|
||||||
|
return BI.createWidget({ |
||||||
|
type: "bi.vertical", |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
cls: "bottom-label", |
||||||
|
text: "Model层数据", |
||||||
|
height: 30 |
||||||
|
} |
||||||
|
}, |
||||||
|
modelData |
||||||
|
] |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
render: function(vessel){ |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.vertical", |
||||||
|
element: vessel, |
||||||
|
items: [{ |
||||||
|
el :this._createTop() |
||||||
|
},{ |
||||||
|
el : this._createCenter() |
||||||
|
}], |
||||||
|
hgap: 50, |
||||||
|
vgap: 20 |
||||||
|
}); |
||||||
|
|
||||||
|
this._showModelData(); |
||||||
|
}, |
||||||
|
|
||||||
|
local: function(){ |
||||||
|
if(this.model.has("add")){ |
||||||
|
var add = this.model.get("add"); |
||||||
|
this._addElement2Vessel(this.model.getEditing()); |
||||||
|
this._showModelData(); |
||||||
|
return true; |
||||||
|
} |
||||||
|
if(this.model.has("delete")){ |
||||||
|
var id = this.model.get("delete"); |
||||||
|
this._deleteElement(id); |
||||||
|
this._showModelData(); |
||||||
|
return true; |
||||||
|
} |
||||||
|
return false; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
LocalModel = BI.inherit(BI.Model, { |
||||||
|
_defaultConfig: function(){ |
||||||
|
return BI.extend(LocalModel.superclass._defaultConfig.apply(this, arguments),{ |
||||||
|
|
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function(){ |
||||||
|
LocalModel.superclass._init.apply(this, arguments); |
||||||
|
}, |
||||||
|
|
||||||
|
local: function(){ |
||||||
|
if(this.has("add")){ |
||||||
|
this.get("add"); |
||||||
|
var id = BI.UUID(); |
||||||
|
this.set(id, "这是新增的属性:"+id); |
||||||
|
this.setEditing(id); |
||||||
|
return true; |
||||||
|
} |
||||||
|
if(this.has("delete")){ |
||||||
|
var id = this.get("delete"); |
||||||
|
this.unset(id); |
||||||
|
return true; |
||||||
|
} |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
Demo.Func = BI.inherit(BI.Widget, { |
||||||
|
render: function () { |
||||||
|
var view = BI.View.createView("/local", {}, { |
||||||
|
element: this |
||||||
|
}); |
||||||
|
view.populate(); |
||||||
|
}, |
||||||
|
|
||||||
|
mounted: function () { |
||||||
|
} |
||||||
|
}); |
||||||
|
BI.shortcut("demo.local", Demo.Func); |
||||||
@ -0,0 +1,129 @@ |
|||||||
|
//set、get函数
|
||||||
|
SetGetView = BI.inherit(BI.View, { |
||||||
|
_defaultConfig: function () { |
||||||
|
return BI.extend(SetGetView.superclass._defaultConfig.apply(this, arguments), { |
||||||
|
baseCls: "bi-set-get" |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function () { |
||||||
|
SetGetView.superclass._init.apply(this, arguments); |
||||||
|
}, |
||||||
|
|
||||||
|
change: function (changed) { |
||||||
|
this._showModelData(); |
||||||
|
}, |
||||||
|
|
||||||
|
_createLeft: function () { |
||||||
|
var self = this; |
||||||
|
return (this.left = BI.createWidget({ |
||||||
|
type: "bi.border", |
||||||
|
items: { |
||||||
|
north: { |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
cls: "left-title", |
||||||
|
text: "get、set用法:", |
||||||
|
height: 30 |
||||||
|
}, |
||||||
|
height: 30 |
||||||
|
}, |
||||||
|
center: { |
||||||
|
el: { |
||||||
|
type: "bi.button_group", |
||||||
|
items: BI.createItems(this.model.get("arr"), { |
||||||
|
type: "bi.text_button", |
||||||
|
cls: "left-nav", |
||||||
|
height: 30, |
||||||
|
handler: function (v) { |
||||||
|
self.model.set("click", v); |
||||||
|
} |
||||||
|
}), |
||||||
|
layouts: [{ |
||||||
|
type: "bi.vertical" |
||||||
|
}] |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
})) |
||||||
|
}, |
||||||
|
|
||||||
|
_showModelData: function () { |
||||||
|
this.text.setText(JSON.stringify(this.model.toJSON())); |
||||||
|
}, |
||||||
|
|
||||||
|
_createRight: function () { |
||||||
|
return (this.right = BI.createWidget({ |
||||||
|
type: "bi.border", |
||||||
|
items: { |
||||||
|
north: { |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
cls: "right-title", |
||||||
|
text: "Model层数据", |
||||||
|
height: 30 |
||||||
|
}, |
||||||
|
height: 30 |
||||||
|
}, |
||||||
|
center: { |
||||||
|
el: this.text = BI.createWidget({ |
||||||
|
type: "bi.label", |
||||||
|
whiteSpace: "normal", |
||||||
|
textHeight: 50 |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
})) |
||||||
|
}, |
||||||
|
|
||||||
|
render: function (vessel) { |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.center", |
||||||
|
element: vessel, |
||||||
|
items: [{ |
||||||
|
el: this._createLeft() |
||||||
|
}, { |
||||||
|
el: this._createRight() |
||||||
|
}], |
||||||
|
hgap: 50, |
||||||
|
vgap: 100 |
||||||
|
}) |
||||||
|
this._showModelData(); |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
SetGetModel = BI.inherit(BI.Model, { |
||||||
|
_defaultConfig: function () { |
||||||
|
return BI.extend(SetGetModel.superclass._defaultConfig.apply(this, arguments), { |
||||||
|
arr: [ |
||||||
|
{text: "item1", value: 1}, |
||||||
|
{text: "item2", value: 2}, |
||||||
|
{text: "item3", value: 3}, |
||||||
|
{text: "item4", value: 4}, |
||||||
|
{text: "item5", value: 5}, |
||||||
|
{text: "item6", value: 6}, |
||||||
|
{text: "item7", value: 7}, |
||||||
|
{text: "item8", value: 8} |
||||||
|
] |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function () { |
||||||
|
SetGetModel.superclass._init.apply(this, arguments); |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
Demo.Func = BI.inherit(BI.Widget, { |
||||||
|
render: function () { |
||||||
|
var view = BI.View.createView("/setget", {}, { |
||||||
|
element: this |
||||||
|
}); |
||||||
|
view.populate(); |
||||||
|
}, |
||||||
|
|
||||||
|
mounted: function () { |
||||||
|
} |
||||||
|
}); |
||||||
|
BI.shortcut("demo.setget", Demo.Func); |
||||||
@ -0,0 +1,267 @@ |
|||||||
|
//skipTo 函数
|
||||||
|
SkipToView = BI.inherit(BI.View, { |
||||||
|
_defaultConfig: function(){ |
||||||
|
return BI.extend(SkipToView.superclass._defaultConfig.apply(this, arguments),{ |
||||||
|
baseCls: "bi-skip-to" |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function(){ |
||||||
|
SkipToView.superclass._init.apply(this, arguments); |
||||||
|
}, |
||||||
|
|
||||||
|
_createNav: function(){ |
||||||
|
var self = this; |
||||||
|
var nav = BI.createWidget({ |
||||||
|
type: "bi.button_group", |
||||||
|
cls: "top-nav", |
||||||
|
items: BI.createItems(this.model.get("items"), { |
||||||
|
type: "bi.text_button", |
||||||
|
height: 30, |
||||||
|
textAlign: "center", |
||||||
|
hgap: 20 |
||||||
|
}), |
||||||
|
layouts: [{ |
||||||
|
type: "bi.left", |
||||||
|
height: 40, |
||||||
|
vgap: 5, |
||||||
|
hgap: 3 |
||||||
|
}] |
||||||
|
}); |
||||||
|
nav.on(BI.ButtonGroup.EVENT_CHANGE, function(){ |
||||||
|
self.skipTo(this.getValue()[0], "pane", this.getValue()[0]); |
||||||
|
}); |
||||||
|
return nav; |
||||||
|
}, |
||||||
|
|
||||||
|
_createPane: function(){ |
||||||
|
var pane = BI.createWidget({ |
||||||
|
type:"bi.center", |
||||||
|
cls: "center-pane", |
||||||
|
height: 200 |
||||||
|
}); |
||||||
|
this.addSubVessel("pane", pane, { |
||||||
|
defaultShowName: "green" |
||||||
|
}); |
||||||
|
return pane; |
||||||
|
}, |
||||||
|
|
||||||
|
render: function(vessel){ |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.vertical", |
||||||
|
element: vessel, |
||||||
|
items: [this._createNav(), this._createPane()], |
||||||
|
vgap: 10, |
||||||
|
hgap: 10 |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
refresh: function(){ |
||||||
|
this.skipTo("green", "pane", "green"); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
SkipToModel = BI.inherit(BI.Model, { |
||||||
|
_defaultConfig: function(){ |
||||||
|
return BI.extend(SkipToModel.superclass._defaultConfig.apply(this, arguments),{ |
||||||
|
"red": { |
||||||
|
text: "hotpink" |
||||||
|
},"blue": { |
||||||
|
text: "cornflowerblue" |
||||||
|
},"green": { |
||||||
|
text: "darkcyan" |
||||||
|
},"yellow": { |
||||||
|
text: "darkgoldenrod" |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
_static: function(){ |
||||||
|
return { |
||||||
|
items: [{ |
||||||
|
text: "hotpink", |
||||||
|
value: "red", |
||||||
|
cls: "red-pane mvc-button" |
||||||
|
}, { |
||||||
|
text: "cornflowerblue", |
||||||
|
value: "blue", |
||||||
|
cls: "blue-pane mvc-button" |
||||||
|
}, { |
||||||
|
text: "darkcyan", |
||||||
|
value: "green", |
||||||
|
cls: "green-pane mvc-button", |
||||||
|
selected: true |
||||||
|
}, { |
||||||
|
text: "darkgoldenrod", |
||||||
|
value: "yellow", |
||||||
|
cls: "yellow-pane mvc-button" |
||||||
|
}] |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function(){ |
||||||
|
SkipToModel.superclass._init.apply(this, arguments); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
//Red pane #FF69B4
|
||||||
|
SkipToRedView = BI.inherit(BI.View, { |
||||||
|
_init: function(){ |
||||||
|
SkipToRedView.superclass._init.apply(this, arguments); |
||||||
|
}, |
||||||
|
|
||||||
|
render: function(vessel){ |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.absolute", |
||||||
|
element: vessel, |
||||||
|
cls: "red-pane", |
||||||
|
items: [{ |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "Model Data: " + JSON.stringify(this.model.toJSON()), |
||||||
|
hgap: 20, |
||||||
|
height: 26 |
||||||
|
} |
||||||
|
}] |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
SkipToRedModel = BI.inherit(BI.Model, { |
||||||
|
_defaultConfig: function(){ |
||||||
|
return BI.extend(SetGetModel.superclass._defaultConfig.apply(this, arguments),{ |
||||||
|
|
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function(){ |
||||||
|
SkipToRedModel.superclass._init.apply(this, arguments); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
//Blue pane #6495ED
|
||||||
|
SkipToBlueView = BI.inherit(BI.View, { |
||||||
|
_init: function(){ |
||||||
|
SkipToBlueView.superclass._init.apply(this, arguments); |
||||||
|
}, |
||||||
|
|
||||||
|
render: function(vessel){ |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.absolute", |
||||||
|
element: vessel, |
||||||
|
cls: "blue-pane", |
||||||
|
items: [{ |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "Model Data: " + JSON.stringify(this.model.toJSON()), |
||||||
|
hgap: 20, |
||||||
|
height: 26 |
||||||
|
}, |
||||||
|
left: 0, |
||||||
|
right: 0, |
||||||
|
top: 0, |
||||||
|
bottom: 0 |
||||||
|
}] |
||||||
|
}) |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
SkipToBlueModel = BI.inherit(BI.Model, { |
||||||
|
_defaultConfig: function(){ |
||||||
|
return BI.extend(SetGetModel.superclass._defaultConfig.apply(this, arguments),{ |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function(){ |
||||||
|
SkipToGreenModel.superclass._init.apply(this, arguments); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
//Dark green pane #008B8B
|
||||||
|
SkipToGreenView = BI.inherit(BI.View, { |
||||||
|
_init: function(){ |
||||||
|
SkipToGreenView.superclass._init.apply(this, arguments); |
||||||
|
}, |
||||||
|
|
||||||
|
render: function(vessel){ |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.absolute", |
||||||
|
element: vessel, |
||||||
|
cls: "green-pane", |
||||||
|
items: [{ |
||||||
|
el:{ |
||||||
|
type: "bi.label", |
||||||
|
text: "Model Data: " + JSON.stringify(this.model.toJSON()), |
||||||
|
hgap: 20, |
||||||
|
height: 26 |
||||||
|
}, |
||||||
|
left: 0, |
||||||
|
right: 0, |
||||||
|
top: 0, |
||||||
|
bottom: 0 |
||||||
|
}] |
||||||
|
}) |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
SkipToGreenModel = BI.inherit(BI.Model, { |
||||||
|
_defaultConfig: function(){ |
||||||
|
return BI.extend(SetGetModel.superclass._defaultConfig.apply(this, arguments),{ |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function(){ |
||||||
|
SkipToGreenModel.superclass._init.apply(this, arguments); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
//Dark yellow pane #B8860B
|
||||||
|
SkipToYellowView = BI.inherit(BI.View, { |
||||||
|
_init: function(){ |
||||||
|
SkipToYellowView.superclass._init.apply(this, arguments); |
||||||
|
}, |
||||||
|
|
||||||
|
render: function(vessel){ |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.absolute", |
||||||
|
element: vessel, |
||||||
|
cls: "yellow-pane", |
||||||
|
items: [{ |
||||||
|
el:{ |
||||||
|
type: "bi.label", |
||||||
|
text: "Model Data: " + JSON.stringify(this.model.toJSON()), |
||||||
|
hgap: 20, |
||||||
|
height: 26 |
||||||
|
}, |
||||||
|
left: 0, |
||||||
|
right: 0, |
||||||
|
top: 0, |
||||||
|
bottom: 0 |
||||||
|
}] |
||||||
|
}) |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
SkipToYellowModel = BI.inherit(BI.Model, { |
||||||
|
_defaultConfig: function(){ |
||||||
|
return BI.extend(SetGetModel.superclass._defaultConfig.apply(this, arguments),{ |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function(){ |
||||||
|
SkipToYellowModel.superclass._init.apply(this, arguments); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
Demo.Func = BI.inherit(BI.Widget, { |
||||||
|
render: function () { |
||||||
|
var view = BI.View.createView("/skipTo", {}, { |
||||||
|
element: this |
||||||
|
}); |
||||||
|
view.populate(); |
||||||
|
}, |
||||||
|
|
||||||
|
mounted: function () { |
||||||
|
} |
||||||
|
}); |
||||||
|
BI.shortcut("demo.skipTo", Demo.Func); |
||||||
@ -0,0 +1,158 @@ |
|||||||
|
//splice和duplicate函数
|
||||||
|
SpliceDuplicateView = BI.inherit(BI.View, { |
||||||
|
_defaultConfig: function () { |
||||||
|
return BI.extend(SpliceDuplicateView.superclass._defaultConfig.apply(this, arguments), { |
||||||
|
baseCls: "bi-splice-duplicate" |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function () { |
||||||
|
SpliceDuplicateView.superclass._init.apply(this, arguments); |
||||||
|
this.children = {}; |
||||||
|
}, |
||||||
|
|
||||||
|
splice: function (old, key1, key2) { |
||||||
|
this.children[key1].destroy(); |
||||||
|
delete this.children[key1]; |
||||||
|
this._showModelData(); |
||||||
|
}, |
||||||
|
|
||||||
|
duplicate: function (copy, key1, key2) { |
||||||
|
this.add(copy); |
||||||
|
this._showModelData(); |
||||||
|
}, |
||||||
|
|
||||||
|
_showModelData: function () { |
||||||
|
//这里只是为了输出this.model.data 原则上是不允许这么调用的
|
||||||
|
this.text.setText("父级数据：" + JSON.stringify(this.model.data)); |
||||||
|
}, |
||||||
|
|
||||||
|
render: function (vessel) { |
||||||
|
this.text = BI.createWidget({ |
||||||
|
type: "bi.label", |
||||||
|
height: 50, |
||||||
|
cls: "superiors-label" |
||||||
|
}); |
||||||
|
this.container = BI.createWidget({ |
||||||
|
type: "bi.vertical", |
||||||
|
element: vessel, |
||||||
|
items: [this.text], |
||||||
|
hgap: 100, |
||||||
|
vgap: 10 |
||||||
|
}); |
||||||
|
this._showModelData(); |
||||||
|
}, |
||||||
|
|
||||||
|
add: function (id) { |
||||||
|
this.children[id] = BI.createWidget({ |
||||||
|
type: "bi.center", |
||||||
|
hgap: 10, |
||||||
|
vgap: 10 |
||||||
|
}); |
||||||
|
this.addSubVessel(id, this.children[id], { |
||||||
|
defaultShowName: "sdSub" |
||||||
|
}); |
||||||
|
this.skipTo("sdSub", id, id); |
||||||
|
this.container.addItem(this.children[id]); |
||||||
|
}, |
||||||
|
|
||||||
|
refresh: function () { |
||||||
|
var self = this; |
||||||
|
BI.each(this.model.toJSON(), function (key, value) { |
||||||
|
if (!self.children[key]) { |
||||||
|
self.add(key); |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
SpliceDuplicateModel = BI.inherit(BI.Model, { |
||||||
|
_defaultConfig: function () { |
||||||
|
return BI.extend(SpliceDuplicateModel.superclass._defaultConfig.apply(this, arguments), { |
||||||
|
"1": { |
||||||
|
name: "名字" |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
splice: function (key1) { |
||||||
|
delete this.data[key1]; |
||||||
|
}, |
||||||
|
|
||||||
|
similar: function (value, key1) { |
||||||
|
value.name = BI.Func.createDistinctName(this.data, this.get(key1).name); |
||||||
|
return value; |
||||||
|
}, |
||||||
|
|
||||||
|
duplicate: function (copy, key1) { |
||||||
|
this.data[copy] = this.get(copy); |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function () { |
||||||
|
SpliceDuplicateModel.superclass._init.apply(this, arguments); |
||||||
|
}, |
||||||
|
|
||||||
|
refresh: function () { |
||||||
|
this.data = BI.deepClone(this.toJSON()); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
SDSubView = BI.inherit(BI.View, { |
||||||
|
_defaultConfig: function () { |
||||||
|
return SDSubView.superclass._defaultConfig.apply(this, arguments); |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function () { |
||||||
|
SDSubView.superclass._init.apply(this, arguments); |
||||||
|
}, |
||||||
|
|
||||||
|
render: function (vessel) { |
||||||
|
var self = this; |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.center", |
||||||
|
element: vessel, |
||||||
|
cls: "sd-child", |
||||||
|
height: 30, |
||||||
|
items: [{ |
||||||
|
type: "bi.text_button", |
||||||
|
height: 30, |
||||||
|
text: "复制 " + this.model.get("name") + " , 数据：" + JSON.stringify(this.model.toJSON()), |
||||||
|
cls: "right-button-add", |
||||||
|
handler: function () { |
||||||
|
self.model.copy(); |
||||||
|
} |
||||||
|
}, { |
||||||
|
type: "bi.text_button", |
||||||
|
height: 30, |
||||||
|
text: "删除", |
||||||
|
cls: "right-button-del", |
||||||
|
handler: function () { |
||||||
|
self.model.destroy(); |
||||||
|
} |
||||||
|
}] |
||||||
|
}) |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
SDSubModel = BI.inherit(BI.Model, { |
||||||
|
_defaultConfig: function () { |
||||||
|
return BI.extend(SDSubModel.superclass._defaultConfig.apply(this, arguments), {}); |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function () { |
||||||
|
SDSubModel.superclass._init.apply(this, arguments); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
Demo.Func = BI.inherit(BI.Widget, { |
||||||
|
render: function () { |
||||||
|
var view = BI.View.createView("/spliceDuplicate", {}, { |
||||||
|
element: this |
||||||
|
}); |
||||||
|
view.populate(); |
||||||
|
}, |
||||||
|
|
||||||
|
mounted: function () { |
||||||
|
} |
||||||
|
}); |
||||||
|
BI.shortcut("demo.spliceDuplicate", Demo.Func); |
||||||
@ -0,0 +1,286 @@ |
|||||||
|
TmpView = BI.inherit(BI.View, { |
||||||
|
_defaultConfig: function(){ |
||||||
|
return BI.extend(TmpView.superclass._defaultConfig.apply(this, arguments),{ |
||||||
|
baseCls: "bi-tmp" |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function(){ |
||||||
|
TmpView.superclass._init.apply(this, arguments); |
||||||
|
}, |
||||||
|
|
||||||
|
change: function(changed){ |
||||||
|
if(changed.data1){ |
||||||
|
this._showModelData(); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_showModelData: function(){ |
||||||
|
this.text.setText("父级Model层数据为："+JSON.stringify(this.model.toJSON())); |
||||||
|
}, |
||||||
|
|
||||||
|
_createMain: function(){ |
||||||
|
var self = this; |
||||||
|
return BI.createWidget({ |
||||||
|
type: "bi.border", |
||||||
|
items: { |
||||||
|
west: { |
||||||
|
el: { |
||||||
|
type: "bi.vertical", |
||||||
|
vgap: 10, |
||||||
|
items: [{ |
||||||
|
el: (this.text = BI.createWidget({ |
||||||
|
type: "bi.label", |
||||||
|
whiteSpace: "normal" |
||||||
|
})) |
||||||
|
}, { |
||||||
|
el: { |
||||||
|
type: "bi.text_button", |
||||||
|
cls: "tmp-button mvc-button", |
||||||
|
text: "点击触发事件tmp('data1', {child: {type: {value: \"临时数据\"}}})", |
||||||
|
height: 30, |
||||||
|
handler: function(){ |
||||||
|
self.model.tmp("data1", { |
||||||
|
child: { |
||||||
|
type: { |
||||||
|
value: "临时数据" |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
}, { |
||||||
|
el: { |
||||||
|
type: "bi.text_button", |
||||||
|
cls: "tmp-button mvc-button", |
||||||
|
text: "点击触发事件submit", |
||||||
|
height: 30, |
||||||
|
handler: function(){ |
||||||
|
self.model.submit(); |
||||||
|
} |
||||||
|
} |
||||||
|
}, { |
||||||
|
el: { |
||||||
|
type: "bi.text_button", |
||||||
|
cls: "tmp-button mvc-button", |
||||||
|
text: "点击跳转到右方", |
||||||
|
height: 30, |
||||||
|
handler: function(){ |
||||||
|
self.addSubVessel("test", self.center).skipTo("child", "test", "data1"); |
||||||
|
} |
||||||
|
} |
||||||
|
}] |
||||||
|
}, |
||||||
|
width: 200 |
||||||
|
}, |
||||||
|
center: { |
||||||
|
el: (this.center = BI.createWidget()) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
render: function(vessel){ |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.center", |
||||||
|
element: vessel, |
||||||
|
items: [{ |
||||||
|
el: this._createMain() |
||||||
|
}], |
||||||
|
hgap: 50, |
||||||
|
vgap: 100 |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
refresh: function(){ |
||||||
|
this._showModelData(); |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
TmpModel = BI.inherit(BI.Model, { |
||||||
|
_defaultConfig: function(){ |
||||||
|
return BI.extend(TmpModel.superclass._defaultConfig.apply(this, arguments),{ |
||||||
|
data1: { |
||||||
|
child: { |
||||||
|
type: { |
||||||
|
value: "这是一个测试数据" |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
data2: "test" |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function(){ |
||||||
|
TmpModel.superclass._init.apply(this, arguments); |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
|
||||||
|
TmpChildView = BI.inherit(BI.View, { |
||||||
|
_defaultConfig: function(){ |
||||||
|
return BI.extend(TmpChildView.superclass._defaultConfig.apply(this, arguments),{ |
||||||
|
baseCls: "bi-tmp-child" |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function(){ |
||||||
|
TmpChildView.superclass._init.apply(this, arguments); |
||||||
|
}, |
||||||
|
|
||||||
|
change: function(changed){ |
||||||
|
if(changed.child){ |
||||||
|
this._showModelData(); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_showModelData: function(){ |
||||||
|
this.text.setText("子级Model层数据为："+JSON.stringify(this.model.toJSON())); |
||||||
|
}, |
||||||
|
|
||||||
|
_createMain: function(){ |
||||||
|
var self = this; |
||||||
|
return BI.createWidget({ |
||||||
|
type: "bi.border", |
||||||
|
items: { |
||||||
|
west: { |
||||||
|
el: { |
||||||
|
type: "bi.vertical", |
||||||
|
vgap: 10, |
||||||
|
items: [{ |
||||||
|
el: (this.text = BI.createWidget({ |
||||||
|
type: "bi.label", |
||||||
|
whiteSpace: "normal" |
||||||
|
})) |
||||||
|
}, { |
||||||
|
el: { |
||||||
|
type: "bi.text_button", |
||||||
|
cls: "tmp-button mvc-button", |
||||||
|
text: "点击触发事件set", |
||||||
|
height: 30, |
||||||
|
handler: function(){ |
||||||
|
self.set("child", { |
||||||
|
type: { |
||||||
|
value: "值改变了" |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
}, { |
||||||
|
el: { |
||||||
|
type: "bi.text_button", |
||||||
|
cls: "tmp-button mvc-button", |
||||||
|
text: "点击跳转到右方", |
||||||
|
height: 30, |
||||||
|
handler: function(){ |
||||||
|
self.addSubVessel("test", self.center).skipTo("child", "test", "child"); |
||||||
|
} |
||||||
|
} |
||||||
|
}] |
||||||
|
}, |
||||||
|
width: 200 |
||||||
|
}, |
||||||
|
center: { |
||||||
|
el: (this.center = BI.createWidget()) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
render: function(vessel){ |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.center", |
||||||
|
element: vessel, |
||||||
|
items: [{ |
||||||
|
el: this._createMain() |
||||||
|
}], |
||||||
|
hgap: 50 |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
refresh: function(){ |
||||||
|
this._showModelData(); |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
TmpChildModel = BI.inherit(BI.Model, { |
||||||
|
_defaultConfig: function(){ |
||||||
|
return BI.extend(TmpChildModel.superclass._defaultConfig.apply(this, arguments),{ |
||||||
|
|
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function(){ |
||||||
|
TmpChildModel.superclass._init.apply(this, arguments); |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
TmpChildChildView = BI.inherit(BI.View, { |
||||||
|
_defaultConfig: function(){ |
||||||
|
return BI.extend(TmpChildChildView.superclass._defaultConfig.apply(this, arguments),{ |
||||||
|
baseCls: "bi-tmp-child-child" |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function(){ |
||||||
|
TmpChildChildView.superclass._init.apply(this, arguments); |
||||||
|
}, |
||||||
|
|
||||||
|
change: function(changed){ |
||||||
|
if(changed.type){ |
||||||
|
this._showModelData(); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_showModelData: function(){ |
||||||
|
this.text.setText("叶节点数据为："+JSON.stringify(this.model.toJSON())); |
||||||
|
}, |
||||||
|
|
||||||
|
_createMain: function(){ |
||||||
|
return (this.text = BI.createWidget({ |
||||||
|
type: "bi.label", |
||||||
|
whiteSpace: "normal" |
||||||
|
})) |
||||||
|
}, |
||||||
|
|
||||||
|
render: function(vessel){ |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.center", |
||||||
|
element: vessel, |
||||||
|
items: [{ |
||||||
|
el: this._createMain() |
||||||
|
}], |
||||||
|
hgap: 50 |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
refresh: function(){ |
||||||
|
this._showModelData(); |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
TmpChildChildModel = BI.inherit(BI.Model, { |
||||||
|
_defaultConfig: function(){ |
||||||
|
return BI.extend(TmpChildChildModel.superclass._defaultConfig.apply(this, arguments),{ |
||||||
|
|
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function(){ |
||||||
|
TmpChildChildModel.superclass._init.apply(this, arguments); |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
|
||||||
|
Demo.Func = BI.inherit(BI.Widget, { |
||||||
|
render: function () { |
||||||
|
var view = BI.View.createView("/tmp", {}, { |
||||||
|
element: this |
||||||
|
}); |
||||||
|
view.populate(); |
||||||
|
}, |
||||||
|
|
||||||
|
mounted: function () { |
||||||
|
} |
||||||
|
}); |
||||||
|
BI.shortcut("demo.tmp", Demo.Func); |
||||||
@ -0,0 +1,100 @@ |
|||||||
|
Demo.Arrangement = BI.inherit(BI.Widget, { |
||||||
|
|
||||||
|
beforeCreate: function () { |
||||||
|
this.index = 0; |
||||||
|
}, |
||||||
|
|
||||||
|
_createItem: function () { |
||||||
|
var self = this; |
||||||
|
var item = BI.createWidget({ |
||||||
|
type: "bi.text_button", |
||||||
|
id: this.index, |
||||||
|
text: "点我删掉", |
||||||
|
cls: "layout-bg" + BI.random(1, 8), |
||||||
|
handler: function () { |
||||||
|
self.arrangement.deleteRegion(this.attr("id")); |
||||||
|
} |
||||||
|
}); |
||||||
|
this.index++; |
||||||
|
return item; |
||||||
|
}, |
||||||
|
|
||||||
|
render: function () { |
||||||
|
var self = this; |
||||||
|
this.arrangement = BI.createWidget({ |
||||||
|
type: "bi.arrangement", |
||||||
|
layoutType: BI.Arrangement.LAYOUT_TYPE.GRID, |
||||||
|
cls: "bi-border", |
||||||
|
width: 800, |
||||||
|
height: 400, |
||||||
|
items: [] |
||||||
|
}); |
||||||
|
var drag = BI.createWidget({ |
||||||
|
type: "bi.label", |
||||||
|
cls: "bi-border", |
||||||
|
width: 70, |
||||||
|
height: 25, |
||||||
|
text: "drag me" |
||||||
|
}); |
||||||
|
|
||||||
|
drag.element.draggable({ |
||||||
|
revert: true, |
||||||
|
cursorAt: {left: 0, top: 0}, |
||||||
|
drag: function (e, ui) { |
||||||
|
self.arrangement.setPosition({ |
||||||
|
left: ui.position.left, |
||||||
|
top: ui.position.top |
||||||
|
}, { |
||||||
|
width: 300, |
||||||
|
height: 200 |
||||||
|
}) |
||||||
|
}, |
||||||
|
stop: function (e, ui) { |
||||||
|
self.arrangement.addRegion({ |
||||||
|
el: self._createItem() |
||||||
|
}); |
||||||
|
}, |
||||||
|
helper: function (e) { |
||||||
|
var helper = self.arrangement.getHelper(); |
||||||
|
return helper.element; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.absolute", |
||||||
|
element: this, |
||||||
|
items: [{ |
||||||
|
el: drag, |
||||||
|
left: 30, |
||||||
|
top: 450 |
||||||
|
}, { |
||||||
|
el: this.arrangement, |
||||||
|
left: 30, |
||||||
|
top: 30 |
||||||
|
}, { |
||||||
|
el: { |
||||||
|
type: "bi.button", |
||||||
|
text: "getAllRegions", |
||||||
|
height: 25, |
||||||
|
handler: function () { |
||||||
|
var items = []; |
||||||
|
BI.each(self.arrangement.getAllRegions(), function (i, region) { |
||||||
|
items.push({ |
||||||
|
id: region.id, |
||||||
|
left: region.left, |
||||||
|
top: region.top, |
||||||
|
width: region.width, |
||||||
|
height: region.height |
||||||
|
}); |
||||||
|
}); |
||||||
|
BI.Msg.toast(JSON.stringify(items)); |
||||||
|
} |
||||||
|
}, |
||||||
|
left: 230, |
||||||
|
top: 450 |
||||||
|
}] |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
BI.shortcut("demo.arrangement", Demo.Arrangement); |
||||||
@ -0,0 +1,123 @@ |
|||||||
|
@import "index"; |
||||||
|
|
||||||
|
.mvc-button { |
||||||
|
&:hover, &.hover { |
||||||
|
.opacity(0.5); |
||||||
|
} |
||||||
|
&.active, &:active { |
||||||
|
.opacity(0.5) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.bi-set-get { |
||||||
|
& .left-title, & .right-title { |
||||||
|
background: #0088cc; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
& .left-nav { |
||||||
|
border-bottom: 1px solid #cccccc; |
||||||
|
&.active, &:active { |
||||||
|
color: #ffffff; |
||||||
|
background-color: #d9534f; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.bi-local { |
||||||
|
& .top-button { |
||||||
|
background-color: #448eea; |
||||||
|
color: #ffffff |
||||||
|
} |
||||||
|
& .bottom-label { |
||||||
|
background-color: #EA4738; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
& .delete-button { |
||||||
|
background-color: #008B8B; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
& .vessel-border { |
||||||
|
border-left: 1px solid #cccccc; |
||||||
|
border-bottom: 1px solid #cccccc; |
||||||
|
border-right: 1px solid #cccccc; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.bi-event { |
||||||
|
& .title { |
||||||
|
background: #0088cc; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
& .front { |
||||||
|
background: #ADD8E6; |
||||||
|
} |
||||||
|
& .nav { |
||||||
|
border: 1px solid #cccccc; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.bi-skip-to { |
||||||
|
color: #ffffff; |
||||||
|
|
||||||
|
& .red-pane { |
||||||
|
background-color: #0088cc; |
||||||
|
} |
||||||
|
& .blue-pane { |
||||||
|
background-color: #6495ED; |
||||||
|
} |
||||||
|
& .green-pane { |
||||||
|
background-color: #008B8B; |
||||||
|
} |
||||||
|
& .yellow-pane { |
||||||
|
background-color: #B8860B; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.bi-change { |
||||||
|
& .outer-text { |
||||||
|
background-color: #0088cc; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
& .inner { |
||||||
|
border-left: 1px solid #cccccc; |
||||||
|
border-bottom: 1px solid #cccccc; |
||||||
|
border-right: 1px solid #cccccc; |
||||||
|
} |
||||||
|
|
||||||
|
& .type-first { |
||||||
|
background-color: #008B8B; |
||||||
|
} |
||||||
|
|
||||||
|
& .type-second { |
||||||
|
background-color: #6495ED; |
||||||
|
} |
||||||
|
|
||||||
|
& .type-third { |
||||||
|
background-color: #0088cc; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.bi-tmp { |
||||||
|
& .tmp-button { |
||||||
|
color: #ffffff; |
||||||
|
background: #0088cc; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.bi-splice-duplicate { |
||||||
|
& .superiors-label { |
||||||
|
color: white; |
||||||
|
background-color: #008B8B; |
||||||
|
} |
||||||
|
& .sd-child { |
||||||
|
border: 1px solid #cccccc; |
||||||
|
& .right-button-add { |
||||||
|
color: white; |
||||||
|
background-color: #0088cc; |
||||||
|
} |
||||||
|
& .right-button-del { |
||||||
|
color: white; |
||||||
|
background-color: #d9534f; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue