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

// vim: et:ts=4:sw=4:sts=4:ft=javascript
Ox.TabPanel = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
        .defaults({
            content: null,
            tabs: []
        })
        .options(options || {});

    self.selected = getSelected();

    self.$bar = Ox.Bar({size: 24});

    self.$tabs = Ox.ButtonGroup({
            buttons: self.options.tabs,
            id: 'tabs',
            selectable: true,
        })
        .bindEvent({
            change: function(event) {
                self.selected = event.selected[0];
                that.$element.replaceElement(1, self.options.content(self.selected));
                that.triggerEvent('change', {
                    selected: self.selected
                });
            }
        })
        .appendTo(self.$bar);

    that.$element = Ox.SplitPanel({
            elements: [
                {
                    element: self.$bar,
                    size: 24
                },
                {
                    element: self.options.content(self.selected)
                }
            ],
            orientation: 'vertical'
        })
        .addClass('OxTabPanel');

    function getSelected() {
        return self.options.tabs.filter(function(tab) {
            return tab.selected;
        })[0].id;
    }

    that.selected = function() {
        return self.selected;
    };

    return that;

};