Create Attractive jQuery Tab Module with Tabulous.js

Create Attractive jQuery Tab Module with Tabulous.js


Create Attractive jQuery Tab Module with Tabulous.js

Tabulous.js is a great jQuery tab module. With its supports of animations while loading its tab content, I reckon you can use this plugin to create a cool website layout.

Imagine this, you use tabs as navigation menu, and load your website content with a few supported animation effect such as Scale, Slide left, Slide Right and Flip. Simple as that, you just create a good looking web layout with tabulous.js. Go ahead and see the demo, you need to play with it to understand what I meant.

Features

  • Easy to setup
  • Support animation effect - Scale/Slide Left/ Slide Right/ Flip
  • Lightweight

Screenshots

More Details

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

4 comments

Efren Martínez
Sat, 6th July 2013
Looks great! Thanks for share !! Reply
Athen
Fri, 26th July 2013
button link not working in tab container..need some help..:( Reply
Alex
Fri, 13th September 2013
Hi Athen,

it's possible via 'location.href'.
E.g.
<a href="#" onclick="javascript:location.href='http://www.xyz.de ';">linkname</a> Reply
Chris
Fri, 11th October 2013
You can also add an class in your HTML:

<a class="class_name" href="#tabs-1" title="">Name</a>


and modify tabulous.js like

var links = this.$elem.find('a');
var firstchild = this.$elem.find('li:first-child').find('a');


to

var links = this.$elem.find('a.class_name');
var firstchild = this.$elem.find('li:first-child').find('a.class_name');


Now a "normal" link is working inside tabs_container Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement