forked from extern/egroupware
89 lines
2.4 KiB
HTML
89 lines
2.4 KiB
HTML
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|||
|
|
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<title>DHTML Tree Special Technics</title>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<style>
|
|||
|
|
body {font-size:14px;line-height:18px;}
|
|||
|
|
.{font-family:arial;}
|
|||
|
|
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:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
|
|||
|
|
li {margin-top:2px;}
|
|||
|
|
</style>
|
|||
|
|
<h2 >DHTML Tree Special Technics</h2>
|
|||
|
|
<div class="block">
|
|||
|
|
<!--- Link functionality --->
|
|||
|
|
|
|||
|
|
<a name="spec_link"><h3 >Links in tree</h3
|
|||
|
|
></a><div style="display:show" class="block">
|
|||
|
|
Xml for the tree:<br>
|
|||
|
|
<xmp>
|
|||
|
|
<tree..>
|
|||
|
|
<item ...>
|
|||
|
|
<userdata name=<EFBFBD>myurl<EFBFBD>>http://www.google.com</userdata>
|
|||
|
|
<item ...>
|
|||
|
|
<userdata name=<EFBFBD>myurl<EFBFBD>>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,<2C>myurl<72>);
|
|||
|
|
window.open(myUrl);// or frames[<5B>someframe<6D>].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 <20>landing zone<6E>. Here is an example:
|
|||
|
|
<xmp>
|
|||
|
|
<div id="treeboxbox_tree" style="width:200;height:200"></div>
|
|||
|
|
<input type="text" width="120px" id="sInput">
|
|||
|
|
<script>
|
|||
|
|
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 <20>landing zone<6E>
|
|||
|
|
tree.dragger.addDragLanding(document.getElementById('sInput'), new s_control);
|
|||
|
|
</script>
|
|||
|
|
</xmp>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|