ascii tree builder - Free Download ASCII Folder Tree Generator In jQuery - Tree Builder

Free Download ASCII Folder Tree Generator In jQuery – Tree Builder

Posted on

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.

ascii tree builder - Free Download ASCII Folder Tree Generator In jQuery - Tree Builder
File Size: 4.81 KB
Views Total: 68
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

1 <pre id="out"></pre>

4. Create the HTML for the tree controls.

01 <div class="hidden" id="template">
02   <ul>
03     <li class="tree-node">
04       <input placeholder="filename" />
05       <span class="controls">
06         &raquo;
07         <a class="btn-link" href="#" data-func="add-sibling"
08             >+sibling</a
09         >
10         |
11         <a class="btn-link" href="#" data-func="add-child"
12             >+child</a
13         >
14         |
15         <a class="btn-link" href="#" data-func="delete"
16             >delete</a
17         >
18       </span>
19     </li>
20   </ul>
21 </div>
1 /* hide the controls on page load */
2 .controls {
3   display: none;
4 }

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>