Dynamical icon/text/style changing
You can customize this JavaScript tree to look just the way you want. Select a tree item you want to edit then click on image or color to make appropriate changes. To change tree item's text, you should type new text in the box and click "Set new item label".
|
Set new item label
To change item's color - click on one of next colors: |
</> Source
<!DOCTYPE html>
<html>
<head>
<title>Dynamical icon/text/style changing</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
<script src="../../../codebase/dhtmlx.js"></script>
<link rel="stylesheet" type="text/css" href="../common/demo_style.css"/>
<script>
var myTree;
function doOnLoad(){
myTree = new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
myTree.setImagePath("../../../skins/web/imgs/dhxtree_web/");
myTree.load("../common/tree.xml");
}
function setColor(color1,color2){
myTree.setItemColor(myTree.getSelectedItemId(),color1,color2);
}
</script>
</head>
<body onload="doOnLoad();">
<h1>Dynamical icon/text/style changing</h1>
<p>You can customize this JavaScript tree to look just the way you want.
Select a tree item you want to edit then click on image or color to make appropriate changes.
To change tree item's text, you should type new text in the box and click "Set new item label".
</p>
<table>
<tr>
<td valign="top">
<div id="treeboxbox_tree" class="tree_demo_samples"></div>
</td>
<td rowspan="2" style="padding-left:25px" valign="top">
<a href="javascript:void(0);" onClick="var d=new Date(); myTree.setItemText(myTree.getSelectedItemId(),document.getElementById('ed1').value);">Set new item label</a>
<input type="text" value="New label" id="ed1"><br><br>
To change item's color - click on one of next colors:
<table>
<tr>
<td><div style="cursor:pointer; width:20px; height:20px; background-color:#ff0000;" onClick="setColor('#ff0000','#ff0000')"> </div></td>
<td><div style="cursor:pointer;width:20px; height:20px; background-color:#ffa500;" onClick="setColor('#ffa500','#ffa500')"> </div></td>
<td><div style="cursor:pointer;width:20px; height:20px; background-color:#ffff00;" onClick="setColor('#ffff00','#ffff00')"> </div></td>
</tr>
<tr>
<td><div style="cursor:pointer;width:20px; height:20px; background-color:#008000;" onClick="setColor('#008000','#adff2f')"> </div></td>
<td><div style="cursor:pointer; width:20px; height:20px; background-color:#00ff7f;" onClick="setColor('#00ff7f','#adff2f')"> </div></td>
<td><div style="cursor:pointer; width:20px; height:20px; background-color:#adff2f;" onClick="setColor('#adff2f')"> </div></td>
</tr>
<tr>
<td><div style="cursor:pointer; width:20px; height:20px; background-color:#0000ff;" onClick="setColor('#0000ff','#87ceeb')"> </div></td>
<td><div style="cursor:pointer; width:20px; height:20px; background-color:#9932cc;" onClick="setColor('#9932cc','#9932cc')"> </div></td>
<td><div style="cursor:pointer; width:20px; height:20px; background-color:#87ceeb;" onClick="setColor('#87ceeb','#87ceeb')"> </div></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Documentation
Check documentation to learn how to use the components and easily implement them in your applications.