forked from fanruan/fineui
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.
267 lines
6.7 KiB
267 lines
6.7 KiB
// 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);
|
|
|