This time I will share jQuery Plugin and tutorial about ASCII Folder Tree Generator In jQuery – Tree Builder, hope it will help you in programming stack.
A jQuery-powered tree builder that provides a user-friendly online editor to generate a hierarchical ASCII art tree from a nested HTML list.
Hover over each list item you will see a tree control containing Add Sibling, Add Child, and Delete links.
How to use it:
1. Create an input field for the root node.
1 |
< input id = "p_name" placeholder = "Top Node" /> |
2. Create an empty HTML list for the ASCII tree builder.
1 |
< ul id = "tree" class = "tree" ></ ul > |
3. Create a pre
element to hold the ASCII tree.
4. Create the HTML for the tree controls.
01 |
< div class = "hidden" id = "template" > |
03 |
< li class = "tree-node" > |
04 |
< input placeholder = "filename" /> |
05 |
< span class = "controls" > |
07 |
< a class = "btn-link" href = "#" data-func = "add-sibling" |
11 |
< a class = "btn-link" href = "#" data-func = "add-child" |
15 |
< a class = "btn-link" href = "#" data-func = "delete" |
5. Download the plugin and insert the main JavaScript tree.js
after jQuery and done.
1 |
< script src = "/path/to/cdn/jquery.slim.min.js" ></ script > |
2 |
< script src = "/path/to/js/tree.js" ></ script > |