[Sommaire] [Imprimer]

   1  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
   2  
   3  <html>
   4  <head>
   5      <title>DHTML Tree samples. dhtmlXTree - Easy skinable design</title>
   6  </head>
   7  <style>
   8      body {font-size:12px}
   9      .{font-family:arial;font-size:12px}
  10      h1 {cursor:hand;font-size:16px;margin-left:10px;line-height:10px}
  11      xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
  12  </style>
  13  <body>
  14      <h1>Easy skinable design</h1>
  15      <link rel="STYLESHEET" type="text/css" href="../css/dhtmlXTree.css">
  16      <script  src="../js/dhtmlXCommon.js"></script>
  17      <script  src="../js/dhtmlXTree.js"></script>        
  18      <script>
  19  		function setDesign(n){
  20              switch(n){
  21              case 4:
  22                  tree.enableTreeLines(true);
  23                  tree.setImageArrays("plus","plus2.gif","plus3.gif","plus4.gif","plus.gif","plus5.gif");
  24                  tree.setImageArrays("minus","minus2.gif","minus3.gif","minus4.gif","minus.gif","minus5.gif");
  25                  tree.setStdImages("book.gif","books_open.gif","books_close.gif");                    
  26                  break;
  27      
  28                  break;
  29              case 3:
  30                  tree.enableTreeLines(true);
  31                  tree.setImageArrays("plus","plus2.gif","plus3.gif","plus4.gif","plus.gif","plus5.gif");
  32                  tree.setImageArrays("minus","minus2.gif","minus3.gif","minus4.gif","minus.gif","minus5.gif");
  33                  tree.setStdImages("item2.gif","close2.gif","open2.gif");                    
  34                  break;
  35              case 2:
  36                  tree.enableTreeLines(true);
  37                  tree.setImageArrays("plus","open2.gif","open2.gif","open2.gif","open2.gif","open2.gif");
  38                  tree.setImageArrays("minus","close2.gif","close2.gif","close2.gif","close2.gif","close2.gif");
  39                  tree.setStdImages("book.gif","books_open.gif","books_close.gif");                    
  40                  break;
  41              case 1:
  42                  tree.enableTreeLines(false);
  43                  tree.setImageArrays("plus","","","","plus_ar.gif","plus_ar.gif");
  44                  tree.setImageArrays("minus","","","","minus_ar.gif","minus_ar.gif");
  45                  tree.setStdImages("book.gif","books_open.gif","books_close.gif");                    
  46                  break;
  47              }
  48              tree.refreshItem(0);
  49          }
  50      </script>
  51      <table>
  52          <tr>
  53              <td valign="top">
  54  
  55  
  56                  <div id="treeboxbox_tree" style="width:250; height:218;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div><br>
  57                  <br>
  58  
  59              </td>
  60              <td rowspan="2" style="padding-left:25" valign="top">
  61              
  62              <a href="javascript:void(0)" onclick="setDesign(1);">Set design 1</a><br>
  63              <a href="javascript:void(0)" onclick="setDesign(2);">Set design 2</a><br>
  64              <a href="javascript:void(0)" onclick="setDesign(3);">Set design 3</a><br>
  65              <a href="javascript:void(0)" onclick="setDesign(4);">Set design 4</a><br>
  66              
  67  
  68              </td>
  69          </tr>
  70          <tr>
  71              <td>&nbsp;</td>
  72          </tr>
  73      </table>
  74      <hr>    
  75  <XMP>
  76  <div id="treeboxbox_tree" style="width:200;height:200"></div>
  77  <script>
  78              tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
  79              tree.setImagePath("../imgs/");
  80              tree.loadXML("tree.xml");
  81  
  82                  // enable/disable tree lines
  83                  tree.enableTreeLines(false);
  84                  // set plus images
  85                  tree.setImageArrays("plus","","","","open2.gif");
  86                  //set minus images
  87                  tree.setImageArrays("minus","","","","close2.gif");
  88                  //set default node images
  89                  tree.setStdImages("book.gif","books_open.gif","books_close.gif");    
  90  
  91  </script>
  92  </XMP>    
  93   
  94      <script>
  95              tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
  96              tree.setImagePath("../imgs/");
  97              tree.enableDragAndDrop(0);
  98                  tree.enableTreeLines(false);
  99                  tree.setImageArrays("plus","","","","plus_ar.gif");
 100                  tree.setImageArrays("minus","","","","minus_ar.gif");
 101                  tree.setStdImages("book.gif","books_open.gif","books_close.gif");        
 102              tree.setXMLAutoLoading("tree4.xml");
 103              tree.loadXML("tree4.xml");
 104      </script>
 105  <br><br>
 106  
 107  </body>
 108  </html>
 109