Works in: Internet Explorer 4+ only

Many of the more popular e-commerce sites use the effective "tabbed dialog box" look to display and organize their content. This user-interface design works well because it organizes information in a clear way. However, the drawback to most Web-based implementations is that they rely on graphic files to display the actual tabs. Further, most make a round trip to the Web server to display a different tab and associated panel (the large area that contains the controls and other content you show the user) when clicked.

You can use JavaScript and DHTML to create a tabbed window on your Web page to display all of your user-interface elements. The implementation of this tabbed window is different from others that you may have seen in that it does not use image files to display the tabs. Instead, it uses some of the rudimentary display capabilities of DHTML. In addition, logic to show the various tabs resides solely in client-side JavaScript. The end result is a user interface that looks professional and performs extremely well. This tabbed window works best in a controlled environment, such as your company intranet, where the standard browser is Internet Explorer 4+.

The main structure of the tabbed interface consists of two tables. The topmost table creates the actual tabs. Each cell in the table is a potential tab that can be clicked. As you'll see later, you can use style attributes of these cells to change the look of the cells to attractive tabs. The second table holds the panels of your tabs, or the large areas where you place the other controls. You could easily omit this second table, as it is not strictly required; I just included it for organization.

<SPAN> is an incredibly flexible and useful tag that has the simple task of creating an area in your Web page that you can control. Typically, you add additional HTML between the beginning and ending <SPAN> tags. You can then control the entire group of HTML by controlling the <SPAN>. For example, you could show, hide, or move the entire group of HTML within the <SPAN> by changing property values of the <SPAN> (see Listing 1).

Notice that the group begins with <SPAN> and ends with </SPAN>. In between is standard HTML, just like you would find anywhere else in an HTML page. You include a STYLE attribute with the <SPAN> tag to defines its display characteristics.

You use a different <SPAN> tag pair for each panel you want to display. You use JavaScript to set the visibility property of the <SPAN>s to "visible" or "hidden", depending on the tab that the user clicks. Note that PanelForTab1 is the name that has been given to the first <SPAN></SPAN> tag pair. When you set the visibility property to "hidden", all elements within the <SPAN></SPAN> tag pair become invisible. When you set it to "visible", all those elements become visible. In this way, you display the appropriate panel for the tab that was clicked. PanelForTab1 and PanelForTab2 are the names of <SPAN>s on the example page.

PanelForTab1.style.visibility="visible"
PanelForTab2.style.visibility="hidden"

In addition to showing and hiding the panels, you also need to change the look of the tabs themselves when the tab is clicked. DHTML lets you change a few basic things such as the style, color, and border of the tabs. Because each tab is really a table cell, you can change the look of the border of those cells. You do so using the border-X-Style, border-X-Color, and border-X-Color, where -X- is Left, Right, and Top:

			
Tab1.style.borderTopStyle="solid"
Tab1.style.borderLeftColor="gray"
Tab1.style.borderTopWidth=3

This code will run when a tab is selected. It will be applied to each tab that is not selected. It will change the way each tab looks, so that they appear to be set back a bit from the tab that is selected.

This next bit of code will also run when a tab is selected. It will be applied to the one tab that is selected. The code will give the border of the tab the same look as the panel, and the tab will appear flushed with the panel. Note that you only have code that adjusts one of the three visible sides of a tab. For completeness, you would need to set all three sides, such as borderTopStyle, borderLeftStyle, and borderRightStyle. The same goes for the border color and border width.

Tab1.style.borderTopStyle=""
Tab1.style.borderLeftColor=""
Tab1.style.borderTopWidth=0

You will also change the inside color and style of tabs when one is selected:

Tab1.bgColor='#ffffee'
Tab1.style.fontWeight=400
Tab1.style.color = "black"

Note that you set the background color of the tab itself. If the tab is selected, the color will match the color of the associated panel exactly. If the tab is not selected, it will be given an offset color. In addition, the font will change to make it more or less bold depending on if the tab is selected or not. The line of code that reads Tab1.style.color = "black" is shorthand for changing the color of the FONT that is on the tab, not the tab itself. The previous code would be for a tab that is not selected. This code would be applied to a tab that is selected:

TheSelectedTab.style.color = "white"
TheSelectedTab.bgColor = '#006699'
TheSelectedTab.style.fontWeight=700

There you have it: the main elements involved in creating a professional-looking, high-performing tabbed window that can organize your user interfaces. It simply uses HTML tables and a little DHTML and JavaScript to change the look of things when a tab is clicked. Note that it is an Internet Explorer-only solution.

Click here to view the sample tabbed window page.