Checkbox (Tri-State)
- Feature Owner
- Mike Pinkerton
Currently the -moz-tristate
style property is not implemented, but is implemented as an
attribute. This should be fixed by M10.
There are two types of checkboxes: regular and tri-state. Regular checkboxes are exactly the same as checkboxes on web pages in HTML. Tri-state checkboxes are capable of being in three states: unchecked, mixed, and checked in that order.
Both types of checkboxes are declared using the normal
HTML tag <html:input type="checkbox">.
The only difference is that for
tri-state checkboxes, you specify a style rule indicating it
is tri-state (setting
-moz-tristate equal to
true).
For normal checkboxes, you can use the
checked property for accessing
and changing the state of the checkbox. Since this property
is a boolean, we cannot use it when the checkbox is in
tri-state mode. As a result, you must use the
getAttribute and
setAttribute AOM functions to
access the -moz-tristatevalue
attribute.
At any time, a checkbox may be switched to the other mode
by setting
-moz-tristate appropriately. The current value will be maintained,
unless of course it is in the mixed state and it is
transforming back into a normal checkbox. In this case, the
box will revert to being checked. Note that the
-moz-tristatevalue attribute is
not present when the checkbox is in normal mode, and
will be removed when transforming from tri-state to normal
mode. This is to ensure that the normal checkbox does not
deviate from the HTML4 standard.
Checkboxes may be placed within labels
(<html:label>) so that
clicking on the explanitory text of the checkbox will toggle
it.
<?xml version="1.0"?>
<?xml-stylesheet href="xul.css" type="text/css"?>
<!DOCTYPE window>
<window style="width: 100%; height: 100%"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
align="vertical">
<html:script>
function setTriMixed()
{
var tsbox = document.getElementById("tristate");
tsbox.setAttribute("-moz-tristatevalue", "2");
}
function setNormalChecked ()
{
var tsbox = document.getElementById("normal");
tsbox.checked = true;
}
</html:script>
<html:hr/>
<!-- this is a normal checkbox -->
<html:label>
<html:input type="checkbox" id="normal"/>Normal checkbox
</html:label>
<html:br/>
<!-- this is a tristate checkbox -->
<html:label>
<html:input type=checkbox id="tristate" style="-moz-tristate: true"/>
Tri-state checkbox
</html:label>
<!-- some buttons that just set the value of the checkboxes -->
<html:button onclick="setTriMixed()">Set Tri-State To Mixed State
</html:button>
<html:button onclick="setNormalChecked()">Set Normal To Checked
</html:button>
</window>
The checkbox's look on a mouse down can be controlled using CSS, as well as the look when the mouse is hovering over the box.
input[type=checkbox]:active{
background: darkGray;
border: 1px inset black;
}
input[type=checkbox]:hover{
border: 1px solid black;
}