Jul 28 2013

Tabulous.js: Organize Random Content in Tabs with jQuery

Advertisement

Aaron Lumsden from West-Yorkshire simply loves jQuery. It’s been merely a few days ago, that we introduced our readers to progression.js, a plugin that gives users real time hints and progress updates as they complete forms. Today I ran across another useful plugin by the same programmer. Tabulous.js helps you organize any content in containers with tabbed navigation and nice animated effects to hide and show the enclosed elements.

tabulous-js-start

Tabulous.js: Various Effects, Simple to Use

If you like Lumsden’s approach to simplifying things or not is basically a matter of taste. There are a lot of you who like to utilize full-blown frameworks with loads of features integrated into one big package, knowing that they will only need a few. Others, like Lumsden (and me), like to use small specialized tools, which they accumulate with others if needed to achieve the exact feature level the given project aims at.

Tabulous.js offers exactly one feature. It allows for the organization of random content in a nested div and wraps tabbed navigation and some nice effects around it. Effects let you have the content sliding in from the side or flipping over from within. There are further variants.

tabulous-action

Embedding is simple, as with jQuery always is. There is one single variable, labeled effect, which guarantees the function-call to be slim and quickly scripted. After having called jQuery, the plugin and its corresponding CSS, you will want to set up a nested div with the uppermost layer carrying the id tabs.

This is an example of how it looks:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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-->

Having done that, you simply need to invoke the function-call:

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

I decided to use the variable effect in this example. Effects care for hiding and showing content with a variety of animations. The variable is optional.

Tabulous.js is a simple, handy tool which accomplishes the mission it has been invented for in an almost ideal way. I was spontaneous enough to actually use it immediately in one of my projects today. Tabulous.js can be downloaded from Github and is available free of charge under an MIT license for private and commercial use cases alike.

Related Links

About the Author

Dieter Petereit is Noupe's Editor-In-Chief and a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called webdesign and has carried on ever since. Almost a decade ago he started writing for several online publications, some well, some lesser known. Dieter is a heavy G-Plusser, so why not meet him over there?

Homepage

Comments and Discussions
  • Alan Smith, 29 July 2013

    I will have to try on it, hope it will work awesome for me :)

  • Andy, 09 October 2013

    Hello,

    I am using Tabulous on a project and am wondering about how semantic it is? Is it?

    What I was thinking, would is be good to change the div id against nav? I mean wrap the ul in a nav? As far as usage, I would think that most people use it for some form of navigation as opposed to a right column with multiple tabbed content of the same meaning, like recent posts, recent comments etc. Perhaps I am thinking of Tabulous’ usage in the wrong way and it is not good to use it for navigation?

    Would appreciate your opinion tremendously (if you have links to topics about how semantic tabbed navigation is please do SHARE them) since I am fairly new to this and would like to write the code semantically.

    Thanks.

search form
 
image description image description