js绘制的ECOTree，支持IE，FF资源-CSDN文库

共13个文件

htm：7个

gif：4个

css：1个

javascript，vml，canvas，tree

5星 · 超过95%的资源需积分: 9 138 浏览量 2009-09-25 13:21:40 上传评论收藏 15KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

ECOTree.rar （13个子文件）

ECOTree

simple4.htm 2KB

simple2.htm 1KB

simple1.htm 913B

simple3.htm 2KB

ECOTree.css 468B

simple5.htm 2KB

simple6.htm 2KB

img

plus.gif 89B

search.gif 310B

trans.gif 43B

less.gif 85B

advanced.htm 9KB

ECOTree.js 29KB

<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�zier</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> </se

评论收藏

内容反馈