Tabulous.js - jQuery Tabs Module

DEMO     -     DOWNLOAD

 

If you think that tabs are our of fashion and boring, think again and take a look at this stylish jQuery tabs module by Aaron Lumsden.

Documentation

..:: Getting Started

Include the relevant files

Firstly include jQuery and the tabulous.css and tabulous.js files. Place these before </head> section

<link href='tabulous.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="tabulous.js"></script>
						

Create the tabs

<div id="tabs">
		<ul>
			<li><a href="#tabs-1" title="">Tab 1</a></li>
			<li><a href="#tabs-2" title="">Tab 2</a></li>
			<li><a href="#tabs-3" title="">Tab 3</a></li>
		</ul>

		<div id="tabs_container">
			

			<div id="tabs-1">
				<!--tab content-->
			</div>

			<div id="tabs-2">
				   <!--tab content-->
		
			</div>

			<div id="tabs-3">
				    <!--tab content-->
			</div>

		</div><!--End tabs container-->
		
	</div><!--End tabs-->

						

Initiate the plugin

Once you have created your tabs you will need to initiate the plugin.
At its most basic level you can initiate the plugin like:

$(document).ready(function ($) {

    $('#tabs').tabulous({);	

});
						

If you want to initiate the plugin with an effect then you can do so like:

$('#tabs').tabulous({
    	effect: 'scale'
    });			

..:: Options

Variable	Default Value	Description	Valid Options
effect	scale	The effect to use for the transition	scale / slideLeft / scaleUp / flip

Souece: http://git.aaronlumsden.com/tabulous.js/