JQuery plugin to display tree menu entry widget (similar to select box)
5091
£250(approx. $312)
- Posted:
- Proposals: 1
- Remote
- #22167
- Archived
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)
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)
Mike Y.
0% (0)Projects Completed
7
Freelancers worked with
7
Projects awarded
62%
Last project
7 May 2014
United Kingdom
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies