Developer’s Snack: Exploration on Web Tab Modules
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.
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?
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.
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:
- 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.
- 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.
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.
Fixed Height or Non-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.
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.
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.
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
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.
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.
Remote Area Tab
Remote tab allows us to have the tab navigation separate away from the main content pane.
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.
Ajax Tab allows the user to retrieve the necessary content only when the tab has been clicked.
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.
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.
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
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 Left or Right Tab
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.
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.
Fade In and Out Tab
This tabs widget is created by ilovecolors using self written jQuery dependant code.
Fading and Sliding Tab
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.
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.
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.
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.
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.
Multiple Directional Tab
The Draggable Tab widget allows tabs to be dragged (and dropped) between one or more modules.
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.
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.