Create A Tabbed User Interface

Create A Tabbed User Interface (cont'd)

Use IFRAMES for External Content
This version of the tabbed UI looks and acts very much as if an <iframe> were embedded on the page. In fact, if you need to use external content for the panel contents, an <iframe> is extremely easy to implement. Just swap out the <div> elements with <iframe> elements, add a src attribute, and modify the tab text:

   <body onLoad="showPanel(1)">
   <div id="loading" class="panel" style="visibility: 
      visible; font: 12pt Verdana,sans-serif; color: 
      navy;">Loading...</div>
   <div id="tab1" class="tab" style="left: 10;" onClick = 
      "showPanel(1);" onMouseOver="hover(this);" 
      onMouseOut="setState(1)">JavaScript OOP</div>
   <div id="tab2" class="tab" style="left: 150;" 
      onClick = "showPanel(2);" 
      onMouseOver="hover(this);" 
      onMouseOut="setState(2)">Animation Generator</div>
   <div id="tab3" class="tab" style="left: 290;" 
      onClick = "showPanel(3);" 
      onMouseOver="hover(this);" 
      onMouseOut="setState(3)">Form Validation</div>
   <div id="tab4" class="tab" style="left: 430;" 
      onClick = "showPanel(4);" 
      onMouseOver="hover(this);" 
      onMouseOut="setState(4)">Essential JavaScript</div>
   <div id="tab5" class="tab" style="left: 570;" 
      onClick = "showPanel(5);" 
      onMouseOver="hover(this);" 
      onMouseOut="setState(5)">Pop Up Menus</div>
   
   <!-- watch for line breaks in the URL's,
        they should be one line in the browser. -->
   <iframe id="panel1" class="panel" 
      src="http://gethelp.devx.com/techtips/dhtml_pro/
      10min/10Min1101/td112601-1.asp"></iframe>
   <iframe id="panel2" class="panel" 
      src="http://gethelp.devx.com/techtips/dhtml_pro/
      10min/10Min091701/td091701-1.asp"></iframe>
   <iframe id="panel3" class="panel" 
      src="http://gethelp.devx.com/techtips/dhtml_pro/
      10min/10Min0901/td090101-1.asp"></iframe>
   <iframe id="panel4" class="panel" 
      src="http://gethelp.devx.com/techtips/dhtml_pro/
      10min/10min0801/td080101-1.asp"></iframe>
   <iframe id="panel5" class="panel" 
      src="http://www.dhtml-zone.com/articles/td030501/
      td030501-1.asp"></iframe>
   </body>

The extra <div> element in the preceding code that appears just after the <body> element displays while the browser fetches the external content. That way, users see something during the load process, which is usually a good idea, because users should know that the browser is working for them. Adding the extra <div> won't make the page load any faster but it will increase the user's perception of speed.

There are some obvious benefits of implementing a tabbed interface in this manner. Tabs let users navigate between content more easily than switching pages. Because tabs are relatively easy to implement, development time is short. Also, if you're using internal content, the pages load quickly. Switching from internal to external content is painless—just change the panel <div> tags to <iframe> tags. Finally, the tabs provide state for the user and are visible at all times.

Tom Duffy , DevX's JavaScript Pro, is an Associate Professor at Norwalk Community College, Norwalk, CT where he teaches Web Development and Java. Tom is also the Manager of the NCC Ventures Lab, the College's in-house Web design studio. You can reach him via e-mail at: nk_duffy@commnet.edu.

Previous: Activate the Tabs

Next: Introduction

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