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;}}

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;

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;}
}

效果：