Buttons
- Feature Owner
- Eric Vaughan
There are two types of buttons in XUL, normal buttons, and toolbar buttons. Both buttons have very similar attributes, except for a slight difference in rendering.
The button or toolbarbutton tag is used to insert a button into a
XUL document.
The button's text string is specified using the label attribute.
<button label="Bookmarks"/>
The button's image can be described either using CSS or by using the image
attribute. The attribute's value is the URL to use for the image.
<button image="http://www.mozilla.org/myImage.gif"/>
If the image attribute is omitted, then the button will pick up its image
from the list-style-image CSS property.
XUL: <button class="folderButton"/>
CSS: .folderButton{ list-style-image: url("http://www.mozilla.org/folder.gif"); }
The image can be placed above, below, to the left, or to the right of a button's label. This can
be accomplished by using the dir and orient attributes. The dir
attribute specifies which side of the label the image will be on. If dir is set to normal, the image
can be either to the left or above the label. If it is set to reverse, the image can be to the right or below the label.
The orient attribute specifies whether the layout of the items inside the button is horizontal or vertical.
Some examples:
<button label="Bookmarks" image="http://www.foo.com/bar.png" dir="normal" orient="vertical"/>
This example will produce a button with a label of Bookmarks and the image bar.png above the label.
<button label="Bookmarks" image="http://www.foo.com/bar.png" dir="reverse" orient="horizontal"/>
This example will produce a button with a label of Bookmarks and the image bar.png to the right of the label.
The button can be disabled by setting the disabled attribute
on the button element. This attribute can be set and unset using the setAttribute
and unsetAttribute AOM APIs.
When a button is clicked, it executes a command handler (in addition
to the normal click handler). This can be set on the button using the oncommand
attribute.
The button can be locked into a pressed state
by setting the checked attribute on the button to a value of
true. This attribute, when true, indicates that the button should appear in a depressed state.
The button's appearance is highly customizable using CSS. The button's rollover
appearance can
be set using the :hover pseudoclass. Its depressed look can be
set using the :active pseudoclass.
button:hover{
...
}
Because the button's image can be specified in CSS, different style rules can contain different images for the button's various states. Buttons can therefore have rollover, depressed, and disabled images. Buttons can even animate when certain conditions are met by switching between animated and static images (e.g., the Netscape throbber has a style rule that switches to an animated gif when a busy attribute is set on the button element).
When a button's width is constrained, it can be made to crop its text string.
The button's cropping style can be specified using
an attribute. The attribute is called crop, and it
has values of start, center, and end.
For example, with crop="end", the string is
truncated by removing characters on the right hand side of
the string until the string fits inside the button. The button places ellipses (...)
on the right
of the string.