Behavior of hierarchical <select> lists with checkmarks. It can be applied to any block level container.


These elements have behavior:select applied by default:


The behavior recoginizes two types <option>s:

    <caption>Node caption</caption>
    <option>Leaf 1</option>
    <option>Leaf 2</option>

Selected option will have :current  state flag set.

Node <option> gets :node runtime flag set (and corresponding CSS pseudo-class) on it by the runtime. Therefore selectors:

Each leaf can be marked as :checked  and each node can have one of following state slags:

option:node may have either :expanded or :collapsed runtime flag set in response to UI events (mouse and keyboard events).

The behavior supports so called "virtual tree" mode. Initially the tree may have all node options collapsed and empty and populate them upon ELEMENT_EXPANDED event receiving. And clear on ELEMENT_COLLAPSED event to minimize memory needed to represent the tree. See sdk/samples/ideas/virtual-tree/ sample.



Other than standard set of events (mouse, keyboard, focus) behavior:tree-checkmarks generates:


N/A - behavior:tree-checkmarks does not introduce any specific methods.


any, read/write. value of selected option. Value of the option is its value attribute or option's text if there is no value defined.

Tree events handling in script

raw onControlEvent handler

var btn = $(select#some);
btn.onControlEvent = function(evt)
  switch(evt.type) {
    case Event.SELECT_SELECTION_CHANGED: /* current option was changed */ break;
    case Event.ELEMENT_EXPANDED: /* is expanded */ break;
    case Event.ELEMENT_COLLAPSED: /* is collapsed */ break;
} }

on() subscription

var sel = $(select#some);
sel.on("change", function() { ... event handling code ... });
sel.on("expand", "option", function() { ... event handling code ... });
sel.on("collapse", "option", function() { ... event handling code ... });

decorators.tis handler

include "decorators.tis";
@when Event.ELEMENT_EXPANDED @on "select#some" :: ... event handling code ...;
@when Event.ELEMENT_COLLAPSED @on "select#some" :: ... event handling code ...;