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

112 lines
2.8 KiB
JavaScript
Raw Normal View History

2012-05-21 10:38:18 +00:00
'use strict';
/*@
2012-05-31 10:32:54 +00:00
Ox.TabPanel <f> Tabbed panel
([options[, self]]) -> <o:Ox.SplitPanel> Panel
2012-06-17 22:38:26 +00:00
change <!> change
options <o> Options
content <o|f> Content per tab
Either `({id1: $element1, id2: $element2}}` or `function(id) {
return $element; })`
size <n|24> Height of the tab bar
tabs [o] Tabs
id <s> Tab id
title <s> Tab title
self <o> Shared private variable
@*/
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,
size: 24,
2011-08-17 14:59:37 +00:00
tabs: []
})
.options(options || {})
.update({
content: function() {
self.$panel.replaceElement(1, getContent());
}
});
2011-08-17 14:59:37 +00:00
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
})
.css({top: (self.options.size - 16) / 2 + 'px'})
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);
self.$panel = Ox.SplitPanel({
2011-08-17 14:59:37 +00:00
elements: [
{
element: self.$bar,
size: self.options.size
2011-08-17 14:59:37 +00:00
},
{
element: getContent()
2011-08-17 14:59:37 +00:00
}
],
orientation: 'vertical'
})
.addClass('OxTabPanel');
that.setElement(self.$panel);
2011-08-17 14:59:37 +00:00
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() {
var selected = self.options.tabs.filter(function(tab) {
2011-11-02 10:23:15 +00:00
return tab.selected;
});
return (selected.length ? selected : self.options.tabs)[0].id;
2011-11-02 10:23:15 +00:00
}
//@ reloadPanel <f> reload panel
that.reloadPanel = function() {
self.$panel.replaceElement(1, getContent());
return that;
};
2012-05-21 10:38:18 +00:00
/*@
select <f> select
(id) -> <o> select panel
@*/
2012-06-21 11:48:29 +00:00
// FIXME: remove select (collides with a jquery method)
that.select = that.selectTab = function(id) {
if (Ox.getIndexById(self.options.tabs, id) > -1) {
self.$tabs.options({value: id});
}
return that;
};
2012-05-21 10:38:18 +00:00
/*@
selected <f> selected
() -> <b> return selected panel
@*/
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
};