The treeview control is written in pure dhtml/javascript and works without installation of any plugins, java code etc. It is often used as "Checkbox Tree".

Screenshots and Examples:

All Examples:

• example 1 - simple example
• example 2 - custom ids, attached onclick
• example 3 - checkbox system
• example 4 - custom images
• example 5 - autoCollapse
• example 6 - onClickCaption and onBeforeOpen events
• example 7 - checkbox with onChangeCheckbox event
• example 8 - radio button
• example 9 - drag and drop
• example 10 - openPath() and different icons
• example 11 - save node and checkbox status
• example 12 - large trees, lookAhead feature
• example 13 - custom images and styles
• example 14 - dynamically adding nodes at runtime
• example 15 - custom icons
• example 16 - skins and loadSkin()
• example 17 - rememberState
• example 18 - keyboard navigation
• example 20 - generate JS using PHP
• example 21 - expand/collapse all
• example 23 - JSON Syntax (Object Notation)
• example 24 - context menu

• BlueShoes Knowledge Base (overview page of the knowledge base)
• BlueShoes Framework (overview page of the whole framework)

Features:

• Use your own images/colors or choose from predefined ones.
• Built-in checkbox system (like a windows installer to select components). See example 3.
• Built-in radio button to use the tree as form field. See example 8.
• Drag&Drop support (currently only for Internet Explorer). See example 9.
• Supports large trees (using the look-ahead feature).
• Dynamically add nodes at runtime.
• Lots of options and API functions.
• Can be directly used as form field. See the Bs_Form package.
• Keyboard navigation (see example 18). Works in ie and mozilla.

Compatibility:

Browser List

5.0+		MS Internet Explorer
5.1+		MS IE on Mac issues with the checkbox system
1.0+		Gecko (Firefox etc)
?		Safari, Konqueror untested
7.11+		Opera

Rate me:

Scripts.com Rate Script! Excellent! Very Good Good Fair Poor

Download:

This component ships with the full "BlueShoes Framework" package, the "BlueShoes JavaScript" package and the "BlueShoes JavaScript Tree" package. See the download page.

Documentation

API-Doc Bs_Tree
API-Doc Bs_TreeElement

License:

Available with

• BlueShoes "developer extended" license
• BlueShoes commercial licenses; buy a commercial license

Check the license overview page for details.

Let us know

Have you done something interesting with BlueShoes or one of its components?