Building-Collapsible-Trees


            /*
Mastering JavaScript, Premium Edition
by James Jaworski 
ISBN:078212819X
Publisher Sybex CopyRight 2001
*/


Tree Test

BLOCKQUOTE {
margin-top: -5;
margin-bottom: -5;
}
TABLE {
margin-top: 0;
margin-bottom: 0;
}
A:link, A:visited {
  color: black;
  text-decoration: none;
}


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 navigator property for persistence.",
  "Internet Explorer 4 and DOM1-capable browsers",
  "Uses innerHTML 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  subtrees[i] = new Tree(nodes[i])
 for(var i=0; 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[i].processClick(branch)
 }
}
function Tree_getTreeString() {
 var s = ""
 s += ''
 s += ""
 s += ""
 if(this.branches.length > 0)
  s += '+'
 else s += "-"
 s += ""
 s += ""
 s += this.text
 s += ""
 s += ""
 s += ""
 if((this.branches.length > 0) && (this.expanded == true)) {
  for(var i=0; i   s += this.branches[i].getTreeString()
 }
 s += "
"
 return s
}
function Tree_display() {
 document.writeln(this.getTreeString())
}






tree.display()
GUI Components JavaScript DHTML
