Tabulous.js – Attractive jQuery Tabs Module

Tabulous.js is a jQuery tabs module and gives you more than 3 tabs animating styles. Tabulous.js can be used with any contents you choose in the tabs and it couldn’t be more simpler to use. It gets you the most out of jQuery tabs module. It’s a great jQuery plugin that provides an easy method of creating tabbed interfaces. As long as the specified HTML structure is followed, the tabulous.js plugin will take care of creating the tabbed functionality.

How to Create Tabs Interface with Tabulous.js?

First of all, download and upload the tabulous jQuery plugin on your server. Afterwards, include the tabulous.css, tabulous.js and jQuery files in the </head> section of the webpage on which you want to display tabs. Here is the quick snippets:

<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">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh.
			</div>

			<div id="tabs-2">
				   Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus.		
			</div>

			<div id="tabs-3">
				Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
			</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

scale / slideLeft / scaleUp / flip

well done.