jQuery: Tabbify

Tabbify

/* 
 * tabbify
 * makes the tabs and does tab-related things
 */


// -------------
// sample css
// -------------
ul.tabs { height:28px; margin:0; }
ul.tabs li.tab { cursor:pointer; margin-right:3px; font-size:11px; padding:8px 12px 6px; float:left; position:relative; z-index:2; background:#ddd; border:1px solid #ccc; border-bottom:none; border-top-left-radius:6px; border-top-right-radius:6px; }
ul.tabs li.tab:hover { background:#9dce24; }
.panes { width:400px; border:1px solid #ccc; }
.pane { display:none; z-index:1; min-height:144px; }
.pane:first-child { display:block; }
ul.tabs .active.tab { background:#fff; }
ul.tabs .right { font-size:11px; padding-top:8px; }


// -------------
// sample html
// -------------

<section id="tabbify-me" data-nav="tabbify">
	<h1>Tabbify</h1>
	<ul class="tabs">
		<li class="active tab"><a href="#weekly">Weekly</a></li>
		<li class="tab"><a href="#monthly">Monthly</a></li>
		<li class="tab"><a href="#yearly">Yearly</a></li>
	</ul>
	<div class="panes">
		<div id="weekly" class="pane">
			<h2>Weekly!</h2>
		</div>
		<div id="monthly" class="pane">
			<h2>Monthly!</h2>
		</div>
		<div id="yearly" class="pane">
			<h2>Yearly!</h2>
		</div>
	</div>
</section>


// -------------
// sample js
// -------------

$.fn.tabbify = function(callback){

	var tabs = $('.tab', this);
	var panes = $('.pane', this);

	// var tabs = $('.tab',this).not( $('.pane .tab', this) );	// .not() deals with the rare case
									// when a set of tabs are within 
									// another (parent) tab's pane
	// var panes = $('.pane',this).not( $('.pane .pane', this) );

	return tabs.each(function(){					// return tabs (not panes, 
									// nor parent) for chainability

		$(this).click(function(){
			tabs.removeClass('active');
			panes.hide();
			var activeTab = $('a', this).attr('href');
			$(activeTab).fadeIn();
			$(this).addClass('active');

			if (callback) {
				callback.call(this, activeTab.replace(/#/,'') );
			}

			return false;
		});
	});
}