[Sommaire] [Imprimer]

   1  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
   2  
   3  <html>
   4  <head>
   5      <title>DHTML Tree Special Technics</title>
   6  </head>
   7  
   8  <body>
   9  <style>
  10      body {font-size:14px;line-height:18px;}
  11      .{font-family:arial;}
  12      h2 {cursor:pointer;font-size:20px;margin:30px 0px 40px 5px;line-height:10px}
  13      h3 {cursor:pointer;font-weight:normal;color:blue;text-decoration:underline;line-height:10px}
  14      h4 {cursor:pointer;font-weight:normal;color:black;text-decoration:underline;line-height:10px}
  15      .op {cursor:pointer;}
  16      div.block {margin-left:5px;}
  17      xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
  18      li {margin-top:2px;}
  19  </style>
  20  <h2 >DHTML Tree Special Technics</h2>
  21  <div class="block">
  22  <!--- Link functionality --->
  23      
  24      <a name="spec_link"><h3 >Links in tree</h3
  25      ></a><div style="display:show" class="block">
  26      Xml for the tree:<br>
  27  <xmp>
  28  <tree..>
  29      <item ...>
  30          <userdata name=“myurl“>http://www.google.com</userdata>
  31          <item ...>
  32              <userdata name=“myurl“>http://groups.google.com</userdata>
  33          </item>
  34      </item>
  35  </xmp>
  36  <br>
  37  there is an event handler for click processing: 
  38  <xmp>
  39  tree.setOnClickHandler(doOnClick);
  40  function doOnClick(nodeId){
  41      var myUrl = tree.getUserData(nodeId,“myurl“);
  42      window.open(myUrl);// or frames[“someframe“].location.href = myUrl
  43  }
  44  </xmp>        
  45      </div>
  46  <!--  -->    
  47      <a name="spec_dnd_out"><h3 >Drag-n-drop outside tree</h3
  48      ></a><div style="display:show" class="block">
  49      Any page control can be set as “landing zone”. Here is an example:
  50  <xmp> 
  51  <div id="treeboxbox_tree" style="width:200;height:200"></div>
  52  <input type="text" width="120px" id="sInput">
  53  <script>
  54  tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
  55  tree.setImagePath("../imgs/");
  56  
  57  //user defined drag and drop control with event handlers inside
  58  function s_control(){
  59         //action occures on drag
  60         this._drag=function(sourceHtmlObject,dhtmlObject,targetHtmlObject){
  61          targetHtmlObject.style.backgroundColor="";
  62          targetHtmlObject.value=sourceHtmlObject.parentObject.label;
  63      }
  64      //action occures on drag moved in landing zone
  65      this._dragIn=function(htmlObject,shtmlObject){
  66          htmlObject.style.backgroundColor="#fffacd";
  67          return htmlObject;
  68      }
  69      //action occures on drag moved out landing zone
  70      this._dragOut=function(htmlObject){ 
  71          htmlObject.style.backgroundColor="";
  72          return this;
  73      }
  74  }
  75  //set input control as “landing zone”
  76  tree.dragger.addDragLanding(document.getElementById('sInput'), new s_control); 
  77  </script>
  78  </xmp>
  79      </div>
  80  
  81  
  82  
  83  
  84  
  85  
  86  </div>
  87  </body>
  88  </html>