Tabulous.js – A jQuery tabs module for todays web!

Tabulous.js can be used with any contents you choose in the tabs and it couldn’t be more simpler to use. It has four effects to display content – scale, slide, scale up and flip and it is very easy to implement and edit. Have a look at the demo and the instructions of how to use and you will see how beautiful these tabs are.

 

DEMOS | DOWNLOAD

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