<html>
<head>
<title>ECOTree Advanced Sample</title>
<script type="text/javascript" src="ECOTree.js"></script>
<link type="text/css" rel="stylesheet" href="ECOTree.css" />
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<style>v\:*{ behavior:url(#default#VML);}</style>
<style>
label, select, option, input, a {
font-family : "Verdana";
font-size : 10px;
color : black;
}
.copy {
font-family : "Verdana";
font-size : 10px;
color : #CCCCCC;
}
</style>
<script>
var t = null;
function CreateTree() {
t = new ECOTree('t','sample1');
t.add('O',-1,'Root O'); //Node ID's could be Number or String or mix... look!
t.add('E','O','Node E');
t.add(3,'O','Node F');
t.add(4,'O','Node N');
t.add(5,'E','A - The CodeProject',null,null,null,null,'http://www.baidu.com','Source code and resources for IT professionals'); //接网址
t.add(6,'E','D - VML');
t.add(7,4,'Node G - Sized',60,70);
t.add('eight',4,'Node M');
t.add(9,6,'Node B');
t.add(10,6,'Node C');
t.add(11,'eight','H - Color',null,null,"green","black",null,"This node has it's own colors");
t.add(12,'eight','Node I');
t.add(13,'eight','Node J');
t.add(14,'eight','Node K - No target',null,null,null,null,null,'This node has no target');
t.add(15,'eight','Node L');
t.UpdateTree();
}
function ChangePosition() {
var pos = parseInt(document.forms[0].rootPosition.value);
t.config.iRootOrientation = pos;
switch (pos)
{
case ECOTree.RO_TOP:
t.config.topXAdjustment = 20;
t.config.topYAdjustment = -20;
break;
case ECOTree.RO_BOTTOM:
t.config.topXAdjustment = 20;
t.config.topYAdjustment = -500;
break;
case ECOTree.RO_RIGHT:
t.config.topXAdjustment = 20;
t.config.topYAdjustment = -500;
break;
case ECOTree.RO_LEFT:
t.config.topXAdjustment = 20;
t.config.topYAdjustment = -20;
break;
}
t.UpdateTree();
}
function ChangeLinkType() {
t.config.linkType = document.forms[0].linktype.value;
t.UpdateTree();
}
function ChangeNodeAlign() {
t.config.iNodeJustification = parseInt(document.forms[0].nodealign.value);
t.UpdateTree();
}
function Modify(what, inp, val) {
var q = parseInt(document.forms[0][inp].value) + val;
document.forms[0][inp].value = q;
t.config[what] = q;
t.UpdateTree();
}
function IncreaseSubtreeSep() { Modify("iSubtreeSeparation","stsep",5); }
function DecreaseSubtreeSep() { Modify("iSubtreeSeparation","stsep",-5); }
function IncreaseSiblingSep() { Modify("iSiblingSeparation","sbsep",5); }
function DecreaseSiblingSep() { Modify("iSiblingSeparation","sbsep",-5); }
function IncreaseLevelSep() { Modify("iLevelSeparation","lvsep",5); }
function DecreaseLevelSep() { Modify("iLevelSeparation","lvsep",-5); }
function ChangeColors() {
var nodes = ['O','E',3,4,5,6,7,'eight',9,10,11,12,13,14,15];
var color = document.forms[0].colorSet.value;
var c = "";
t.config.linkColor = color;
switch (color)
{
case "red":
c = "#FFCCCC";
t.config.levelColors = t.config.levelBorderColors = ["#FF5555","#FF8888","#FFAAAA","#FFCCCC"];
break;
case "green":
c = "#CCFFCC";
t.config.levelColors = t.config.levelBorderColors = ["#55FF55","#88FF88","#AAFFAA","#CCFFCC"];
break;
case "blue":
c = "#CCCCFF";
t.config.levelColors = t.config.levelBorderColors = ["#5555FF","#8888FF","#AAAAFF","#CCCCFF"];
break;
}
for (var n = 0; n < nodes.length; n++) {
t.setNodeColors(nodes[n], c, color, false);
}
t.UpdateTree();
}
function ChangeSearchMode() {
var mode = parseInt(document.forms[0].searchMode.value);
t.config.searchMode = mode;
}
function SearchTree() {
var txt = document.forms[0].search.value;
t.searchNodes(txt);
}
function ChangeSelMode() {
var mode = parseInt(document.forms[0].selMode.value);
t.config.selectMode = mode;
t.unselectAll();
}
function ChangeNodeFill() {
var mode = parseInt(document.forms[0].nodefill.value);
t.config.nodeFill = mode;
t.UpdateTree();
}
function ChangeColorStyle() {
var mode = parseInt(document.forms[0].colorstyle.value);
t.config.colorStyle = mode;
t.UpdateTree();
}
function ChangeUseTarget() {
var flag = (document.forms[0].usetarget.value == "true");
t.config.useTarget = flag;
t.UpdateTree();
}
function selectedNodes() { //选择
var selnodes = t.getSelectedNodes();
var s = [];
for (var n = 0; n < selnodes.length; n++)
{
s.push('' + n + ': Id=' + selnodes[n].id + ', Title='+ selnodes[n].dsc + ', Metadata='+ selnodes[n].meta + '\n');
}
alert('The selected nodes are:\n\n' + ((selnodes.length >0) ? s.join(''): 'None.'));
}
</script>
</head>
<body onload="CreateTree();">
<h4>ECOTree Advanced Sample <span class="copy">©2006 Emilio Cortegoso Lobato</span></h4>
<form id="mainform">
<div>
<label>Root position:</label>
<select id="rootPosition" onchange="ChangePosition();" >
<option value="0" selected>Top</option>
<option value="1">Bottom</option>
<option value="2">Right</option>
<option value="3">Left</option>
</select>
<label>Link type:</label>
<select id="linktype" onchange="ChangeLinkType();" >
<option value="M" selected>Manhattan</option>
<option value="B">B閦ier</option>
</select>
<label>Node Alignment:</label>
<select id="nodealign" onchange="ChangeNodeAlign();" >
<option value="0" selected>Top</option>
<option value="1">Center</option>
<option value="2">Bottom</option>
</select>
<label>Subtree Sep.:</label>
<a href="javascript:DecreaseSubtreeSep();"><img border=0 alt="" src="./img/less.gif"></a>
<input id="stsep" value=80 size="3" maxlength="3" readonly></input>
<a href="javascript:IncreaseSubtreeSep();"><img border=0 alt="" src="./img/plus.gif"></a>
<label>Sibling Sep.:</label>
<a href="javascript:DecreaseSiblingSep();"><img border=0 alt="" src="./img/less.gif"></a>
<input id="sbsep" value=40 size="3" maxlength="3" readonly></input>
<a href="javascript:IncreaseSiblingSep();"><img border=0 alt="" src="./img/plus.gif"></a>
<label>Level Sep.:</label>
<a href="javascript:DecreaseLevelSep();"><img border=0 alt="" src="./img/less.gif"></a>
<input id="lvsep" value=40 size="3" maxlength="3" readonly></input>
<a href="javascript:IncreaseLevelSep();"><img border=0 alt="" src="./img/plus.gif"></a>
</div>
<div>
<label>Color combination:</label>
<select id="colorSet" onchange="ChangeColors();" >
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue" selected>Blue</option>
</select>
<label>Selection mode:</label>
<select id="selMode" onchange="ChangeSelMode();" >
<option value=0 selected>Multiple</option>
<option value=1>Single</option>
<option value=2>None</option>
</select>
<label>Hyperlinks:</label>
<select id="usetarget" onchange="ChangeUseTarget();" >
<option value="true" selected>Yes</option>
<option value="false">No</option>
</select>
<label>Search mode:</label>
<select id="searchMode" onchange="ChangeSearchMode();" >
<option value=0 selected>Title</option>
<option value=1>Metadata</option>
<option value=2>Both</option>
ECOTree树形控件
3星 · 超过75%的资源 需积分: 10 133 浏览量
2013-11-20
14:52:58
上传
评论
收藏 15KB RAR 举报 
ECOTree.rar （13个子文件） 
横向树控件 
ECOTree.css 468B ECOTree.js 30KB img 
search.gif 310B trans.gif 43B plus.gif 89B less.gif 85B simple6.htm 2KB simple5.htm 2KB simple3.htm 2KB simple2.htm 1KB advanced.htm 9KB simple1.htm 913B simple4.htm 2KB资源评论
ynat1232014-11-22在现在的高版本浏览器下显示都有问题啊
