eGroupWare 1.2.106-2 : /phpgwapi/js/dhtmlxtree/index.shtml source

[Sommaire] [Imprimer]
   1  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
   2  <html>
   3  <head>
   4  
   5  <!--#include virtual="/include/meta.inc" -->
   6  <META NAME="KEYWORDS" CONTENT="dhtmlxtree, dhtml tree, javascript tree, java, dynamical loading, xml, API, cross-browser, javascript, dhtml, scand, treeview, navigation, menu, bar, script, javascript navigation, web-site, dynamic, dynamic menu, folder, folder tree, internet explorer, firefox, mozilla, opera, safari, tooltip, item, node, asp, .net, jsp, cold fusion, image, custom tag, loading, control, widget, web site, checkbox, drag, drop, drag and drop, component, html, offshore, software, outsourcing, development, company, advanced, efficient">
   7  <META NAME="DESCRIPTION" CONTENT="Javascript DHTML Tree with XML support, cross-browser compatibility and rich JavaScript API. It allows to create attractive customizable DHTML JavaScript Tree Menu. Has checkboxes and drag-n-drop">
   8  
   9  <!--#set var="title" value="dhtmlxTree - an advanced DHTML tree component with rich JavaScript API" -->
  10  <!--#set var="picture" value="../../img/download/th_dhtmlxtree.gif" -->
  11  <!--#set var="section" value="dhtmlxTree" -->
  12  
  13  <link rel="STYLESHEET" type="text/css" href="css/dhtmlXTree.css">
  14  <script  src="js/dhtmlXCommon.js"></script>
  15  <script  src="js/dhtmlXTree.js"></script>    
  16  <script>
  17      
  18      var tree1,tree2 = null;
  19  	function doOnLoad(){
  20          preLoadImages();
  21          //tree #1
  22          tree1=new dhtmlXTreeObject(document.getElementById('treebox1'),"100%","100%",0);
  23          tree1.setImagePath("imgs/");
  24          tree1.setDragHandler();
  25          tree1.enableCheckBoxes(true)
  26          tree1.enableThreeStateCheckboxes(true);
  27          tree1.enableDragAndDrop(true)
  28          tree1.loadXML("tree.xml")
  29          //tree #2
  30          tree2=new dhtmlXTreeObject(document.getElementById('treebox2'),"100%","100%",0);
  31          tree2.setImagePath("imgs/");
  32          tree2.setDragHandler();
  33          tree2.enableTreeLines(false);
  34          tree2.enableDragAndDrop(true)
  35          tree2.loadXML("tree2.xml")
  36      }
  37  	function preLoadImages(){
  38          var imSrcAr = new Array("line1.gif","line2.gif","line3.gif","line4.gif","minus2.gif","minus3.gif","minus4.gif","plus2.gif","plus3.gif","plus4.gif","book.gif","books_open.gif","books_close.gif","magazines_open.gif","magazines_close.gif","tombs.gif","tombs_mag.gif","book_titel.gif","iconCheckAll.gif")
  39          var imAr = new Array(0);
  40          for(var i=0;i<imSrcAr.length;i++){
  41              imAr[imAr.length] = new Image();
  42              imAr[imAr.length-1].src = "imgs/"+imSrcAr[i]
  43          }
  44      }
  45  </script>
  46  
  47  <!--#include virtual="/include/top.shtml" -->
  48  
  49  <body onload="doOnLoad()">
  50  <select onchange="document.location.href = this.value">
  51      <option>dhtmlX Components
  52      <option value="http://www.scbr.com/docs/products/dhtmlxMenu/index.shtml">Menu - dhtmlXMenu    
  53      <option value="http://www.scbr.com/docs/products/dhtmlxToolbar/index.shtml">Toolbar - dhtmlXToolbar
  54      <option value="http://www.scbr.com/docs/products/dhtmlxTree/index.shtml">Tree - dhtmlXTree
  55  </select>
  56  <p>Often there is a need to show a hierarchically structured data.<br>
  57  Our dhtmlxTree (DHTML extensions Tree) lets you do this in an easy and most comfortable way - in any browser! This <b>JavaScript Tree Menu component</b> allows creating user-friendly navigation bar for a commercial application or a web site. Menu items are organized into compact, hierarchical tree structure so users can find information they need easily.<br>
  58  Having such feature, as <b>dynamical loading</b> of items from <b>XML</b> stream allows dhtmlxTree to handle large amounts of data. <b>Drag-and-drop</b> makes it possible to drag items not just within one tree, but between different trees. Try by yourself <b>now</b>:</p>
  59      
  60  <table width="600">
  61      <tr>
  62          <td>
  63          <div 
  64              id="treebox1" 
  65              style="width:275; height:250;background-color:#f5f5f5;border :1px solid Silver;overflow:auto;">
  66          </div>
  67          </td>
  68          <td width="50">&nbsp;</td>
  69          <td>
  70          <div 
  71              id="treebox2" 
  72              style="width:275; height:250;background-color:#f5f5f5;border :1px solid Silver;overflow:auto;">
  73          </div>
  74          </td>
  75      </tr>
  76  </table>
  77  <font color=gray>
  78      Drag &amp; drop items within the trees as well as between trees<br>
  79      Double-click on folder label or click on [+] plus to expand subitems.
  80  </font>
  81  <br><br>
  82  <p>Rich <b>client-side Javascript API</b> gives an opportunity to change tree styles (folder images, fonts, indents, and colors) and manage any part or activity. Our DHTML tree  works perfectly in all  main Web-browsers for <b>Windows, Mac OS X, Linux or Unix</b> so you don't have to care about the browser compatibility. <br>
  83  dhtmlxTree has built-in <b>checkboxes</b> providing a handy tool for any kind of navigation system where selection lists are required. 
  84  </p>
  85  
  86  <table width="600">
  87      <tr>
  88          <td colspan="2">
  89              <h3>What's new in version 1.2* (October 20, 2005):</h3>
  90              <li>XHTML compartibility</li>
  91              <li>Complex drag-n-drop (inside/between)</li>
  92              <li>Extended Serialization (userdata, more other parameters)</li>
  93              <li>Sorting (a-z,z-a)</li>
  94              <li>.Net support</li>
  95              <li>JSP support</li>
  96              <li>Event handlers for loading process</li>
  97              <li>Extended event handlers for drag-n-drop</li>
  98              <li>drag-n-Drop outside the tree</li>
  99              <li>Icon sizes now changable</li>
 100              <li>Possibility to turn +/- off</li>
 101              <li>Increased overal performance</li>
 102              <li>Disabling/hiding checkboxes</li>
 103              <li>New Samples</li>
 104              <li>More Detailed documentation</li>
 105              <li>PHP/MySQL, ASP.Net, JSP sample applications</li>
 106          <br><small>* - some functionlity available in <a href="#editions">professional edition</a> only</small>
 107          <br><br>
 108          </td>
 109      </tr>
 110      <tr>
 111          <td valign="top">
 112          <h3>Supported Browsers:</h3>
 113              <li>IE 5.x and above</li>
 114              <li>Mac OS X Safari</li>
 115              <li>Mozilla 1.4 and above</li>
 116              <li>FireFox 0.9 and above</li>
 117              <li>Opera (Xml support depends on browser version)</li>
 118          
 119          <h3>Features:*</h3>
 120              <li>Multibrowser/Multiplatform support </li>
 121              <li>XHTML compartible</li>
 122              <li>Full controll with JavaScript API</li>
 123              <li>Dynamic loading</li>
 124              <li>XML support</li>
 125              <li>Extended XML serialization</li>
 126              <li>drag-&-drop (within one tree, between trees) </li>
 127              <li>copy with drag-n-drop</li>
 128              <li>drop-between/drop-inside</li>
 129              <li>checkboxes (two/three states), disabled/hidden</li> 
 130              <li>customizable icons (with javascript or xml), icon size</li>
 131              <li>user data for nodes</li>
 132              <li>Async mode loading support </li>
 133              <li>.NET custom server control</li>
 134              <li>JSP custom tag</li>
 135              <li>Macromedia Cold Fusion support</li>
 136              <li>More detailed documentation</li>
 137              <br>
 138              <small>* - some functionlity available in <a href="#editions">professional edition</a> only</small>
 139          <h3>Editions</h3>
 140              <li>Standard - available for free download (for non-commercial use).</li>
 141              <li><a name="editions">Professional</a> - contains <a href="pro_features.html" target="_blank">additional features</a> (with examples) which are not present at standard edition. Included with Commercial and Enterprise licenses. <a href="mailto:info@scand.com">Contact us</a> to buy.<!--Click <a href=buy.shtml>here</a> to buy.--></li>
 142          <h3>Licensing</h3>
 143              <li><a target="_blank" href="License_GPL.txt">Open Source - GPL</a> (standard edition only)</li>
 144              <li><a target="_blank" name="license" href="License_Commercial.html">Commercial License</a> (standard and professional editions): in order to use any edition of dhtmlxTree in a commercial project, get all features available in <a href="#editions">professional edition</a> or to have support you can purchase a Commercial License ($99). <a href="mailto:info@scand.com">Contact us</a> to buy.<!--<a href=buy.shtml>here</a>.  - please <a href="mailto:info@scand.com">contact us</a --></li>
 145          </td>
 146          <td valign="top" style="padding-left:20px">
 147              <h3>Download:</h3>
 148                  <a href="download/dhtmlxTree.zip"><li title="Scripts, Samples, Documentation, ColdFusion Tag">Full package (v.1.2 standard)</li></a>
 149                  <a href="download/dhtmlxTreeDoc.zip"><li>Documentation only</li></a>
 150              <h3>Examples:</h3>
 151                  <a target="_blank" href="samples/treeEx11.html"><li>Initialize object</li></a>
 152                  <a target="_blank" href="samples/treeEx12.html"><li>Add/Delete items</li></a>
 153                  <a target="_blank" href="samples/treeEx13.html"><li>Attached events</li></a>
 154                  <a target="_blank" href="samples/treeEx21.html"><li>Collapse/Expand branch</li></a>
 155                  <a target="_blank" href="samples/treeEx22.html"><li>Change item text/images</li></a>
 156                  <a target="_blank" href="samples/treeEx23.html"><li>Checkboxes</li></a>
 157                  <a target="_blank" href="samples/treeEx24.html"><li>Change design</li></a>
 158                  <a target="_blank" href="samples/treeEx31.html"><li>Autoloading from xml</li></a>
 159                  <a target="_blank" href="samples/treeEx32.html"><li>Drag and Drop</li></a>
 160                  <a href="samples/dhtmlxTree_db_sample.zip"><li>Working with database (PHP/MySQL)</li></a>
 161              <h3>Documentation:</h3>
 162                  <a target="_blank" href="doc/index.html"><li>API Functions and Documentation</li></a>
 163          </td>
 164      </tr>
 165  </table>
 166  <br>
 167  <div align="center" style="width:600"><h3><a href="download/dhtmlxTree.zip">Download latest version of javascript tree source code</a></h3></div>
 168  <h3>Code Sample</h3>
 169      
 170  <XMP style="color:green">
 171  <link rel="STYLESHEET" type="text/css" href="jTreeX.css">
 172  <script  src="dhtmlXCommon.js"></script>
 173  <script  src="dhtmlXTree.js"></script>    
 174  
 175  <script>
 176      var tree1 = null;
 177  	function doOnLoad(){
 178          tree1=new dhtmlXTreeObject('treebox1',"100%","100%",0);
 179          tree1.setImagePath("imgs/");
 180          tree1.enableDragAndDrop(true);
 181          tree1.loadXML("tree.xml")
 182      }
 183  </script>
 184  <body onload="doOnLoad()">
 185  <div 
 186      id="treebox1" 
 187      style="    width:250; 
 188          height:250;
 189          background-color:#f5f5f5;
 190          border :1px solid Silver;
 191          overflow:auto;">
 192  </div>
 193  </XMP>    
 194  
 195  <p>See also our <a href="../jtree/">Java tree applet - jTree</a>.</p>
 196  <center><a href="http://scbr.com/docs/company.shtml" class=menu><img width=468 height=60 border=0 alt="" src=/img/b2.gif></a></center>
 197  
 198  <!--#include virtual="/include/bottom.shtml" -->
Code source de eGroupWare 1.2.106-2

/phpgwapi/js/dhtmlxtree/ -> index.shtml (source)
