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

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

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.