Developer’s Snack: Exploration on Web Tab Modules

by in Development on 11th Nov 2009 · Comments

The use of web tab module has been widely adopted to break content into multiple sections that can be swapped on the fly to save space.

Each tab displays a separate chunk of content when clicked. It becomes perfect if your page needs to hold a large amount of content. With this, it allows the user to focus on certain data.

Tab Module


To implement the tab module for a new project is simple. There are plenty of scripts and tutorials available on the web that you can easily put together for your next project.

Technically, when a developer tries to implement a tab module into a new project, there are certain things that he or she would need to take note of. In the following paragraphs, we shall discuss about the aspects of a tab module which a front end developer should note.

How Tab Works?

Firstly, let me briefly explain how a normal JavaScript driven tab module works. Basically, it involves the use of JavaScript and CSS when the web page loads; it loads all the content for each of the pane at once. Once the DOM is ready, it breaks the information into different panes and applies the JavaScript to hide away all the panes and set active to the default pane to be visible.

The reason for loading all the content at once is to allow the user to switch the tabs on the fly without reloading the web page. If there is quite an amount of content to be loaded for each pane, Ajax can be used to load the content when switching between tabs.

Things to Consider When Choosing the Right Tab Script

Multiple Tab Modules in a Single Page?

If you are going to use the tab module more than once within the same page, prepare to use CLASS for your HTML markup and not ID. Because ID refer to an unique identifier to an element and CLASS refer to one or more occurrences per page.

Therefore by using CLASS element you can apply the same tab module to different sections within the same page. Another way of doing is you can use two different ID selectors for the markup, but this is not advisable because you will probably end up writing repeated JavaScript code to set the CSS for different section.

Tab Module Techniques

Tab module does not just come in one form; there are a few different tab techniques that some developers have come out with to serve each different purpose. I shall share 2 types of tab modules that you might have come across.

Additional ID Identifier at the End of the URL

Take note of your link address bar, you might have noticed that when you clicked on some of the tabs, an additional ID identifier is added to the end of the URL. Reasons to have an ID identifier at the end of the URL:

Timvandamme

With ID Identifier

  • Enable Tab History: When you click on browser back button, it will bring you back to the previous tab that you have clicked.
  • Stay at the same Tab: After you have refreshed the page, the last active tab you were on, will still remain active.
  • Giving URL: If you give the URL to others by the copy and paste method, they will know which tab you are referring to.
Invisible ID Identifier

The other type will have no extra ID identifier appearing at the end of the URL, no matter which tab you click. Some users will want to have default tabs no matter whether they refresh the URL or provide another link.

Matthiaskretschmann

Without ID Identifier

  • Force user to go back to the default tab.
  • Prevent any anchor jump when another tab is clicked
  • The URL at the address bar will be clean.

Pure JavaScript or JavaScript Framework

As developers, we should try to keep code and script to the minimum and achieve what we want for a project. As far as we are concerned, we should make the website load as fast as possible. If you are going to use a tab module for your project, you might want to consider the following pointers.

JavaScript Only

If you are using only the tab module for your web project, it will be good for you to just add in the normal JavaScript to achieve the tabbing features. It can be quite redundant and heavy to load in a JavaScript framework just to have a tab module working.

Pure JavaScript Script

With JavaScript Framework

If you are using more than two JavaScript components for your website, then it would be more reasonable to make use of a JavaScript Framework like jQuery, Mootools, Prototype and so on. Once you have decided on the framework to use, i.e. jQuery, look for a tab module that is jQuery base and try not to include pure JavaScript. This will help to avoid any conflicts between the pure JavaScript and the framework.

MooTools

jQuery

Prototype

Fixed Height or Non-Fixed Height

Fixed Height

If you have a fixed height for the panes, you will end up getting a scroll bar if the height of the pane is not tall enough to accommodate the content. Thus, it is advisable not to give a specific height to the pane, so that the pane will adjust its height automatically according to the content.

Fix Height

Non-Fixed Height

Fluid Height will be able to adjust itself to the height of the amount of content contained within it. It will not have any scroll bar even if the list of content within the pane is long. However if you have other element below the tab module, the element will scale up and down according to the height of the tab module when you are switching across the tab.

Non-Fixed Height

Cursor

When you hover over other inactive tab, it will usually show you the pointer cursor (Hand Cursor). Try not to leave it as the default or text cursor. This is to prevent any confusion for the user who would wonder whether if the tab is clickable. To change to a pointer cursor, add cursor:pointer; to your CSS properties for the inactive tab class.

Pointer Cursor

Animation to Use When Transitioning Between Panes

Consider having different transitions to give users a different kind of user interaction to the pane. Try to keep the animation short and direct to the point of not more than 2 seconds. If the transition takes too long, it will let users feel that your site is slow. So get straight to the point and be fast!

Type of Tabs

There are quite a few different types of tabs that you can make use of in your next project.

Pure CSS Tab

Pure CSS Tab work without the need of JavaScript. All you need is CSS and standard XHTML. The downside for this is not to get styling on the active tab to indicate that it is active.

Webdevel

Pure CSS Tab

However, there is a way to achieve active tab styling with pure CSS. It is by setting a different CLASS to each of the pane and based on the different page being loaded, the active CLASS will style the page accordingly.

Nontroppo

Pure CSS Active Tab

Unraveled

Pure Active CSS Tab

Hover Tab

Hover tab allows users to switch to their tab by just hovering over the tab without clicking. One important point you have to take note, is that the tab will need to remain at the last hover tab if the user does not hover to the next tab.

Livepipe

Hover Tab

Kollermedia

Hover Tab & Auto Tab

Remote Area Tab

Remote tab allows us to have the tab navigation separate away from the main content pane.

Sunsean

Remote Area Tab

Nested Tab

Nested Tab allows us to have a list of parent tab and inside each parent tab, it is able to house internal tabs. When navigating through the internal tab, it will not cause any distraction to the parent tab.

Stilbuero

Nested Tab

Allmybrain

Left Navigation Nested Tabs

Ajax Tab

Ajax Tab allows the user to retrieve the necessary content only when the tab has been clicked.

Crackajax

Ajax Tab

Ajaxlessons

Ajax Loading Tab

Nested Ajax Tab

If you are already loading your tab content using Ajax and need to further break it down, you might want to try Nested Ajax Tab.

DynamicDrive Nesting Ajax Tab

Nesting Ajax Tab

iFrame Tab

Beside Ajax Tab, if your content for the each tab is static, you can also consider using iFrame tab to fetch and show the external page.

Dynamicdrive iFrame Tab

iFrame Tab

Animation Effect for Tabs

Different tab animations provoke different feelings in the user when the user is switching between tabs. There is no right or wrong for choosing any types of animation. Listed below are some common and impressive tab animations you might have come across.

Slide Up and Down Tab

jQueryfordesigners
This technique demonstrates an accessible 'Coda'-like slider interface, but in addition, allows you to place links to the sliding content anywhere on the page and have the effect (and navigation) still working.

Slide Up & Down Tab

Slide Left or Right Tab

Nettuts
The idea here is to build a "widget" (for lack of a better term). Along the top of the widget will be a line of logos from each of the different sites in the blogroll. Each of the logos will act as "tabs" or buttons which when clicked, will display recent headlines from the respective site.

Slide Left & Right Tab

Ndoherty
Coda-Slider 2.0 has been built from the ground up, and should prove to be much more versatile and easier to use than its predecessors.

Tab Slide

Fade In and Out Tab

ilovecolors
This tabs widget is created by ilovecolors using self written jQuery dependant code.

Fade In & Out

Fading and Sliding Tab

CSS-Tricks
The plan is to build a tabbed area, something pretty simple to do from scratch with jQuery, and then make it behave better. The guts of the functionality will be based on calculating heights and animating between those heights on the fly.

Fading & Sliding

Show Tab

jQuery UI
Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion. By default a tab widget will swap between tabbed sections onClick, but the events can be changed to onHover through an option. Tab content can be loaded via Ajax by setting a href on a tab.

jQuery UI

DomTabs
DOMtab is a JavaScript that turns a list of links connected to content sections into a tab interface. The script removes any "back to top" links in the section and automatically hides all but the first one when the page is loaded. You can use as many tabbed menus on the page as you want to.

DOMtabs

Bouncing Tab

Sliverscripting
MooTabs is a tiny (3kb) class for MooTools. As the name suggests, its main purpose is to help with the creation of simple tab navigation.

Bounce

Sliding Door Tab

Nettuts Sliding Door Tab
Sliding Door Tab presents a way of sliding up and down when switching between tabs. User can see each layer of the pane being overlapped when each of the tabs is clicked.

Accordion

Removable Tab

dhtmlgoodies
Removable tab allows us to remove unused tabs from the tab navigation, this make it less clustered and easier for the user to organize their information. However, this tab script is seldom being use for normal web interface.

Removable Tab

Multiple Directional Tab

dHTMLx
dhtmlxTabbar is a JavaScript tabbar control for creating dynamic tabbed-navigation interface. This Ajax-enabled UI component lets you add feature-rich and nice looking tabs to your site or web application.

Multiple Tabs

Draggable Tab

Nodetraveller
The Draggable Tab widget allows tabs to be dragged (and dropped) between one or more modules.

Draggable Tab

Wizard Tab

Zapatec
The Zapatec Tabs allows you to section your workflow into Tabs. All Tabs contents are on the client, so the user experiences an immediate (non-server) response between tabs.

Wizard Tab

Further Resources

Here are some of the other quality articles that will assist you to plan and design a better tab interface.

Start Tabbing Away!

I hope the information provided gave you a clear overview of the different types of tabs that can assist you in using tab modules for your next project. Some of the scripts displayed have the ability to achieve more than one feature, explore them and let us know your views. If there are more tab module scripts that you would like to share with us, please leave a comment below.

Terrance is a versatile web developer and the technical editor at OXP. He enjoys creating functional websites and is particularly engrossed in all the tiny details mixed together to construct great user experiences. He always believe that every web user deserves the best!