📄 advanced.htm
字号:
<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.codeproject.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>
</select>
<label>Search:</label>
<input id="search" value="" size="10" maxlength="20"></input>
<a href="javascript:SearchTree();"><img border=0 align="absbottom" alt="" src="./img/search.gif"></a>
</div>
<div>
<label>Node fill:</label>
<select id="nodefill" onchange="ChangeNodeFill();" >
<option value=0 selected>Gradient</option>
<option value=1>Solid</option>
</select>
<label>Color style:</label>
<select id="colorstyle" onchange="ChangeColorStyle();" >
<option value=0 selected>Node colors</option>
<option value=1>Level colors</option>
</select>
<a href="javascript:t.collapseAll();">Collapse All</a>
<a href="javascript:t.expandAll();">Expand All</a>
<a href="javascript:t.selectAll();">Select All</a>
<a href="javascript:t.unselectAll();">Unselect All</a>
<a href="javascript:selectedNodes();">Show selected</a>
</div>
</form>
<div id="sample1">
</div>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -