domapi.Speedbutton

See also: Elm
See also: Component

A simple button with a graphic as its content (with optional caption). The graphic is an Imagelist and has 4 states - normal, over, down and disabled. Speedbuttons can be grouped together to form radiobuttons, or they can be made to function in a toggle state. They can also have Popupmenus associated with them to for dropdowns.

Images

Speedbuttons are gylph buttons that usually reside in a toolbar or buttonbar. But you can place them anywhere on your page.

Speedbuttons can be either enabled or disabled. When disabled, they cannot be selected and the disabled image (if provided) is shown. To provide images for the different states, paste them alongside your normal image. For example, here is a single image for an "open" button:

Notice the 4 states - normal, over, down and disabled. The component will automatically handle which portion to display using clipping.

radioGroup

Each button has a default radioGroup id of zero. Changing this to a non-zero value makes the button behave in a toggle fashion.
Clicking the button once would make it stay depressed or "on". If you have doAllowAllUp set to true, clicking the button again will cause it to pop back out.
Mulitple speedbuttons with the same non-zero radioGroup id become what is refered to as a "radio group" owning to the way they resemble old style car radio radio buttons. In these old radios, only one button could be pressed in at once, and presing another button causes all the other buttons to pop out.
If you were to have say three speedbuttons on your page that all have a radioGroup id of 1, these then become a radio group and only one can be depressed at any time.

See the Speedbutton example for more.

Dropdown menus

You can attach a Popupmenu to a Speedbutton by assigning it to its dropDown property. This causes a little downward arrow to appear next to the Speedbutton. When clicked, the Popupmenu appears.

Events

To respond to the user pressing the speedbutton, simply assign a method to the onclick() event.
Example:

<script src="../src/domapi_c.js"></script>
<script>
  domapi.loadUnit("speedbutton");
  onload = function() {
    button1 = domapi.Speedbutton({img:"save.gif", hint:"Save"});
    button1.onclick = button1_onclick;
  }
  function button1_onclick(){if(this.enabled)alert("onclick")};
</script>

---

Speedbutton Example: system, aqua

---

Speedbutton Constructor

var speedbutton1 = domapi.Speedbutton({
  src            : "",
  down           : false,
  hint           : "",
  imgH           : 16,
  imgW           : 16,
  kind           : "button",
  text           : "",
  enabled        : true,
  dropDown       : null,
  radioGroup     : 0,
  orientation    : "horizontal",
  dropdownArrow  : "▼",
  imgOrientation : "horizontal" 
});

Constructor Details

Parameter	Type	Default	Description
src	String		The path to the image. The image should be a 4 element strip.
down	boolean	false	Used in conjuction with radioGroup. In radio mode, use the down property to determine which button is selected. read-only.
hint	String		A flyover hint for the button. Defaults to the same value as text.
imgH	integer	16	Height of the image.
imgW	integer	16	Width of the image. Note: for multi-state buttons, this is the width of a single state image.
kind	String	button	Determines the type of button to create. Valid entries are button and dropdown. If kind is dropdown, also provide the dropDown parameter (note the spelling)
text	String		The caption of the button. Optional - defaults to blank.
enabled	boolean	true
dropDown	Popupmenu	null	If kind is dropdown, this property is a reference to the Popupmenu to use.
radioGroup	integer	0	Used for radio buttons. Any buttons with the same non-zero radioGroup id behave as a radio group.
orientation	String	horizontal	Refers to the layout of the image and the optional caption, defined in text. Possible values are horizontal and vertical. When horizontal, the caption appears beside the image. When vertical, the caption is below.
dropdownArrow	String	▼	The character or glyph to use for the dropdown arrow.
imgOrientation	String	horizontal	Refers to the layout of the imagestrip. Do not confuse this with the orientation property. Has no affect at all on the visual display. Possible values are horizontal and vertical. See Imagelist for more info.

Methods unique to domapi.Speedbutton

Properties unique to domapi.Speedbutton

---

back to top back to top back to top back to top