behavior: tree and tree-checkmarks

tree and tree-checkmarks is what known as TREEVIEW in Windows.

Elements

that have this behavior applied by default (see master style sheet):

  • <select type=“tree”>…</select>
  • <select type=“tree” checkmarks>…</select>
  • <widget type=“tree”>…</widget>
  • <widget type=“tree” checkmarks>…</widget>

The following elements have special meaning inside the tree:

  • <option>…</option> - option element - item of the list.

Each <option> inside the tree has mandatory <text> sub-element - caption of the option. There are two types of options:

  • “leaf” option is the option that has only <text> node inside and
  • “node” option is the option that beside of <text> has also one or more <option>s.

Node options get :expanded and :collapsed state flags indicating its expansion state. In case of tree with checkmarks each <option> (leaf and node) may have :checked state flag. Node options in tree with checkmarks may have also :incomplete state flag set when there sub-options with and without :checked state flags inside. Node option that has all sub-options :checked is by itself :checked.

Attributes

this behavior knows about:

  • size=“N” - number of visible items in the list.
  • checkmarks - if defined forces checkmarks to be rendered on options. Particular checkmark appearance is defined in master CSS and can be overridden by applications style sheets.

Events

Besides of standard set of events (mouse, keyboard, focus) behavior:select generates:

  • SELECT_SELECTION_CHANGED event - selection was changed due to user interaction.
  • SELECT_STATE_CHANGED event - state of <option> (tree node) was changed: collapsed or expanded. Field target of event structure is a reference to the node element that was changed.

Value

  • single selectable lists - value is value of the selected <option> - either content of value attribute or text of the <option>.

Special key combinations

  • LEFT - for nodes, collapse current node (options element);
  • RIGHT - for nodes, expand current node (options element);
  • UP / PAGE-UP - previous item;
  • DOWN / PAGE-DOWN- next item;
  • SHIFT + UP/PAGE-UP - same as above but with selection;
  • SHIFT + UP/PAGE-DOWN - same as above but with selection;
  • HOME - first item in the list;
  • END - last item in the list;
You can override styles of the <select> and its content, see master style sheet and html_samples/forms/selects.htm and nearby.
h-smile/built-in-behaviors/tree.txt · Last modified: 2010/08/14 16:45 by andrew
chimeric.de = chi`s home Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0