XUL Programmer's Reference Manual | ||||||||||||||||||||||
<tree> | ||||||||||||||||||||||
|
||||||||||||||||||||||
<treehead> | ||||||||||||||||||||||
|
||||||||||||||||||||||
<treecol> | ||||||||||||||||||||||
|
||||||||||||||||||||||
<treerow> | ||||||||||||||||||||||
|
||||||||||||||||||||||
<treeitem> | ||||||||||||||||||||||
|
||||||||||||||||||||||
<tree> is the root element in a XUL tree. It provides the ability
to display multiple items in a tabular format. Each item is represented
as a row in the table. Each row may consist of multiple cells.The XUL tree
structure is similar to an HTML table structure. The following tags are
roughly analogous to their HTML table counterparts.
To insert a tree widget into a document, use the tree tag. This tag is analogous to the table tag in HTML. The tree widget can contain a caption, which can be specified using the treecaption tag. The tree's column information can be specified using the treecolgroup and treecol tags; these tags respond to all the same properties that the HTML col tags do. These column tags can be used to specify column widths and to apply styles to individual columns in the tree view. Tree column tags can respond to an additional CSS property, column-layout, which indicates whether or not this column's size is alterable using the tree's column resizing capabilities. It has values of fixed and flexible, with the default being flexible. A tree can contain headers, bodies, and footers, just as a table does. A tree widget's body, unlike a table's body will constrain itself when the height of the table is constrained. The treeitem tag is used to declare a single item (along with that item's row and children) in the tree. The tree item contains one or more rows, which are specified using the treerow tag. Each row consists of one or more cells, which are specified using the treecell tag. Tree items are either open or closed, and their state is specified using the open attribute. This attribute, when set to true, indicates that the tree item's children should be displayed in the tree. If it is set to false, or if it isn't set at all, then the tree item's children are not displayed. A tree item's children are specified using the treechildren tag, which is placed within the parent treeitem tag. The treechildren tag contains tree items that represent the children of the parent node. The tree automatically handles selection, and it is capable of supporting single and multiple selection (through the use of CTRL/command and SHIFT modifier keys). The tree's selection is reflected into the content model. Tree items that are selected have an attribute called selected set to true. Tree rows that are selected have an attribute called selectedrow set. Tree cells that are selected have an attribute called selectedcell that is set to true. CSS can be applied using attribute selector rules, thus enabling the tree designer to control the look of the tree's selection. A select handler can be attached to the tree, and this handler will be invoked whenever the tree's selection changes. You can either add it as an attribute (e.g., onselect) on the tree tag or add it using the DOM addEventListener method. The tree widget also supports hover feedback on items and cells. This hover feedback is also reflected into the content model. Tree items that are currently moused over have an attribute called hover set to true. Tree cells that are being moused over have an attribute called hover set to true. Tree rows also use hover. CSS can be applied using attribute selector rules, which enable control of the hover feedback effects for the tree. [This will probably change to use the :hover mechanism at some point, assuming some sort of bubbling mechanism for hover is determined.] Because the tree handles selection, events that would normally go to the content inside the cell are intercepted by the cell. This behavior can be turned off on a cell by cell basis by setting the treeallowevents attribute on the cell. This attribute, when set to true, indicates that the cell is unselectable, and that the content inside should receive events (like mouse clicks and keystrokes). To selectively allow events to go to cell content
(e.g., a button inside a cell), the treeallowevents attribute can be placed
on a node that is a descendant of the cell.
|
Last updated: 13:10 1/26/00 Ian Oeschger