Introduction
This code is an HTML/JavaScript tree based on the Easy DHTML treeview.
Take a look at the original first to get an idea of what the code is doing and how the tree is organized: there.
It uses div instead of tables in order to simplify the HTML code and make it a bit more readable.
The downside is that the JavaScript is slightly more convoluted as the tree hierarchy is a bit more complex: at each level, the parent div contains two or more children
the first one for the title bar and image, the second for the first sub-item and so on. The event is triggered by clicking on the title bar.
CSS styles are used to set the appearance of the tree elements at every level.
Using the code
The code can be pasted into a stand-alone HTML file.
Create a subfolder named "images" to store the images from the original version.
<script type="text/javascript">
function Toggle(node)
{
var IMG_MINUS = "images/minus.gif";
var IMG_PLUS = "images/plus.gif";
var IMG_LEAF = "images/leaf.gif";
var img = node.children.item(0).children.item(0);
var parent = node.parentNode;
var firstItem = parent.children.item(1);
var bHasChildren = parent.children.item(1).childElementCount > 0;
if (firstItem.style.display == 'none')
{
img.src = bHasChildren ? IMG_MINUS : IMG_LEAF;
for(i=1;i<parent.children.length;i++)
{
parent.children.item(i).style.display = '';
}
}
else
{
img.src = bHasChildren ? IMG_PLUS : IMG_LEAF;
for(i=1;i<parent.children.length;i++)
{
parent.children.item(i).style.display = 'none';
}
}
}
</script>
<style>
#tree
{
height:500px;
width: 200px;
border:1px solid black;
padding-left:2px;
padding-right:2px;
padding-top:1px;
padding-bottom:1px;
}
.tl1, .tl2, .tl3
{
border:1px solid blue;
background-color:yellow;
width: 100%;
height:20px;
position:relative;
margin-bottom:1px;
}
.tl1_, .tl2_, .tl3_
{
position:relative;
text-align:left;
-moz-user-select: none;
-webkit-user-select: none;
}
.tl1
{
height:20px;
left:-1px;
}
.tl2
{
left:-1px;
}
.tl3
{
left:-1px;
}
.tl1_
{
left:10px;
font-size:14pt;
}
.tl2_
{
left:20px;
font-size:12pt;
}
.tl3_
{
left:30px;
font-size:10pt;
}
.imgNode
{
margin-right:5px;
}
</style>
<div id="tree">
<div id="lvl1_1">
<div onClick="Toggle(this)" class="tl1" >
<div class="tl1_" onselectstart="return false;"><img
class="imgNode" src="leaf.gif" />Level 1</div>
</div>
<div id="lvl2_1">
<div onClick="Toggle(this)" class="tl2" >
<div class="tl2_" onselectstart="return false;"><img
class="imgNode" src="leaf.gif" />Level 2</div>
</div>
<div id="lvl3_1">
<div onClick="Toggle(this)" class="tl3" >
<div class="tl3_" onselectstart="return false;"><img
class="imgNode" src="leaf.gif" />Level 3</div>
</div>
<div></div>
</div>
<div id="lvl3_2">
<div onClick="Toggle(this)" class="tl3" >
<div class="tl3_" onselectstart="return false;"><img
class="imgNode" src="leaf.gif" />Level 3</div>
</div>
<div></div>
</div>
</div>
<div id="lvl2_2">
<div onClick="Toggle(this)" class="tl2" >
<div class="tl2_" onselectstart="return false;"><img
class="imgNode" src="leaf.gif" />Level 2</div>
</div>
<div id="lvl3_3">
<div onClick="Toggle(this)" class="tl3" >
<div class="tl3_" onselectstart="return false;"><img
class="imgNode" src="leaf.gif" />Level 3</div>
</div>
<div></div>
</div>
<div id="lvl3_4">
<div onClick="Toggle(this)" class="tl3" >
<div class="tl3_"
onselectstart="return false;"><img class="imgNode"
src="leaf.gif" />Level 3</div>
</div>
<div></div>
</div>
</div>
</div>
</div>
Code description
Here is a description of the div structure for each level:
<div id="lvlX_N">
<div onClick="Toggle(this)" class="tlX" >
<div class="tlX_" onselectstart="return false;">
<img class="imgNode" src="leaf.gif" />
Level X
</div>
</div>
<div ...>
</div>
<div ...>
</div>
...
</div>
The main div for each level as an id like lvlX_N - where X is the level (1,2,3) and N is sequential so that IDs are unique.
The second div supports the OnClick calling the Toggle function and is the node sent to the function.
From this node the code goes up one level to find the parent:
var parent = node.parentNode;
And we dig down to find the image:
var img = node.children.item(0).children.item(0);
This second div also supports the style showing the "title bar", the styles tl1, tl2, tl3 in my css. Finally it contains another div with the image and text, with the text style defined by the styles tl1_, tl2_, tl3_.
From the parent node we can go down to the second div which contains the first child. If this level does not have children then this firstChild is an empty div. Additional divs may define other children:
var firstItem = parent.children.item(1);
var bHasChildren = firstItem.childElementCount > 0;
The rest of the code sets the image and shows or hides the children by setting the display property of the divs which shows or hides all of their content.
Points of Interest
The code for switching the images does not work in IE8. This is not a problem since my
HTML code will be dynamically generated by script and set to a div tree
inner HTML with the proper images set on each click. However I would be interested in finding a solution for making this work properly in IE8. I tested on chrome 15 and
Firefox 3.6.
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.