Example: keyboard navigation

Simple Tree

• Behaves like a common listbox.

Table Tree

• Try TAB and cursor keys to navigate the grid.
• Node title is focusable, so we can TAB to a context where SPACE, LEFT, BACK, '-', '+', ... work
• Setting focus inside an input activates the node.
• Note: tabbing from outside into the tree will now activate the first node, (used to be the last active node). Setting 'tabbable' only to the active node wouldn't help, because the first row contains a tabbable input element anyway.
• TODO: focusout is not reliably detected for the container (should dimm active node in Win8 skin)
• TODO?: gridnav currently assumes that cells contain only one embedded :input
• TODO: ext-gridnav could be dropped and merged into core and ext-table instead
• TODO: css should be modified to remove the system focus border from node titles (currently theme dependant)

Tree with embedded controls

• Typical use case is passing 'input' tags as part of the title.
• There may be many different constructs (one or more embedded controls, inside of after title span, ...). So we handle this with custom event handlers instead of built-in magic.
• The input controls can keep their own key handling because we return `preventNav` in the `keydown` event.
• Tree navigation is mapped to SHIFT + original_key by calling `node.navigate()` in the `keydown` event.
• We bind to `focusin` of embedded :input controls, so we can activate the associated node.
• on node `activate` we set focus to the embedded input.
• TODO: css should be modified to remove the system focus border from node titles (currently theme dependant)

jquery.fancytree.js project home Link to this page Example Browser View source code

Fancytree @VERSION, jQuery UI 1.11.4, jQuery 1.12.1