link start!
This commit is contained in:
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 298 B |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 308 B |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 462 B |
Executable
+58
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
|
||||
<!--
|
||||
|
||||
To use tree.js - copy this file to your frames directory
|
||||
and edit the javascript block to build your tree. The
|
||||
format for Node is:
|
||||
|
||||
parent.kids.push(new Node(<name>, <href>, <href_target>));
|
||||
|
||||
You may also edit the tree style by modifying the style
|
||||
block above the javascript block.
|
||||
|
||||
Be sure that the tree code is installed under file:^tree.
|
||||
|
||||
-->
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Tree</title>
|
||||
<script type='text/javascript' src='file:^tree/tree.js'></script>
|
||||
<style type='text/css'>
|
||||
|
||||
#tree { font: 11px Verdana; }
|
||||
#tree img { vertical-align: middle; }
|
||||
#tree img.expander { cursor: pointer; }
|
||||
#tree a { font-weight: bold; }
|
||||
#tree a:link { color: black; text-decoration: none; }
|
||||
#tree a:visited { color: black; text-decoration: none; }
|
||||
#tree a:hover { color: black; text-decoration: underline; }
|
||||
#tree a:active { color: black; text-decoration: none; }
|
||||
|
||||
</style>
|
||||
<script type='text/javascript'>
|
||||
|
||||
var root = new Node("Root", "#");
|
||||
var n;
|
||||
var x;
|
||||
|
||||
root.kids.push(n = new Node("Building 1", "#"));
|
||||
root.kids.push(new Node("Building 2", "#"));
|
||||
root.kids.push(new Node("Building 3", "#"));
|
||||
|
||||
n.kids.push(x = new Node("Floor 1", "#"));
|
||||
n.kids.push(new Node("Floor 2", "#"));
|
||||
n.kids.push(new Node("Floor 3", "#"));
|
||||
|
||||
x.kids.push(new Node("VAV 1", "#"));
|
||||
x.kids.push(new Node("VAV 2", "#"));
|
||||
x.kids.push(new Node("VAV 3", "#"));
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload='initTree(root);'>
|
||||
<div id='tree'></div>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+141
@@ -0,0 +1,141 @@
|
||||
/*
|
||||
* Copyright 2005 Tridium, Inc. All Rights Reserved.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Tree.
|
||||
*
|
||||
* @author Andy Frank
|
||||
* @creation 26 Jul 06
|
||||
* @version $Revision$ $Date$
|
||||
* @since Baja 1.0
|
||||
*/
|
||||
|
||||
// Image locations
|
||||
var imgFolderClosed = "/ord?file:^tree/folderClosed.png";
|
||||
var imgFolderOpen = "/ord?file:^tree/folderOpen.png";
|
||||
var imgExpand = "/ord?file:^tree/expand.png";
|
||||
var imgCollapse = "/ord?file:^tree/collapse.png";
|
||||
|
||||
/**
|
||||
* Node is used to build the initial tree structure.
|
||||
*/
|
||||
function Node(name, href, target)
|
||||
{
|
||||
this.name = name;
|
||||
this.href = href;
|
||||
this.target = target;
|
||||
this.kids = new Array();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the tree in the DOM using this node structure.
|
||||
*/
|
||||
function initTree(root)
|
||||
{
|
||||
var tree = document.getElementById("tree");
|
||||
addTreeNode(0, tree, root);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a new node to the tree under this parent.
|
||||
*/
|
||||
function addTreeNode(level, parent, node)
|
||||
{
|
||||
var elem = createTreeNode(level, node)
|
||||
parent.appendChild(elem);
|
||||
|
||||
for (var i=0; i<node.kids.length; i++)
|
||||
addTreeNode(level+1, elem, node.kids[i]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Return a new DOMElement for this Node.
|
||||
*/
|
||||
function createTreeNode(level, node)
|
||||
{
|
||||
var html = "";
|
||||
|
||||
if (level > 0)
|
||||
{
|
||||
html += "<img src='" + imgExpand + "' class='expander' ";
|
||||
html += " onclick='toggle(event);' alt='' />";
|
||||
html += "<img src='" + imgFolderClosed + "' alt='' /> ";
|
||||
}
|
||||
else
|
||||
{
|
||||
html += "<img src='" + imgFolderOpen + "' alt='' /> ";
|
||||
}
|
||||
|
||||
html += "<a href='" + node.href + "'"
|
||||
if (node.target != null)
|
||||
html += " target='" + node.target + "'";
|
||||
html += ">" + node.name + "</a>";
|
||||
|
||||
var elem = document.createElement("div");
|
||||
elem.innerHTML = html;
|
||||
if (level > 1)
|
||||
{
|
||||
elem.style.display = "none";
|
||||
elem.style.visibility = "hidden";
|
||||
elem.style.paddingLeft = "16px";
|
||||
}
|
||||
return elem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle the expansion state for this node.
|
||||
*/
|
||||
function toggle(event)
|
||||
{
|
||||
var target = (event.target) ? event.target: window.event.srcElement;
|
||||
|
||||
var img = target;
|
||||
var fol = img.nextSibling;
|
||||
var div = img.parentNode;
|
||||
var kids = div.childNodes;
|
||||
|
||||
if (endsWith(target.src, imgExpand))
|
||||
{
|
||||
// Expand
|
||||
img.src = imgCollapse;
|
||||
fol.src = imgFolderOpen;
|
||||
|
||||
for (var i=0; i<kids.length; i++)
|
||||
{
|
||||
if (kids[i].nodeName != "DIV") continue;
|
||||
kids[i].style.display = "block";
|
||||
kids[i].style.visibility = "visible";
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
// Collapse
|
||||
img.src = imgExpand;
|
||||
fol.src = imgFolderClosed;
|
||||
|
||||
for (var i=0; i<kids.length; i++)
|
||||
{
|
||||
if (kids[i].nodeName != "DIV") continue;
|
||||
kids[i].style.display = "none";
|
||||
kids[i].style.visibility = "hidden";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Return true if str ends with suffix.
|
||||
*/
|
||||
function endsWith(str, suffix)
|
||||
{
|
||||
// If suffix is longer, not possible
|
||||
if (str.length < suffix.length) return false;
|
||||
|
||||
// Cut off and compare
|
||||
var sub = str.substring(str.length - suffix.length);
|
||||
return (sub == suffix);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user