jQuery Hierarchical Data Tree Examples
- Basic use
- Using parameters
Basic use
Example
- 1 - Chapter 1
- 1.1 - Chapter 1, Subchapter 1
- 1.1.1 - Chapter 1, Subchapter 1, Page 1
- 1.1.2 - Chapter 1, Subchapter 1, Page 2
- 1.1.2.1 - Chapter 1, Subchapter 1, Page 2, Paragraph 1
- 1.2 - Chapter 1, Subchapter 2
- 1.3 - Chapter 1, Subchapter 3
- 1.3.1 - Chapter 1, Subchapter 3, Page 1
- 2 - Chapter 2
- 2.1 - Chapter 2, Subchapter 1
- 2.2 - Chapter 2, Subchapter 2
- 2.2.1 - Chapter 2, Subchapter 2, Page 1
- 2.2.2 - Chapter 2, Subchapter 2, Page 2
- 2.3 - Chapter 2, Subchapter 3
- 3 - Chapter 3
html
<ul id="tree">
<li data-tree-branch="1"><span data-tree-click="1">1</span> - Chapter 1</li>
<li data-tree-branch="1.1"><span data-tree-click="1.1">1.1</span> - Chapter 1, Subchapter 1</li>
<li data-tree-branch="1.1.1"><span data-tree-click="1.1.1">1.1.1</span> - Chapter 1, Subchapter 1, Page 1</li>
<li data-tree-branch="1.1.2"><span data-tree-click="1.1.2">1.1.2</span> - Chapter 1, Subchapter 1, Page 2</li>
<li data-tree-branch="1.1.2.1"><span data-tree-click="1.1.2.1">1.1.2.1</span> - Chapter 1, Subchapter 1, Page 2, Paragraph 1</li>
<li data-tree-branch="1.2"><span data-tree-click="1.2">1.2</span> - Chapter 1, Subchapter 2</li>
<li data-tree-branch="1.3"><span data-tree-click="1.3">1.3</span> - Chapter 1, Subchapter 3</li>
<li data-tree-branch="1.3.1"><span data-tree-click="1.3.1">1.3.1</span> - Chapter 1, Subchapter 3, Page 1</li>
<li data-tree-branch="2"><span data-tree-click="2">2</span> - Chapter 2</li>
<li data-tree-branch="2.1"><span data-tree-click="2.1">2.1</span> - Chapter 2, Subchapter 1</li>
<li data-tree-branch="2.2"><span data-tree-click="2.2">2.2</span> - Chapter 2, Subchapter 2</li>
<li data-tree-branch="2.2.1"><span data-tree-click="2.2.1">2.2.1</span> - Chapter 2, Subchapter 2, Page 1</li>
<li data-tree-branch="2.2.2"><span data-tree-click="2.2.2">2.2.2</span> - Chapter 2, Subchapter 2, Page 2</li>
<li data-tree-branch="2.3"><span data-tree-click="2.3">2.3</span> - Chapter 2, Subchapter 3</li>
<li data-tree-branch="3"><span data-tree-click="3">3</span> - Chapter 3</li>
</ul>
javascript
<script src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script src="src/jquery.dataTree.min.js"></script>
<script>
$(function () {
$('#tree').dataTree();
});
</script>
css
#tree {
list-style-type:none;
color: #666666;
}
#tree [data-tree-click] {
cursor: pointer;
color: #999999;
font-weight: bold;
font-size: 1.2em;
}
#tree .closed [data-tree-click]{
padding-left: 12px;
background-image: url('pix/plus_minus.gif');
background-repeat: no-repeat;
background-position: 0px 6px;
color: #FF00000 !important;
}
#tree .open [data-tree-click]{
padding-left: 12px;
background-image: url('pix/plus_minus.gif');
background-repeat: no-repeat;
background-position: 0px -94px;
color: #FF00000 !important;
}
#tree .end {
padding-left: 12px;
color: #BBBBBB;
}
#tree .data-tree-level1 {
margin-left: 10px;
}
#tree .data-tree-level2 {
margin-left: 20px;
}
#tree .data-tree-level3 {
margin-left: 30px;
}
Top of page
Using parameters (also can be any html element)
Example
html
<div id="football">
<span data-tree-branch="eng" data-tree-click="eng">England</span>
<span data-tree-branch="eng-epl" data-tree-click="eng-epl">Premier League</span>
<span data-tree-branch="eng-epl-arse" data-tree-click="eng-epl-arse">Arsenal</span>
<span data-tree-branch="eng-epl-villa" data-tree-click="eng-epl-villa">Aston Villa</span>
<span data-tree-branch="eng-epl-cdff" data-tree-click="eng-epl-cdff">Cardiff</span>
<span data-tree-branch="eng-epl-lpool" data-tree-click="eng-epl-lpool">Liverpool</span>
<span data-tree-branch="eng-epl-city" data-tree-click="eng-epl-city">Manchester City</span>
<span data-tree-branch="eng-epl-utd" data-tree-click="eng-epl-utd">Manchester United</span>
<span data-tree-branch="eng-chm" data-tree-click="eng-chm">Championship</span>
<span data-tree-branch="eng-chm-brig" data-tree-click="eng-chm-brig">Brighton</span>
<span data-tree-branch="eng-chm-leic" data-tree-click="eng-chm-leic">Leicester</span>
<span data-tree-branch="eng-chm-forest" data-tree-click="eng-chm-forest">Nottingham Forest</span>
<span data-tree-branch="eng-chm-wat" data-tree-click="eng-chm-wat">Watford</span>
<span data-tree-branch="eng-lg1" data-tree-click="eng-lg1">League 1</span>
<span data-tree-branch="eng-lg2" data-tree-click="eng-lg2">League 2</span>
<span data-tree-branch="eng-lg2-chest" data-tree-click="eng-lg2-chest">Chesterfield</span>
<span data-tree-branch="eng-lg2-york" data-tree-click="eng-lg2-york">York</span>
<span data-tree-branch="sco" data-tree-click="sco">Scotland</span>
<span data-tree-branch="sco-spl" data-tree-click="sco-spl">Scottish Premier League</span>
<span data-tree-branch="sco-spl-aber" data-tree-click="sco-spl-aber">Aberdeen</span>
<span data-tree-branch="sco-spl-cel" data-tree-click="sco-spl-cel">Celtic</span>
<span data-tree-branch="sco-spl-utd" data-tree-click="sco-spl-utd">Dundee United</span>
<span data-tree-branch="sco-spl-hearts" data-tree-click="sco-spl-hearts">Hearts</span>
<span data-tree-branch="sco-spl-hibs" data-tree-click="sco-spl-hibs">Hibernian</span>
<span data-tree-branch="sco-div1" data-tree-click="sco-div1">Scottish First DIvision</span>
<span data-tree-branch="sco-div2" data-tree-click="sco-div2">Scottish Second DIvision</span>
</div>
javascript
<script src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script src="src/jquery.dataTree.min.js"></script>
<script>
$(function () {
$('#football').dataTree({
delimeter: '-',
openCSS: 'open2',
closedCSS: 'closed2',
endCSS: 'end2',
opened: ['eng-epl', 'sco']
});
});
</script>
css
#football {
color: #333333;
}
#football .open2 {
text-transform: uppercase;
font-weight: bold;
}
#football [data-tree-branch]{
display: block;
}
#football .data-tree-level1 {
margin-left: 20px;
}
#football .data-tree-level2 {
margin-left: 40px;
}
#football .data-tree-level3 {
margin-left: 60px;
}
#football .end2.data-tree-level0, #football .end2.data-tree-level1 {
color: #CCCCCC;
}
#football .end2.data-tree-level2 {
color: #CC0000;
}
Top of page