Location: PHPKode > projects > Neobill > NeoBill0.5.6/include/dhtmlxTree/doc/special.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>DHTML Tree Special Technics</title>
	<style type="text/css">
	body { font-family:arial;font-size:14px;line-height:18px;}
	h2 {cursor:pointer;font-size:20px;margin:30px 0px 40px 5px;line-height:10px}
	h3 {cursor:pointer;font-weight:normal;color:blue;text-decoration:underline;line-height:10px}
	h4 {cursor:pointer;font-weight:normal;color:black;text-decoration:underline;line-height:10px}
	.op {cursor:pointer;}
	div.block {margin-left:5px;}
	xmp {color:green;font-size:12px;margin:0;font-family:courier;background-color:#e6e6fa;padding:2px}
	li {margin-top:2px;}
	</style>
</head>

<body>
<h2>DHTML Tree Special Technics</h2>
<div class="block">
<!--- Link functionality --->
	
	<a name="spec_link"><h3>Links in tree</h3></a><div style="display:block" class="block">
	Xml for the tree:<br>
<xmp>
<tree..>
	<item ...>
		<userdata name=�myurl�>http://www.google.com</userdata>
		<item ...>
			<userdata name=�myurl�>http://groups.google.com</userdata>
		</item>
	</item>
</xmp>
<br>
there is an event handler for click processing: 
<xmp>
tree.setOnClickHandler(doOnClick);
function doOnClick(nodeId){
	var myUrl = tree.getUserData(nodeId,�myurl�);
	window.open(myUrl);// or frames[�someframe�].location.href = myUrl
}
</xmp>		
	</div>

	<a name="spec_dnd_out"><h3>Drag-n-drop outside tree</h3
	></a><div style="display:show" class="block">
	Any page control can be set as �landing zone�. Here is an example:
<xmp> 
<div id="treeboxbox_tree" style="width:200px;height:200px"></div>
<input type="text" style="width:120px" id="sInput">
<script type="text/javascript">
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
tree.setImagePath("../imgs/");

//user defined drag and drop control with event handlers inside
function s_control(){
   	//action occures on drag
   	this._drag=function(sourceHtmlObject,dhtmlObject,targetHtmlObject){
		targetHtmlObject.style.backgroundColor="";
		targetHtmlObject.value=sourceHtmlObject.parentObject.label;
	}
	//action occures on drag moved in landing zone
	this._dragIn=function(htmlObject,shtmlObject){
		htmlObject.style.backgroundColor="#fffacd";
		return htmlObject;
	}
	//action occures on drag moved out landing zone
	this._dragOut=function(htmlObject){ 
		htmlObject.style.backgroundColor="";
		return this;
	}
}
//set input control as �landing zone�
tree.dragger.addDragLanding(document.getElementById('sInput'), new s_control); 
</script>
</xmp>
	</div>

</div>
</body>
</html>
Return current item: Neobill