Building Collapsible Trees
/*
Mastering JavaScript, Premium Edition
by James Jaworski
ISBN:078212819X
Publisher Sybex CopyRight 2001
*/
<html>
<head>
<title>Tree Test</title>
<style type="text/css">
BLOCKQUOTE {
margin-top: -5;
margin-bottom: -5;
}
TABLE {
margin-top: 0;
margin-bottom: 0;
}
A:link, A:visited {
color: black;
text-decoration: none;
}
</style>
<script language="JavaScript">
var tree
if(isNav4() && navigator.tree8487 != undefined)
// Use a unique value to differentiate with other concurrent tree objects
tree = navigator.tree8487
else tree = createTree()
function isDOM1Capable() {
if(document.getElementById) return true
return false
}
function isIE4() {
if(!isDOM1Capable() && document.all) return true
return false
}
function isNav4() {
if(navigator.appName == "Netscape" &&
parseInt(navigator.appVersion) >= 4 &&
parseInt(navigator.appVersion) < 5) return true
return false
}
function createTree() {
var nodes = new Array(
"Tree Component",
"Tackles problems of persistence and redisplay",
"How can a complex object persist between page loadings?",
"How can I redisplay a portion of a page?",
"Exploits browser-unique features",
"Navigator 4",
"Uses <code>navigator</code> property for persistence.",
"Internet Explorer 4 and DOM1-capable browsers",
"Uses <code>innerHTML</code> property for redisplay",
"Just a touch of DHTML",
"Style sheets are used to shrink margins and hide links",
"Easily tailored")
var branches = new Array(new Array(0,1), new Array(0,4),
new Array(0,10), new Array(0,11), new Array(1,2), new Array(1,3),
new Array(4,5), new Array(4,7), new Array(5,6), new Array(7,8),
new Array(7,9)
)
branchID = 0
var subtrees = new Array()
for(var i=0; i<nodes.length; ++i)
subtrees[i] = new Tree(nodes[i])
for(var i=0; i<branches.length; ++i)
subtrees[branches[i][0]].addBranch(subtrees[branches[i][1]])
return subtrees[0]
}
function Tree(root) {
this.text = root
this.id = branchID
++branchID
this.expanded = true
this.branches = new Array()
this.addBranch = Tree_addBranch
this.changeState = Tree_changeState
this.handleClick = Tree_handleClick
this.processClick = Tree_processClick
this.display = Tree_display
this.getTreeString = Tree_getTreeString
}
function Tree_addBranch(tree) {
this.branches[this.branches.length] = tree
}
function Tree_changeState() {
this.expanded = !this.expanded
}
function Tree_handleClick(branch) {
this.processClick(branch)
if(isNav4()) {
navigator.tree8487 = tree
window.location.reload()
}else if(isDOM1Capable()) {
var d = document.getElementById("tree")
if(d != null) d.innerHTML = this.getTreeString()
}else if(isIE4()) {
var d = document.all("tree")
if(d != null) d.innerHTML = this.getTreeString()
}
}
function Tree_processClick(branch) {
if(this.id == branch) this.changeState()
else {
for(var i=0; i<this.branches.length; ++i)
this.branches[i].processClick(branch)
}
}
function Tree_getTreeString() {
var s = "<blockquote>"
s += '<table border="0">'
s += "<tr>"
s += "<td>"
if(this.branches.length > 0)
s += '<a href="javascript:tree.handleClick('+this.id+')">+</a>'
else s += "-"
s += "</td>"
s += "<td>"
s += this.text
s += "</td>"
s += "</tr>"
s += "</table>"
if((this.branches.length > 0) && (this.expanded == true)) {
for(var i=0; i<this.branches.length; ++i)
s += this.branches[i].getTreeString()
}
s += "</blockquote>"
return s
}
function Tree_display() {
document.writeln(this.getTreeString())
}
</script>
</head>
<body>
<hr>
<div id="tree">
<script language="JavaScript">
tree.display()
</script>
</div>
<hr>
</body>
</html>
Related examples in the same category
