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?
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:
- 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.
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.
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.
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.
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.
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
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
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
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.
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.
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 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.
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.
Fade In and Out Tab
ilovecolors
This tabs widget is created by ilovecolors using self written jQuery dependant code.
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.
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.
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.
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.
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
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.
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.
Draggable Tab
Nodetraveller
The Draggable Tab widget allows tabs to be dragged (and dropped) between one or more modules.
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.
0 comments:
Post a Comment