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; } }
效果: