Style Based on State

Building on the Quick Start example, you can change the colors and styles of each element in the tree using CSS styling. For available tree CSS selectors, see the jquery.wijmo.wijtree.css file in your installation folder.

In the <head> section of your HTML file, above the script to initialize the widget, add the following style which changes the background color for elements of the Tree depending on whether they are in hover state or active state, and changes the font weight when a node is in expanded state.

Style	Copy Code
<style type="text/css"> /* jQuery UI hover state / .wijmo-wijtree .ui-state-hover { background: Blue; color: White; } / jQuery UI active state / .wijmo-wijtree .ui-state-active { background: #009900; color: #ffffff; } / wijtree expanded selector */ .wijmo-wijtree .wijmo-wijtree-node[aria-expanded="true"] { font-weight:800 } </style>

Style

Copy Code

<style type="text/css">
/* jQuery UI hover state */
.wijmo-wijtree .ui-state-hover
{
  background: Blue;
  color: White;
}

/* jQuery UI active state */
.wijmo-wijtree .ui-state-active
{
  background: #009900;
  color: #ffffff;
}

/* wijtree expanded selector */
.wijmo-wijtree .wijmo-wijtree-node[aria-expanded="true"]
{
  font-weight:800
}
</style>

No changes are necessary in the script section of your HTML file. The basic script is sufficient to create the tree.

In the <body> section of your HTML file, replace the simple unordered list with this markup that includes more tree nodes, which allows you to see multiple states at once more easily.

Markup	Copy Code
<div> <ul id="tree"> <li class="folder"><a><span>Folder 1</span></a> <ul> <li class="folder"><a><span>Folder 1.1</span></a> <ul> <li class="file"><a><span>File 1.1</span></a></li> <li class="file"><a><span>File 1.2</span></a></li> <li class="file"><a><span>File 1.3</span></a></li> <li class="file"><a><span>File 1.4</span></a></li> <li class="file"><a><span>File 1.5</span></a></li> </ul> </li> <li class="file"><a><span>File 1.2</span></a></li> <li class="file"><a><span>File 1.3</span></a></li> <li class="file"><a><span>File 1.4</span></a></li> <li class="file"><a><span>File 1.5</span></a></li> </ul> </li> <li class="folder"><a><span>Folder 2</span></a> <ul> <li class="file"><a><span>File 2.1</span></a></li> <li class="file"><a><span>File 2.2</span></a></li> <li class="file"><a><span>File 2.3</span></a></li> <li class="file"><a><span>File 2.4</span></a></li> <li class="file"><a><span>File 2.5</span></a></li> </ul> </li> <li class="folder"><a><span>Folder 3</span></a> <ul> <li class="file"><a><span>File 3.1</span></a></li> <li class="file"><a><span>File 3.2</span></a></li> <li class="file"><a><span>File 3.3</span></a></li> <li class="file"><a><span>File 3.4</span></a></li> <li class="file"><a><span>File 3.5</span></a></li> </ul> </li> </ul> </div>

Markup

Copy Code

<div>
    <ul id="tree">
        <li class="folder"><a><span>Folder 1</span></a>
            <ul>
                <li class="folder"><a><span>Folder 1.1</span></a>
                    <ul>
                        <li class="file"><a><span>File 1.1</span></a></li>
                        <li class="file"><a><span>File 1.2</span></a></li>
                        <li class="file"><a><span>File 1.3</span></a></li>
                        <li class="file"><a><span>File 1.4</span></a></li>
                        <li class="file"><a><span>File 1.5</span></a></li>
                    </ul>
                </li>
                <li class="file"><a><span>File 1.2</span></a></li>
                <li class="file"><a><span>File 1.3</span></a></li>
                <li class="file"><a><span>File 1.4</span></a></li>
                <li class="file"><a><span>File 1.5</span></a></li>
            </ul>
        </li>
        <li class="folder"><a><span>Folder 2</span></a>
            <ul>
                <li class="file"><a><span>File 2.1</span></a></li>
                <li class="file"><a><span>File 2.2</span></a></li>
                <li class="file"><a><span>File 2.3</span></a></li>
                <li class="file"><a><span>File 2.4</span></a></li>
                <li class="file"><a><span>File 2.5</span></a></li>
            </ul>
        </li>
        <li class="folder"><a><span>Folder 3</span></a>
            <ul>
                <li class="file"><a><span>File 3.1</span></a></li>
                <li class="file"><a><span>File 3.2</span></a></li>
                <li class="file"><a><span>File 3.3</span></a></li>
                <li class="file"><a><span>File 3.4</span></a></li>
                <li class="file"><a><span>File 3.5</span></a></li>
            </ul>
        </li>
    </ul>
</div>

Save your HTML file and open it in a browser. The widget appears like the one in the live widget below. Click different nodes to expand and contract them and hover over nodes to see the different styles applied.

Concepts

Widgets

Reference