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.
Firstly include jQuery and the tabulous.css and tabulous.js files. Place these before <head> section
<script type="text/javascript" src="tabulous.js"></script>
<script type="text/javascript" src="js.js"></script>
<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-->
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 options then you can do so like:
$('#tabs').tabulous({
effect: 'scale'
});
</tbody>
</table>
| Variable | Default Value | Description | Valid Options |
|---|---|---|---|
| effect | scale | The effect to use for the transition | scale / slideLeft / scaleUp / flip |