D08 Progress Tabs

Definition

An interaction design convention that is used to indicate a set of steps.


Usage

Progress Tabs are used when guiding a user though a set of steps.

v0 Progress Tab Bar

The Progress Tab bar is to be used before a d07v9 component. The current step is indicated by the addition of the class="currentstep" to the LI. Since the first LI has a class the "currentstep" class is added to that class value resulting in class="firststep currentstep"

Copy the code below and paste into your text editor.

No Templates Reference this

v1 Secondary Step Navigation

The Secondary Step Navigation is used at the bottom of the d07v9 component, immediately before the closing divs. The example below shows a colored background, but when used inside the d07v9 component, the background will turn white.

The "Previous" and "Next" text in the EM tags may be translated as needed and should be followed by a textual description of the next step.

Copy the code below and paste into your text editor.

No Templates Reference this

v1 x1 Secondary Step Navigation, w/o Left Link

This example shows the component without the left side link.

Copy the code below and paste into your text editor.

No Templates Reference this

v1 x2 Secondary Step Navigation, w/o Right Link

This example shows the component without the right side link.

Copy the code below and paste into your text editor.

No Templates Reference this

Contact About Sun News & Events Employment Site Map Privacy Terms of Use Trademarks Copyright 1994-2006 Sun Microsystems, Inc.