All samples are using Ink.requireModules, please read how to use it at Ink.requireModules section

Ink.UI.TreeView class

Shows elements in a tree structure which can be expanded and contracted. A TreeView is built with "node"s and "children". "node"s are li tags, and "children" are ul tags. You can build your TreeView out of a regular UL and LI element structure which you already use to display lists with several levels. If you want a node to be open when the TreeView is built, just add the data-open="true" attribute to it.

Methods
Method name	Description
new TreeView(selector, [options])	Constructor
.close(node)	Closes one of the tree nodes
.isOpen(node)	Checks if a node is open.
.isParent(node)	Checks if a node is a parent.
.open(node)	Opens one of the tree nodes
.toggle(node)	Toggles a node state

new Ink.UI.TreeView(selector, [options])

Accepts

selector
Element or selector.
options
Options object, containing:
options.node
Selector for the nodes. Defaults to 'li'.
options.children
Selector for the children. Defaults to 'ul'.
options.parentClass
CSS classes to be added to parent nodes. Defaults to 'parent'.
options.openClass
CSS classes to be added to the icon when a parent is open. Defaults to 'fa fa-minus-circle'.
options.closedClass
CSS classes to be added to the icon when a parent is closed. Defaults to 'fa fa-plus-circle'.
options.hideClass
CSS Class to toggle visibility of the children. Defaults to 'hide-all'.
options.iconTag
The name of icon tag. The component tries to find a tag with that name as a direct child of the node. If it doesn't find it, it creates it. Defaults to 'i'.
options.stopDefault
Flag to stops the default behavior of the click handler. Defaults to true.

Example

                 <ul class="ink-tree-view">
                   <li data-open="true"><a href="#">root</a>
                     <ul>
                       <li><a href="#">child 1</a></li>
                       <li><a href="#">child 2</a>
                         <ul>
                           <li><a href="#">grandchild 2a</a></li>
                           <li><a href="#">grandchild 2b</a>
                             <ul>
                               <li><a href="#">grandgrandchild 1bA</a></li>
                               <li><a href="#">grandgrandchild 1bB</a></li>
                             </ul>
                           </li>
                         </ul>
                       </li>
                       <li><a href="#">child 3</a></li>
                     </ul>
                   </li>
                 </ul>
                 <script>
                     Ink.requireModules( ['Ink.Dom.Selector_1','Ink.UI.TreeView_1'], function( Selector, TreeView ){
                         var treeViewElement = Ink.s('.ink-tree-view');
                         var treeViewObj = new TreeView( treeViewElement );
                     });
                 </script>

Demo

root

Code

<ul id="myTree1" class="ink-tree-view">
    <li data-open="true"><a href="#">root</a>
        <ul>
            <li><a href="#">child 1</a></li>
            <li><a href="#">child 2</a>
                <ul>
                    <li><a href="#">grandchild 2a</a></li>
                    <li><a href="#">grandchild 2b</a>
                        <ul>
                            <li><a href="#">grandgrandchild 1bA</a></li>
                            <li><a href="#">grandgrandchild 1bB</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">child 3</a></li>
        </ul>
    </li>
</ul>

<script>
    Ink.requireModules( ['Ink.Dom.Selector_1','Ink.UI.TreeView_1'], function( Selector, TreeView ){
        var treeViewElement = Ink.s('#myTree1');
        var treeViewObj = new TreeView( treeViewElement );
    });
</script>

Usage with data-attributes

Demo

root

Code

<ul id="myTree2" class="ink-tree-view" data-open-class="fa fa-folder-open" data-closed-class="fa fa-folder">
    <li data-open="true"><a href="#">root</a>
        <ul>
            <li><a href="#">child 1</a></li>
            <li><a href="#">child 2</a>
                <ul>
                    <li><a href="#">grandchild 2a</a></li>
                    <li><a href="#">grandchild 2b</a>
                        <ul>
                            <li><a href="#">grandgrandchild 1bA</a></li>
                            <li><a href="#">grandgrandchild 1bB</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">child 3</a></li>
        </ul>
    </li>
</ul>

<script>
    Ink.requireModules( ['Ink.Dom.Selector_1','Ink.UI.TreeView_1'], function( Selector, TreeView ){
        var treeViewElement = Ink.s('#myTree2');
        var treeViewObj = new TreeView( treeViewElement );
    });
</script>

.close(node) method

Closes one of the tree nodes

Make sure you pass the node's Element

Accepts

node
The node you wish to close.

.isOpen(node) method

Checks if a node is open.

Accepts

node
The tree node to check

.isParent(node) method

Checks if a node is a parent.

Accepts

node
Node to check

.open(node) method

Opens one of the tree nodes

Make sure you pass the node's Element

Accepts

node
The node you wish to open.

.toggle(node) method

Toggles a node state

Accepts

node
The node to toggle.