ajaxTabs

ajaxTabs is a very lightweight jquery plugin which allows building tabs very easily. Tons of similar plugins already exist but I think those plugins are too much heavy for just making tabs.

Getting started

HTML

<script src="pathtojs/jquery.ajaxTabs.js"></script>

<ul id="myTabs">
	<li><a href="#container1" data-lighttab-url="/container1Url">Tab 1</a></li>
	<li><a href="#container2" data-lighttab-url="/container2Url">Tab 2</a></li>
	<li><a href="#container3" data-lighttab-url="/container3Url">Tab 3</a></li>
</ul>
	
<div class="tab-wrapper">
	<div id="container1"></div>
	<div id="container2"></div>
	<div id="container3"></div>
</div>

If you want to enable one tab by default, just do it by this way

<div id="container1" class="active"></div>

CSS

.tab-wrapper > * {
	display: none;
}

.tab-wrapper > .active {
	display: block;
}

JS

$(function() {
	$('#myTabs').ajaxTabs();
});

Options

Few options are available:

• selectorTab: the DOM selector for tabs
• attrDataUrl: the data stored attribute name which contains the url to call
• beforeCallback: function called before the ajax call
• afterCallback: function called after the ajax call

selectorTab

The DOM selector for tabs. This example shows how to exclude a link to the tabs mechanism.

$(function() {
	$('#myTabs').ajaxTabs({
		selectorTab: '.tab'
	});
});

<ul id="myTabs">
	<li><a href="#container1" data-lighttab-url="/container1Url" class="tab">Tab 1</a></li>
	<li><a href="#container2" data-lighttab-url="/container2Url" class="tab">Tab 2</a></li>
	<li><a href="http://anywhere.com">Tab 3</a></li>
</ul>

<div class="tab-wrapper">
	<div id="container1"></div>
	<div id="container2"></div>
</div>

attrDataUrl

The data stored attribute name which contains the url to call

$(function() {
	$('#myTabs').ajaxTabs({
		attrDataUrl: 'url'
	});
});

<ul id="myTabs">
	<li><a href="#container1" data-url="/container1Url">Tab 1</a></li>
	<li><a href="#container2" data-url="/container2Url">Tab 2</a></li>
	<li><a href="#container3" data-url="/container3Url">Tab 3</a></li>
</ul>

beforeCallback

This function is called before the ajax call

$('#myTabs').ajaxTabs({
	beforeCallback: function(tab, container) {
		container.html('Loading ...');
	}
});

Parameters

• tab: the tab element
• container: the container element

afterCallback

This function is called after the ajax call

$('#myTabs').ajaxTabs({
	beforeCallback: function(tab, container) {
		container.html('Loading ...');
	}
});

Parameters

• tab: the tab element
• container: the container element

Dependencies

• JQuery