XUL Programmer's Reference Manual | ||||||||||||||||||||||||
<tree> | ||||||||||||||||||||||||
|
||||||||||||||||||||||||
<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.
|
multiple | |||||||||||||||||||||||
DescriptionThe multiple attribute specifies whether the tree allows multiple selection or not. Syntax<tree multiple="true | false" /> Example
NotesThe default for multiple selection is false, which means that only a single child of the tree can be selected at any one time. When multiple select is enabled, you can select multiple elements using |
||||||||||||||||||||||||
onclick | ||||||||||||||||||||||||
Description
onclick is an event listener attribute for adding functionality to tree widgets.Syntax <tree container="true" onclick="javascript statements or javascript function call"Example <tree container="true" onclick="alert('Collapsing tree...'); Collapse();" />Notes The onclick event listener is a way to invoke commands from user clicks on a tree widget. |
||||||||||||||||||||||||
ondblclick | ||||||||||||||||||||||||
Description
ondblclick is an event listener attribute for adding functionality to tree widgets.Syntax <tree container="true" ondblclick="javascript statements or javascript function call"Example <tree container="true" ondblclick="Tree_Properties();" />Notes The ondblclick event listener is a way to invoke commands when the user double clicks on a tree. |
||||||||||||||||||||||||
onselect | ||||||||||||||||||||||||
Description
onselect is an event listener attribute for adding functionality to trees.Syntax <tree container="true" onselect="javascript statements or javascript function call"Example <tree container="true" onselect="change_display_class();" />Notes
|
||||||||||||||||||||||||
selectedItems | ||||||||||||||||||||||||
Description
selectedItems returns a nodeList of the items selected in the tree.Syntax nodeList = treeObj.selectedItemsExample nodelist = treeObj.selectedItemsNotes
|
||||||||||||||||||||||||
selectedIndex | ||||||||||||||||||||||||
Description
selectedIndex returns returns the index of the selected item the tree.Syntax i = treeObj.selectedIndexExample i = treeObj.selectedIndex;Notes
|
||||||||||||||||||||||||
getItemAtIndex | ||||||||||||||||||||||||
Description
getItemAtIndex returns a nodeList of the items selected in the tree.Syntax node = treeObj.getItemAtIndex(i)Example i = treeObj.selectedIndex;Notes
|
||||||||||||||||||||||||
collapsed | ||||||||||||||||||||||||
Description
collapsed is an optional attribute that specifies the tree as collapsed and not visible.Syntax <tree collapsed="[ true | false ]" />Example <tree collapsed="true" >Notes
|
||||||||||||||||||||||||
getNextItem | ||||||||||||||||||||||||
Description
getNextItem selects an item in the tree based on a start and an offset.Syntax <tree getNextItem(start, offset) ... />Example start = document.getElementById("starter_cell");Notes
|
||||||||||||||||||||||||
getPreviousItem | ||||||||||||||||||||||||
Description
getPreviousItem selects an item in the tree based on a start and an offset.Syntax <tree getPreviousItem(start, offset) ... />Example start = document.getElementById("starter_cell");Notes
|
Last updated: 02/22/01 Ian Oeschger