Create An ASCII Tree From The Folder Structure | tree-builder

Tree-builder is jQuery’s supported tree builder that provides an easy-to-use online editor for creating an ASCII hierarchical art tree from a nested HTML menu.

Hover over each item in the list, you’ll see a tree control with add sibling, add child, and delete links.

How to make use of it:

1. Create an input subject for the basis node.

<input id="p_name" placeholder="Top Node" />

2. Create an empty HTML list for the ASCII tree builder.

<ul id="tree" class="tree"></ul>

3. Create a pre component to hold the ASCII tree.

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

4. Create the HTML for the tree controls.

<div class="hidden" id="template">
  <ul>
    <li class="tree-node">
      <input placeholder="filename" />
      <span class="controls">
        &raquo;
        <a class="btn-link" href="#" data-func="add-sibling"
            >+sibling</a
        >
        |
        <a class="btn-link" href="#" data-func="add-child"
            >+child</a
        >
        |
        <a class="btn-link" href="#" data-func="delete"
            >delete</a
        >
      </span>
    </li>
  </ul>
</div>
/* hide the controls on page load */
.controls {
  display: none;
}

5. Download the plugin and insert the principle JavaScript tree.js after jQuery and performed.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/tree.js"></script>

ASCII Folder Tree Generator, ASCII tree-builder Plugin/Github, tree structure in javascript dynamically, jquery horizontal tree plugin free download


See Demo And Download

Official Website(nkvuong): Click Here

This superior jQuery/javascript plugin is developed by nkvuong. For extra Advanced Usage, please go to the official website.

Share