JSFiddle - React, Tailwind, and code Playground

by napotopia

HTML

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#fragment-1"><span>One</span></a></li>
    <li><a href="#fragment-2"><span>Two</span></a></li>
    <li><a href="#fragment-3"><span>Three</span></a></li>
  </ul>
  <div id="fragment-1">
    <p>First tab is active by default:</p>
    <pre><code>$( "#tabs" ).tabs(); </code></pre>
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>

CSS

/*! jQuery UI - v1.10.2 - 2013-04-24
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.accordion.css, jquery.ui.autocomplete.css, jquery.ui.button.css, jquery.ui.datepicker.css, jquery.ui.dialog.css, jquery.ui.menu.css, jquery.ui.tabs.css
* Copyright 2013 jQuery Foundation and other contributors Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-clearfix {
	min-height: 0; /* support: IE7 */
}
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	filter:Alpha(Opacity=0);
}

.ui-front {
	z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
	cursor: default !important;
}


/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
}


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ui-resizable {
	position: relative;
}
.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
	display: none;
}
.ui-resizable-n {
	cursor: n-resize;
	height: 7px;
	width: 100%;
	top: -5px;
	left: 0;
}
.ui-resizable-s {
	cursor: s-resize;
	height: 7px;
	width:...

JavaScript

//Borrowed from YUI base
$.namespace = function() {
    var a = arguments, o = null, i, j, d;
    for (i = 0; i < a.length; i = i + 1) {
        d =("" + a[i]).split(".");
        o = $;
        for (j=(d[0] == $) ? 1 : 0; j<d.length; j=j+1) {
            o[d[j]] = o[d[j]] || {};
            o = o[d[j]];
        }
    }
    return o;
};

$.namespace('man.util');
$.namespace('man.ui');

$.man.util = {
    isId : function(sel) {
        if (sel === 'id') {
            return true;
        }
    },
    isClass : function(sel) {
        if (sel === 'cls') { 
            return true;
        }
    }
};

/* @param {String|Object} so Selector type, selector, or options object 
** @param {Object} options Options for tab component */

$.man.ui.tabs = function (so, options) {
    var _selector, _selType;
    
    //Assumes a selector is being passed in
    if (typeof so === 'string' || 
        typeof so === 'string' && options.constructor === Object) {
            return jQuery(so).tabs(options);
    }
    else if (so.constructor === Object && so.hasOwnProperty('selType')) {
        if ($.man.util.isId(so.selType)) {
            _selType = '#';
        } else if ($.man.util.isClass(so.selType)) {
            _selType = '.'
        }
        _selector = _selType + so.selector;
        
        return jQuery(_selector).tabs(options);
    } 
    
};

    // #tabs || .tabs
    // {'selType': 'id', 'selector': 'tabs'}
    // '#tabs', { disabled: [ 0, 2 ] }
    
//var myTabs = new $.man.ui.tabs('#tabs');
var myTabs = new $.man.ui.tabs({'selType': 'id', 'selector': 'tabs'});
//var myTabs = new $.man.ui.tabs({'selType': 'id', 'selector': 'tabs'}, { disabled: [ 0, 2 ] });
//var myTabs = new $.man.ui.tabs('#tabs', { disabled: [ 0, 2 ] });

//myTabs.tabs('option', 'disabled', [0,2]);