Tree

Tree
Prev	1. XUL Components	Next

Icon Style CSS Class

CSS Definition	Description	Default Values
`tree-root-open`	The icon used to represent the open state for tree items at the root level.	`width: 18px; min-height: 18px; height: 100%;` `background-image: url(${c:encodeURL('~./zul/img/tree/open.png')});` `background-repeat: no-repeat;` `display:-moz-inline-box; vertical-align:top;` `display:inline-block;`
`tree-root-close`	The icon used to represent the close state for tree items at the root level.	`width: 18px; min-height: 18px; height: 100%;` `background-image: url(${c:encodeURL('~./zul/img/tree/close.png')});` `background-repeat: no-repeat;` `display:-moz-inline-box; vertical-align:top;` `display:inline-block;`
`tree-tee-open`	The icon used to represent the open state for tree items that have next siblings.	`width: 18px; min-height: 18px; height: 100%;` `background-image: url(${c:encodeURL('~./zul/img/tree/open.png')});` `background-repeat: no-repeat;` `display:-moz-inline-box; vertical-align:top;` `display:inline-block;`
`tree-tee-close`	The icon used to represent the close state for tree items at have next siblings.	`width: 18px; min-height: 18px; height: 100%;` `background-image: url(${c:encodeURL('~./zul/img/tree/close.png')});` `background-repeat: no-repeat;` `display:-moz-inline-box; vertical-align:top;` `display:inline-block;`
`tree-last-open`	The icon used to represent the open state for tree items that don't have next siblings.	`width: 18px; min-height: 18px; height: 100%;` `background-image: url(${c:encodeURL('~./zul/img/tree/open.png')});` `background-repeat: no-repeat;` `display:-moz-inline-box; vertical-align:top;` `display:inline-block;`
`tree-last-close`	The icon used to represent the close state for tree items at don't have next siblings.	`width: 18px; min-height: 18px; height: 100%;` `background-image: url(${c:encodeURL('~./zul/img/tree/close.png')});` `background-repeat: no-repeat;` `display:-moz-inline-box; vertical-align:top;` `display:inline-block;`
`tree-tee`	The icon used to represent the T-shape icon.	`width: 18px; min-height: 18px; height: 100%;` `display:-moz-inline-box; vertical-align:top;` `display:inline-block;`
`tree-vbar`	The icon used to represent the \|-shape (vertical bar) icon.	`width: 18px; min-height: 18px; height: 100%;` `display:-moz-inline-box; vertical-align:top;` `display:inline-block;`
`tree-last`	The icon used to represent the L-shape icon -- no next sibling.	`width: 18px; min-height: 18px; height: 100%;` `display:-moz-inline-box; vertical-align:top;` `display:inline-block;`
`tree-spacer`	The icon used to represent the blank icon.	`width: 18px; min-height: 18px; height: 100%;` `display:-moz-inline-box; vertical-align:top;` `display:inline-block;`

To switch to another built in style( the style used prior 3.0), set iconSclass to “dottree.”

<zk>
    <window>    
        <window title="tree demo" border="normal">        
            <tree iconSclass="dottree" id="tree" width="90%" rows="5">            
            ...

Various Treeitem Style – Selected, Focused, Hover

CSS Definition	Description	Default Values
`tr.item, tr.item a, tr.item a:visited`	Item visited	`font-size: small; font-weight: normal; color: black;` `text-decoration: none;`
`tr.item a:hover`	Item hover	`text-decoration: underline;`
`tr.seld, td.seld`	Item selected	`background: #b3c8e8; border: 1px solid #6f97d2;`
`tr.overd, td.overd`	Item onmouseover	`background: #D3EFFA;`
`tr.overseld, td.overseld`	Item selected and onmouseover	`background: #82D5F8;`
`tr.focusd`	Item focused	`background-image: url(${c:encodeURL('~./zul/img/focusd.gif')});` `background-repeat: no-repeat;`

Treeitem Style – Font Style

CSS Definition	Description	Default Values
`div.foot-cell-inner, div.cell-inner, div.head-cell-inner`	Tree item inner cell	`overflow:hidden; border: 0; margin: 0; padding: 0;`

Customize the font of treeitem

...
<style>
div.cell-inner{
    font-family: cursive;    
    color:red;    
}
</style>
<tree id="tree">

Customize Tree Headers

CSS Definition	Description	Default Values
`div.tree-head`	Tree header	`border: 0;` `overflow: hidden;` `width: 100%;`
`div.tree-head tr`	Tree header - tr	`background-image: url(${c:encodeURL('~./zul/img/grid/s_hd.gif')});`
`div.tree-head th`	Tree header - th	`overflow: hidden;` `border: 1px solid;` `border-color: #DAE7F6 #9EB6CE #9EB6CE #DAE7F6;` `white-space: nowrap;` `padding: 2px;` `font-size: small;` `font-weight: normal;`
`div.head-cell-inner`	The cell of tree header	`font-size: small; font-weight: normal; font-family: Tahoma, Garamond, Century, Arial, serif;`

Customize the style of tree header

...
<style>
div.head-cell-inner {
    color: red;    
    font-size: 16px;    
    font-weight: 900;    
}
div.tree-head th{
    border: dotted 2px purple;    
    background-color: #00FF00;    
}
div.tree-head{
    border: solid 2px orange;    
}
</style>
<tree id="tree">

Customize Tree Headers

CSS Definition

Description

Default Values

div.tree-foot

Tree footer

border: 0;

overflow: hidden;

width: 100%;;

div.foot-cell-inner

Cell of tree footer

border: 0;

margin: 0;

padding: 0;

Customize the style of tree header

    ...    
    <style>    
        div.tree-foot, div.foot-cell-inner{        
            background-color: red;            
            color:white;            
        }        
    </style>    
    <tree id="tree" width="300px" rows="5">

Prev	Up	Next
Basic Toolbar with Toolbarbutton	Home