forked from fanruan/fineui
49 changed files with 4717 additions and 478 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; |
||||
} |
||||
@ -0,0 +1,136 @@
|
||||
Demo.Expander = BI.inherit(BI.Widget, { |
||||
render: function () { |
||||
var self = this, o = this.options; |
||||
return { |
||||
type: "bi.expander", |
||||
ref: function () { |
||||
self.expander = this; |
||||
}, |
||||
el: o.el, |
||||
popup: o.popup |
||||
} |
||||
}, |
||||
|
||||
update: function (opt) { |
||||
this.expander.populate(opt.items); |
||||
return true; |
||||
} |
||||
}); |
||||
BI.shortcut("demo.sort_tree_expander", Demo.Expander) |
||||
|
||||
/** |
||||
* guy |
||||
* 二级树 |
||||
* @class Demo.SortTree |
||||
* @extends BI.Widget |
||||
*/ |
||||
Demo.SortTree = BI.inherit(BI.Widget, { |
||||
|
||||
render: function () { |
||||
var self = this, o = this.options; |
||||
var tree = new BI.Tree(); |
||||
tree.initTree(BI.Tree.transformToTreeFormat(Demo.CONSTANTS.TREEITEMS)); |
||||
this.tree = BI.createWidget({ |
||||
type: "bi.custom_tree", |
||||
element: this, |
||||
expander: { |
||||
type: "demo.sort_tree_expander" |
||||
}, |
||||
|
||||
items: this._formatItems(0, tree.toJSON()), |
||||
|
||||
el: { |
||||
type: "bi.virtual_group", |
||||
layouts: [{ |
||||
type: "bi.vertical", |
||||
scrolly: false |
||||
}] |
||||
} |
||||
}); |
||||
|
||||
this.tree.element.sortable({ |
||||
items: ".sort-item", |
||||
placeholder: { |
||||
element: function ($currentItem) { |
||||
var holder = BI.createWidget({ |
||||
type: "bi.layout", |
||||
cls: "bi-sortable-holder", |
||||
height: $currentItem.outerHeight() |
||||
}); |
||||
holder.element.css({ |
||||
"margin-left": $currentItem.css("margin-left"), |
||||
"margin-right": $currentItem.css("margin-right"), |
||||
"margin-top": $currentItem.css("margin-top"), |
||||
"margin-bottom": $currentItem.css("margin-bottom"), |
||||
"margin": $currentItem.css("margin") |
||||
}); |
||||
return holder.element; |
||||
}, |
||||
update: function () { |
||||
|
||||
} |
||||
}, |
||||
update: function (event, ui) { |
||||
var node = ui.item.data("node"); |
||||
var findTheNode = tree.search(node.id); |
||||
//这里简单处理下找到它的父节点
|
||||
var currentIndex = 0, parentNode; |
||||
if (ui.item.next().length > 0) { |
||||
var n = ui.item.next().data("node"); |
||||
var nextId = n.id; |
||||
var nextNode = tree.search(nextId) |
||||
parentNode = nextNode.getParent(); |
||||
var nextIndex = parentNode.getChildIndex(nextId); |
||||
currentIndex = nextIndex > 0 && (nextIndex - 1); |
||||
|
||||
} else if (ui.item.prev().length > 0) { |
||||
var n = ui.item.prev().data("node"); |
||||
var prevId = n.id; |
||||
var prevNode = tree.search(prevId) |
||||
parentNode = prevNode.getParent(); |
||||
var prevIndex = parentNode.getChildIndex(prevId); |
||||
currentIndex = prevIndex + 1; |
||||
} |
||||
findTheNode.getParent().removeChild(node.id); |
||||
parentNode.addChild(findTheNode, currentIndex); |
||||
console.log(tree.toJSON()); |
||||
self.tree.populate(self._formatItems(0, tree.toJSON())); |
||||
}, |
||||
start: function (event, ui) { |
||||
|
||||
}, |
||||
stop: function (event, ui) { |
||||
}, |
||||
over: function (event, ui) { |
||||
|
||||
} |
||||
}); |
||||
}, |
||||
|
||||
_formatItems: function (layer, nodes) { |
||||
var self = this; |
||||
BI.each(nodes, function (i, node) { |
||||
if (node.isParent === true || BI.isNotEmptyArray(node.children)) { |
||||
BI.defaults(node, { |
||||
type: "bi.multilayer_icon_arrow_node", |
||||
height: 30, |
||||
layer: layer |
||||
}); |
||||
self._formatItems(layer + 1, node.children); |
||||
} else { |
||||
BI.defaults(node, { |
||||
type: "bi.multilayer_icon_tree_leaf_item", |
||||
cls: "sort-item", |
||||
height: 30, |
||||
key: node.id, |
||||
layer: layer, |
||||
data: { |
||||
node: node |
||||
} |
||||
}); |
||||
} |
||||
}); |
||||
return nodes; |
||||
}, |
||||
}); |
||||
BI.shortcut("demo.sort_tree", Demo.SortTree); |
||||
@ -1,17 +1,17 @@
|
||||
Demo.ADDONS_CONFIG = [{ |
||||
id: 6, |
||||
id: 7, |
||||
text: "addons" |
||||
}, { |
||||
pId: 6, |
||||
id: 601, |
||||
pId: 7, |
||||
id: 701, |
||||
text: "拓展图表控件" |
||||
}, { |
||||
pId: 601, |
||||
pId: 701, |
||||
text: "柱状图", |
||||
value: "demo.axis_chart" |
||||
}, { |
||||
pId: 6, |
||||
id: 602, |
||||
pId: 7, |
||||
id: 702, |
||||
text: "滚动sliders", |
||||
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
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue