Building Collapsible Trees : Tree : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Tree »

 

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.getElementByIdreturn true
 return false
}
   
function isIE4() {
 if(!isDOM1Capable() && document.allreturn true
 return false
}
   
function isNav4() {
 if(navigator.appName == "Netscape" &&
   parseInt(navigator.appVersion>= &&
   parseInt(navigator.appVersion5return 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[inew 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 != nulld.innerHTML = this.getTreeString()
 }else if(isIE4()) {
  var d = document.all("tree")
  if(d != nulld.innerHTML = this.getTreeString()
 }
}
function Tree_processClick(branch) {
 if(this.id == branchthis.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>

           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Tree