TabControl

jquery主体：

 var TabControl = function (ops) {
        this._ops = {
            items: ops.items || [],
            hashItems: {},
            selectedIndex: ops.selectedIndex || 0
        };
        this._element = $(ops.element);
        this._tabContainerId = "ui-tabcontrol-container-";
        this._convertHashItems();
        this._init()
            ._initId()
            ._create()
            ._initMember()
            ._setTabContainer()
            ._setTabContent()
            ._bindEvent();
    }

    TabControl.prototype = {
        _convertHashItems: function () {
            var i = 0;
            for (; i < this._ops.items.length; i++) {
                this._ops.hashItems[this._ops.items[i].title] = {
                    selectedIndex: i,
                    selectedItem: this._ops.items[i]
                };
            }
        },
        _init: function () {
            this._element.addClass('ui-tabcontrol');
            return this;
        },

        _initId: function () {
            this._tabContainerId += uuid;
            return this;
        },

        _create: function () {
            this._createTab();
            return this;
        },

        _createTab: function () {
            var fragement = [],
                h = -1;
            fragement[++h] = "<div id= " + this._tabContainerId + " class=\"ui-tab-container\">";
            fragement[++h] = "</div>";
            this._element.prepend(fragement.join(''));
        },

        _initMember: function () {
            this.$container = $('#' + this._tabContainerId);
            this.$contents = $('.ui-tabcontrol-content').children();
            return this;
        },

        _setTabContainer: function () {
            var i = 0,
                items = this._ops.items,
                len = items.length;
            for (; i < len; i++) {
                var el = document.createElement('div');
                el.textContent = items[i].title;
                $(el).addClass('ui-tabcontrol-container-item');
                if (this._ops.selectedIndex == i) $(el).addClass('active');
                el.onclick = this._tabClickHandler.bind(this);
                this.$container.append(el);
            }
            return this;
        },

        _resetTabContainer: function () {
            var $targets = this.$container.children();
            $targets.removeClass('active');
            $($targets[this._ops.selectedIndex]).addClass('active');
        },

        _bindEvent: function () {
            return this;
        },

        _tabClickHandler: function (e) {
            var self = this,
                newValue = this._ops.hashItems[e.target.textContent];
            $$.trigger("tabHandleChanged", self._element, $$.Event({
                element: self._element,
                oldValue: this._oldValue,
                newValue: newValue
            }));
            this._ops.selectedIndex = newValue.selectedIndex;
            this._oldValue = newValue;
            this._resetTabContainer();
            this._setTabContent();
        },

        _setTabContent: function () {
            this.$contents.addClass('ui-tabcontrol-content-item');
            var i = 0,
                items = this._ops.items,
                len = items.length;
            for (; i < len; i++) {
                if (i !== this._ops.selectedIndex)
                    $(this.$contents[i]).css('display', 'none');
                else
                    $(this.$contents[i]).css('display', '');
            }
            return this;
        },

        setOptions: function (ops) {
            this._ops.items = ops.items;
            this._ops.selectedIndex = ops.selectedIndex || this._oldValue.selectedIndex;
            this._convertHashItems();
            this._removeTabTabContainer()
                ._setTabContainer()
                ._setTabContent();
        },
        _removeTabTabContainer: function () {
            this.$container.empty();
            return this;
        }
    }

View Code

react包装：

import ReactWidget from '../react-widget';

class TabControl extends ReactWidget {
    constructor(props) {
        super(props);
    }


    componentWillReceiveProps(newProps) {
        this.element.setOptions({
            items: newProps.items,
            selectedIndex: newProps.selectedIndex
        });
    }

    componentDidMount() {
        this.element = new aui.TabControl({
            element: ReactDOM.findDOMNode(this),
            items: this.props.items,
            selectedIndex: this.props.selectedIndex
        });
        $(ReactDOM.findDOMNode(this)).on('tabHandleChanged', this.props.selectChanged.bind(this));
    }

    render() {
        return <div>
            <div className='ui-tabcontrol-content'>
                {this.props.children}
            </div>
        </div>
    }
}

window.$$.TabControl = TabControl;

View Code

less样式：

.ui-tabcontrol {
    .ui-tab-container {
        .ui-tabcontrol-container-item {
            display      : inline-block;
            padding      : 10px 20px;
            text-align   : center;
            border       : 1px solid #ff9900;
            border-radius: 1px;
            border-right : 0px;
            cursor       : pointer;

            &:hover {
                color: #bbb;
            }

            &:last-child {
                border-right: 1px solid #ff9900;
            }
        }

        .active {
            border-top      : 3px solid #000000;
            background-color: #bbbbbb;
            border-bottom   : 1px solid #bbbbbb;

            &:hover {
                color: #ffffff;
            }
        }
    }

    .ui-tabcontrol-content {
        background-color: #bbbbbb;
    }
}

View Code

效果：