oxjs/source/Ox.UI/js/Panel/Ox.TabPanel.js

71 lines
1.7 KiB
JavaScript
Raw Normal View History

2011-07-29 18:48:43 +00:00
// vim: et:ts=4:sw=4:sts=4:ft=javascript
2011-11-05 16:46:53 +00:00
'use strict';
2011-04-22 22:03:10 +00:00
Ox.TabPanel = function(options, self) {
2011-08-17 14:59:37 +00:00
self = self || {};
var that = Ox.Element({}, self)
.defaults({
content: null,
tabs: []
})
.options(options || {});
2011-11-02 10:23:15 +00:00
self.selected = getSelected();
2011-08-17 14:59:37 +00:00
self.$bar = Ox.Bar({size: 24});
self.$tabs = Ox.ButtonGroup({
buttons: self.options.tabs,
id: 'tabs',
2011-12-22 15:47:46 +00:00
selectable: true,
value: self.selected
2011-08-17 14:59:37 +00:00
})
.bindEvent({
change: function(data) {
2011-12-21 15:33:52 +00:00
self.selected = data.value;
that.$element.replaceElement(1, getContent());
that.triggerEvent('change', {selected: self.selected});
2011-08-17 14:59:37 +00:00
}
})
.appendTo(self.$bar);
that.$element = Ox.SplitPanel({
elements: [
{
element: self.$bar,
size: 24
},
{
element: getContent()
2011-08-17 14:59:37 +00:00
}
],
orientation: 'vertical'
})
.addClass('OxTabPanel');
function getContent() {
return Ox.isObject(self.options.content)
? self.options.content[self.selected]
: self.options.content(self.selected);
}
2011-11-02 10:23:15 +00:00
function getSelected() {
return self.options.tabs.filter(function(tab) {
return tab.selected;
})[0].id;
}
that.select = function(id) {
if (Ox.getIndexById(self.options.tabs, id) > -1) {
self.$tabs.select(id);
}
};
2011-11-02 10:23:15 +00:00
that.selected = function() {
return self.selected;
};
2011-08-17 14:59:37 +00:00
return that;
2011-04-22 22:03:10 +00:00
};