Accessible Tree 1.2

This plugin creates a tree of a nested html list with subtrees that can be extended and collapsed.

Widget based on Tree by Christoph Pojer!



Details

Author
3i1a4o
Current version
1.2
GitHub
mashalla/tree
Downloads
3406
Category
Widgets
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_:
    • Core/1.2.3: *
    • More/1.2.4.1: Drag
    • More/1.2.4.1: Drag.Move
    • More/1.2.4.1: Element.Delegation
    • Core/MooTools

How to use

Create a nested list

<ul class="tree" id="tree">
    <li id="tree3">
        <span>Tree Structure</span>
        <ul>
            <li>
                <span>Bark</span>
                <ul>
                    <li>
                        <span>Periderm</span>
                        <ul>
                            <li>
                                <span>Cork</span>
                            </li>
                            <li>
                                <span>Cork Cambium</span>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span>Living Phloem</span>
                    </li>
                </ul>
            </li>
            <li><span>Sapwood</span>
            <ul>
                <li>
                    <span>Vascular Cambium</span>
                </li>
                <li>
                    <span>Radial Section</span>
                </li>
            </ul>
            </li>
            <li>
                <span>Heartwood</span>
            </li>
        </ul>
    </li>
</ul>

and call

new Tree('tree');

with the id of the tree so that it can be converted. That's all :)


Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus