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