Menu Button Requirements
Written by Eric Vaughan
Last updated 3/12/99
Overview
This document covers two related UI elements: Image Buttons and Menu Buttons.
An Image Button is a button capable of displaying both an image (gif, jpeg, etc) and descriptive text within the boundary of the button. Clicking anywhere within the boundary of the object triggers an action (normally a JavaScript onClick handler). The button can be enabled or disabled, and have a different appearance when the mouse is inside its border.
A Menu Button extends an Image Button to allow for a menu or tree to popdown from the button when the mouse is down for a certain amount of time (referred to as "click and hold"). An example of a Menu Button in 4.X is the "Back" button which pops down a menu containing the window history on a click-and-hold. Mozilla extends this notion with the ability to pop down a live tree view.
Requirements
For Image Buttons:
- Manipulation of images and properties through the DOM and CSS
- Must support the following JavaScript event handlers
- onClick
- onMouseOver
- onBlur
- onChange
- onFocus
- Must support 4 images and
states
normal
rollover
depressed
disabled
- Must support multiple alignment
text right image left
text left image right
Text bottom image top
Text top image top - If the button is compressed smaller than it can accommodate,
it needs to be able to truncate its text.
Right truncation
text right i...
Left truncation
....t image right
Center truncation
text ... left
- A context menu should appear with a context click if the button doesn't have a menu attached to it already.
- Should be able to gray out its image automatically in a disabled state (without forcing an additional image to be specified).
For Menu Buttons
Everything an Image Button could do, plus the following:
- show a popdown menu, either on a click or a click-and-hold
- show a popdown tree, either on a click or a click-and-hold
- For the tree, users need to be able to expand or collapse folders within the tree without it going away. The tree goes away only when the user clicks outside of the presented tree or on an element that has no children (a "leaf").
- Children which populate the popdown menu or popdown tree are specified as children of the Menu Button in the DOM.
- Child content can be generated from an RDF datasource. This implies that the creation of this child object (be it a tree, menu, etc) must be fully dynamic. The button should only attempt to construct the child object when it knows it needs to display it.