You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
268 lines
6.6 KiB
268 lines
6.6 KiB
7 years ago
|
//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);
|