Treeview

Search…
v5.0.1 - Pages HTML
Treeview
Tree view in Pages are powered by jQuery Dynatree , which is a Drag & drop hierarchical list with mouse and touch compatibility Follow these steps to initialize nest-tables in your page
Step one
Include the following stylesheet inside the <head>
1
<link href="assets/plugins/jquery-dynatree/skin/ui.dynatree.css" rel="stylesheet" type="text/css" media="screen"/>
Copied!
Step two
Include the relevant javascript files inside the <body> before core template script inclusions
1
<script src="assets/plugins/jquery-dynatree/jquery.dynatree.min.js" type="text/javascript">
Copied!
Step three
1.
Create a DIV and give it a unique ID, we are going to use this to initialize the plugin
2.
Inside this DIV, create a list of unordered items using UL LI
3.
Make sure you have unique ID for each of UL and LI tags
1
<div class="m-b-20" id="default-tree">
2
  <ul id="treeData" style="display: none;">
3
    <li id="id1" title="Look, a tool tip!">item1 with key and tooltip
4
    </li>
5
    <li id="id2">item2
6
    </li>
7
    <li class="folder" id="id3">Folder with some children
8
      <ul>
9
        <li id="id3.1">Sub-item 3.1
10
          <ul>
11
            <li id="id3.1.1">Sub-item 3.1.1
12
            </li>
13
            <li id="id3.1.2">Sub-item 3.1.2
14
            </li>
15
          </ul>
16
        </li>
17
        <li id="id3.2">Sub-item 3.2
18
          <ul>
19
            <li id="id3.2.1">Sub-item 3.2.1
20
            </li>
21
            <li id="id3.2.2">Sub-item 3.2.2
22
            </li>
23
          </ul>
24
        </li>
25
      </ul>
26
    </li>
27
    <li class="expanded" id="id4">Document with some children (expanded on
28
    init)
29
      <ul>
30
        <li class="active focused" id="id4.1">Sub-item 4.1 (active and focus on
31
        init)
32
          <ul>
33
            <li id="id4.1.1">Sub-item 4.1.1
34
            </li>
35
            <li id="id4.1.2">Sub-item 4.1.2
36
            </li>
37
          </ul>
38
        </li>
39
        <li id="id4.2">Sub-item 4.2
40
          <ul>
41
            <li id="id4.2.1">Sub-item 4.2.1
42
            </li>
43
            <li id="id4.2.2">Sub-item 4.2.2
44
            </li>
45
          </ul>
46
        </li>
47
      </ul>
48
    </li>
49
  </ul>
50
</div>
Copied!
Step Four
Initialize the plugin
1
<script>
2
$(document).ready(function() {
3
      $("#default-tree").dynatree({
4
       fx: { height: "toggle", duration: 200 }//Slide down animation
5
    });
6
});
7
</script>
Copied!
UI Elements - Previous
Sliders
Next - UI Elements
Nestable
Last modified 1yr ago
Copy link