JQuery Slide tab jQuery tabulous. js, jquerytabulous. js

JQuery Slide tab jQuery tabulous. js, jquerytabulous. js

A jQuery tabs module for todays web!

Instance DEMO

Run

Documentation

Tabulous. js can be used with any contents you choose in the tabs and it couldn't be more simpler to use.

..: Getting StartedInclude the relevant files

Firstly include jQuery and the tabulous.css and tabulous. js files. Place these beforeSection

 

Create the tabs

1. <divid="tabs">
2. <ul>
3. <li><ahref="#tabs-1"title="">Tab 1</a></li>
4. <li><ahref="#tabs-2"title="">Tab 2</a></li>
5. <li><ahref="#tabs-3"title="">Tab 3</a></li>
6. </ul>
7. <divid="tabs_container">
8. <divid="tabs-1">
9. <!--tab content-->
10. </div>
11. <divid="tabs-2">
12. <!--tab content-->
13. </div>
14. <divid="tabs-3">
15. <!--tab content-->
16. </div>
17. </div><!--End tabs container-->
18. </div><!--End tabs-->

Copy 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:

1. $(document).ready(function($){
3. $('#tabs').tabulous();
5. });

Copy

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

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

Copy...: Options

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

Download