Create A Tabbed User Interface

Create A Tabbed User Interface (cont'd)

Design a Tabbed Interface
Designing a tabbed interface is straightforward procedure after you know how the interface works. In this article, you'll see how to create a set of tabs across the top of the page and swap out the content as the user clicks on each tab. The procedure is generic; you can use the same procedure to align tabs vertically, or place them anywhere on the page. You'll also see how to maintain the UI state—that is, highlight the active tab so users always know which tab is active. The code shown in this article works in Internet Explorer 4+ and in Netscape 6. Here's the tabbed interface procedure:

Create a set of <div> tags to hold the tabs across the top of the page. Create separate <div> tags to hold panels corresponding to each tab. The panels hold the content—the text, graphics and controls you want to appear when the user clicks on a tab.

Write the code to activate the tabs. When a user clicks on a tab, you want to display the appropriate content for that tab. You may also want to highlight tabs as the user moves the cursor over them.

Write code to deactivate the current tab and hide the associated content when a user selects a different tab.

Open your favorite text editor and add the following to create the tabs and panels:

   <html>
      <head>
         <title>Tabbed UI</title>
      </head>
      <body>
         <div id="tab1" class="tab" 
            style="left: 10;">Tab One</div>
         <div id="tab2" class="tab" 
            style="left: 150;">Tab Two</div>
         <div id="tab3" class="tab" 
            style="left: 290;">Tab Three</div>
         <div id="tab4" class="tab" 
             style="left: 430;">Tab Four</div>
         <div id="tab5" class="tab" 
             style="left: 570;">Tab Five</div>
         <div id="panel1" class="panel">Panel 1</div>
         <div id="panel2" class="panel">Panel 2</div>
         <div id="panel3" class="panel">Panel 3</div>
         <div id="panel4" class="panel">Panel 4</div>
         <div id="panel5" class="panel">Panel 5</div>
      </body>
   </html>

Each tab and panel's id attribute value has an appended number, for example, tab1, and panel1he appended number matches the tabs to the panels. Using this simple numbering mechanism, you can pass the number to any JavaScript routine and then retrieve a reference to the appropriate tab or panel. The class attribute for each <div> specifies one of two style sheet rules, named tab and panel, which implement the following style sheet rules.

   <style>
      .tab{
         color: navy;
         background-color: white;
         border: thin solid navy;
         position: absolute;
         top: 10;
         width: 140;
         text-align: center;
         font: 9pt Verdana,sans-serif;
         z-index: 2;
         padding: 3;
         cursor: pointer;
         cursor: hand;
      }
      .panel{
         position: absolute;
         top: 32;
         left: 10;
         width: 95%;
         z-index: 1;
         height: 85%;
         visibility: hidden;
         font: 12pt Verdana,sans-serif;
         color: navy;
         border: thin solid navy;
         padding: 10;
         overflow: auto;
      }
   </style>

These simple style sheet rules include positioning, font, color and border properties. The border property enhances the tabbed metaphor by providing rectangles around the tabs and panels. Setting the overflow property to auto forces the browser to draw scrollbars if the tab width exceeds the page width..

Previous: Introduction

Next: Activate the Tabs

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