Create A Tabbed User Interface

Create A Tabbed User Interface (cont'd)

Activate the Tabs
The next step is to write the JavaScript routines that perform the work of keeping the tabs synchronized with the user's actions. You need to responds to three events for each tab: onClick, onMouseOver, and onMouseOut. The onClick event loads the requested panel, hides the current panel, and sets the state of the UI. The onMouseOver event highlights the current tab so the user knows that clicking on the tab will actually do something. The onMouseOut event un-highlights the tab.

Add the following code to the section:

   <script language="JavaScript">
   var currentPanel;
   
   function showPanel(panelNum) {
      //hide visible panel, show selected panel, 
      //set tab
      if (currentPanel != null) {
         hidePanel();
      }
      document.getElementById 
         ('panel'+panelNum).style.visibility = 'visible';
         currentPanel = panelNum;
         setState(panelNum);
   }
   
   function hidePanel() {
      //hide visible panel, unhilite tab
      document.getElementById
        ('panel'+currentPanel).style.visibility = 
         'hidden';
      document.getElementById
        ('tab'+currentPanel).style.backgroundColor = 
        '#ffffff';
      document.getElementById
        ('tab'+currentPanel).style.color = 'navy';
   }
   
   function setState(tabNum) {
      if (tabNum==currentPanel) {
         document.getElementById 
           ('tab'+tabNum).style.backgroundColor = 
           '#ddddff';
         document.getElementById
           ('tab'+tabNum).style.color = 'red';
      }
      else {
         document.getElementById
           ('tab'+tabNum).style.backgroundColor = 
           '#ffffff';
         document.getElementById
           ('tab'+tabNum).style.color = 'navy';
      }
   }
   
   function hover(tab) {
      tab.style.backgroundColor = 'ddddff';
   }
   </script>

When the page loads, it initializes the currentPanel variable and displays a default tab by calling the showPanel() function.

   <body onLoad="showPanel(1)">

The showPanel() function does most of the work in the script. It hides the current panel, shows the requested panel, stores the index of the current panel, and finally sets the state of the UI. The hidePanel() function performs two actions: it hides and un-highlights the current panel.

The setState() function sets the current tab's background and foreground colors to their highlighted state. By including setState() in a separate function, you can make use of it later in the onMouseOut event. Essentially, setState() makes sure that the current panel is always highlighted.

The hover() function is a helper function written explicitly for the onMouseOver event. Note that it's the only function that expects an object rather than a simple index. The hover() function lets you highlight tabs without the user having to click on them.

The only remaining task is to attach the events to the page elements. You'll need events for all the possible interactions with the tabs as well as the onLoad event in the <body> element that shows the first panel:

   <body onLoad="showPanel(1)">
   <div id="tab1" class="tab" style="left: 10;" 
      onClick = "showPanel(1);" 
      onMouseOver="hover(this);" 
      onMouseOut="setState(1)">Tab One</div>
   <div id="tab2" class="tab" style="left: 150;" 
      onClick = "showPanel(2);" 
      onMouseOver="hover(this);" 
      onMouseOut="setState(2)">Tab Two</div>
   <div id="tab3" class="tab" style="left: 290;" 
      onClick = "showPanel(3);" 
      onMouseOver="hover(this);" 
      onMouseOut="setState(3)">Tab Three</div>
   <div id="tab4" class="tab" style="left: 430;" 
      onClick = "showPanel(4);" 
      onMouseOver="hover(this);" 
      onMouseOut="setState(4)">Tab Four</div>
   <div id="tab5" class="tab" style="left: 570;" 
      onClick = "showPanel(5);" 
      onMouseOver="hover(this);" 
      onMouseOut="setState(5)">Tab Five</div>

Previous: Design a Tabbed Interface

Next: Use IFRAMES for External Content

Introduction	Design a Tabbed Interface
Activate the Tabs	Use IFRAMES for External Content

Return to Get Help with DHTML Page

Return to Main Get Help Page

Problem: How do I create a Tabbed User Interface?

Solution: Combine a few style sheet rules and some simple JavaScript routines to maintain the tab state!

Find Out More
• Get the Code

• Microsoft Windows Script Technologies

• Essential JavaScript

• Test the sample code (internal content)

• Test the sample code (external content)

	TALK BACK
Do you like tabbed interfaces? Did you think you had to create complicated script or use controls to implement tabbed interfaces? Can you think of ways to improve the article code? Join the discussions at Web.dhtml.general and Web.dhtml.scripting to get answers, make comments, or help others with their problems.

Sponsored Links