How to Work with Tabs in CSS3

Many developers use tabbed interfaces to reduce application complexity. If you can focus the user’s attention on one item at a time, you reduce the potential for errant input. In this CSS3 example, you begin with a simple function call. (You can find complete code for this example in the \Chapter 06\Widgets folder of the downloadable code as Tabs.HTML.)

$(function()
 {
 $("#Configuration").tabs();
 });

The trick for this example is in the HTML tags, just as it was for the Accordion widget example. There are some important differences in how you create the two pages to obtain the desired appearance, as shown in the following code:

<form id="ConfigForm" method="get" action="Tabs.html">
 <div id="Configuration">
 <ul>
  <li><a href="#Tab1">Foreground Color</a></li>
  <li><a href="#Tab2">Background Color</a></li>
  <li><a href="#Tab3">Options</a></li>
 </ul>
 <div id="Tab1">
  <input id="FGRed"
  type="radio"
  name="Foreground"
  value="Red"
  checked="checked" />
  <label for="FGRed">Red</label><br />
... More inputs and labels ...
 </div>
 <div id="Tab2">
  <input id="BGRed"
  type="radio"
  name="Background"
  value="Red"
  checked="checked" />
  <label for="BGRed">Red</label><br />
... More inputs and labels ...
 </div>
 <div id="Tab3">
  <input id="Sounds"
  type="checkbox"
  name="Sounds"
  value="SpecialSounds" />
  <label for="Sounds">Use Special Sounds</label>
  <br />
  <input id="Effects"
  type="checkbox"
  name="Effects"
  value="SpecialEffects" />
  <label for="Effects">Use Special Effects</label>
 </div>
 </div>
 <input id="ChangeConfig"
  type="submit"
  value="Change Configuration" />
</form>

Notice that the <h2> elements are gone in this case. Instead of using headings to define the separation between elements, you provide an unordered list (<ul>) instead. The list must contain a href to each of the <div> elements in the page. There isn’t any difference in the page content. You also need to provide some CSS to format the control as shown here.

<style>
 #Configuration
 {
 width: 90%;
 text-align: center;
 }
 #Configuration div
 {
 text-align: left;
 }
</style>

In this case, the #Configuration style defines the overall size of the tabbed interface and the fact that the tabs have centered text. The #Configuration div changes the content alignment to left.

image0.jpg

To make a change, you click the tab that contains the information you want to see. You make changes as normal. Clicking the Change Configuration button sends the changes to the server. If you test this example by using the same process you did for the accordion example, you get precisely the same results — only the interface appearance has changed.

blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.