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.

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.

Accessibility

The display controls are created as an ARIA Tool Bar.

Put role="toolbar" on the table tag. Also include the aria-labelledby attribute and set it to the value of the id of the td tag that contains the "Display:" text.

Put role="button" on each link. If a view is selected, put aria-pressed="true" otherwise put aria-pressed="false."

Repeat the title tag text in an aria-label on each link.

Each link contains lotusAltText that will show up when images are turned off (including high contrast mode). So in high contrast mode, these controls will be a series of links.

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.

1/18/11: marked up the display controls as an ARIA Tool Bar for accessibility. Added the accessibility section.

See also: