JQuery plugin to display tree menu entry widget (similar to select box)

  • Posted
  • Proposals 1
  • Remote
  • #22167
  • Archived
Giles R. has already sent a proposal.
  • 1

Description

Experience Level: Expert
I need a jquery plugin which will render a tree menu with either checkboxes for multiple selections or no checkboxes for single item selections. This will operate like a select box.

The plugin will operate on an input[type=text] element and hide it and render a placeholder to display a menu. When the placeholder is clicked the menu is shown. When the menu is closed, the selected item text is put in the placeholder and the input box is populated with the value. If there are multiple selections then the values will be joined by a comma before being put into the input box. The placeholder will show the text of the selected items, joined with a comma.

The menu will be closed by clicking outside, or by clicking on the placeholder.

eg.

The HTML will be like this.

<input type=\"text\" id=\"mybox\" />
<ul data-input=\"mybox\">
<li data-value=\"1\">Item 1</li>
<li data-value=\"2\">Parent Item 1
<ul>
<li data-value=\"3\">Child Item 2
<ul>
<li data-value=\"4\">Grandchild Item 3</li>
</ul>
</li>
<li data-value=\"5\">etc....</li>
</ul>
</li>
</ul>

The script to activate it like this.

$(\'#mybox\').treemenu(options);

It should be able to nest to many levels deep.

Options to the constructor

multiple (bool) - whether to allow multiple selections. If this is enabled then a checkbox is shown next to each item.
selectparents (bool) - if a child is selected in multiple mode, enable its parents too.
selectchildren (bool) - If a parent is selected in multiple mode then select all children.
leafonly (bool) - If enabled, only leaf nodes will be selectable (by default all nodes are selectable)
width (int) - The width of the menu and placeholder
height (int) - The height of the menu (overflow will scroll)

Clarification Board

    There are no clarification messages.