Skip to main content link. Accesskey S

Display Controls

Display controls sit at the top of the main content and allow you to view the content in a collapsed or expanded view. They are created in a specific order, with specific hover text.

Directionality:

This demonstrates all the existing controls and their hover text, but realistically, only a few view options would be offered.

Classes

  • lotusViewControl - the container class assigned to a table tag
  • lotusView - the class assigned to each individual link (the icon)
  • lotusSelected - This class is an additional class on the selected icon (assigned to the link). It's used for high contrast mode.
  • lotusSprite - Class that sets up the links to use sprites
  • lotusSummaryOn - Class for the summary icon in its unselected state
  • lotusSummaryOff - Class for the summary icon in its unselected state
  • lotusDetailsOn - Class for the details icon in its selected state
  • lotusDetailsOff - Class for the details icon in its unselected state
  • lotusTreeOn - Class for the tree icon in its unselected state
  • lotusTreeOff - Class for the tree icon in its unselected state
  • lotusTileOn - Class for the tile icon in its unselected state
  • lotusTileOff - Class for the tile icon in its unselected state
  • lotusFolderOn - Class for the folder icon in its unselected state
  • lotusFolderOff - Class for the folder icon in its unselected state
  • lotusAltText - Class for text to show in place of the icon when images are turned off.

Examples

Basic Implementation

Display controls are created using css sprites and a table. Assign the lotusViewControl class to the table tag.

The table contains one row of view sprites (each view control sits in a link tag with class of lotusView and lotusSprite and an additional class depending on what control and state of the control you are showing.

Put the word "Display" in the first table cell.

Put the toggle folder view control in its own table cell.

Put the appropriate title text and alternate text for when images are turned off on each view control (see the code).

Variations

We don't have a grid icon yet. For now, use the summary icon.

Sample HTML

CSS (views.css)

Theme CSS (viewsTheme.css)

This component began as view controls only, without the word display.

The control was converted to a table for layout because of difficult display issues in right-to-left languages. The table also makes it easier to be flexible with the amount of individual controls you want to show.

6/3/09: added lotusSelected class on selected link to allow us to style the selected link text in high contrast mode.

See also:

IBM, the IBM logo, ibm.com and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.