forked from extern/egroupware
191 lines
9.6 KiB
HTML
191 lines
9.6 KiB
HTML
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>dhtmlxTree v.1.1 Standard Edition</title>
|
||
|
|
<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">
|
||
|
|
<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">
|
||
|
|
|
||
|
|
|
||
|
|
<link rel="STYLESHEET" type="text/css" href="css/dhtmlXTree.css">
|
||
|
|
<script src="js/dhtmlXCommon.js"></script>
|
||
|
|
<script src="js/dhtmlXTree.js"></script>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var tree1,tree2 = null;
|
||
|
|
function doOnLoad(){
|
||
|
|
preLoadImages();
|
||
|
|
//tree #1
|
||
|
|
tree1=new dhtmlXTreeObject(document.getElementById('treebox1'),"100%","100%",0);
|
||
|
|
tree1.setImagePath("imgs/");
|
||
|
|
tree1.setDragHandler();
|
||
|
|
tree1.enableCheckBoxes(true)
|
||
|
|
tree1.enableThreeStateCheckboxes(true);
|
||
|
|
tree1.enableDragAndDrop(true)
|
||
|
|
tree1.loadXML("tree.xml")
|
||
|
|
//tree #2
|
||
|
|
tree2=new dhtmlXTreeObject(document.getElementById('treebox2'),"100%","100%",0);
|
||
|
|
tree2.setImagePath("imgs/");
|
||
|
|
tree2.setDragHandler();
|
||
|
|
tree2.enableTreeLines(false);
|
||
|
|
tree2.enableDragAndDrop(true)
|
||
|
|
tree2.loadXML("tree2.xml")
|
||
|
|
}
|
||
|
|
function preLoadImages(){
|
||
|
|
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","magazine_open.gif","magazine_close.gif","tombs.gif","tombs_mag.gif","book_titel.gif")
|
||
|
|
var imAr = new Array(0);
|
||
|
|
for(var i=0;i<imSrcAr.length;i++){
|
||
|
|
imAr[imAr.length] = new Image();
|
||
|
|
imAr[imAr.length-1].src = "imgs/"+imSrcAr[i]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<body onload="doOnLoad()">
|
||
|
|
<select onchange="document.location.href = this.value">
|
||
|
|
<option>dhtmlX Components
|
||
|
|
<option value="http://www.scbr.com/docs/products/dhtmlxMenu/index.shtml">Menu - dhtmlXMenu
|
||
|
|
<option value="http://www.scbr.com/docs/products/dhtmlxToolbar/index.shtml">Toolbar - dhtmlXToolbar
|
||
|
|
<option value="http://www.scbr.com/docs/products/dhtmlxTree/index.shtml">Tree - dhtmlXTree
|
||
|
|
</select>
|
||
|
|
<p>Often there is a need to show a hierarchically structured data.<br>
|
||
|
|
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>
|
||
|
|
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>
|
||
|
|
|
||
|
|
<table width="600">
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<div
|
||
|
|
id="treebox1"
|
||
|
|
style="width:275; height:250;background-color:#f5f5f5;border :1px solid Silver;overflow:auto;">
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td width="50"> </td>
|
||
|
|
<td>
|
||
|
|
<div
|
||
|
|
id="treebox2"
|
||
|
|
style="width:275; height:250;background-color:#f5f5f5;border :1px solid Silver;overflow:auto;">
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
<font color=gray>
|
||
|
|
Drag & drop items within the trees as well as between trees<br>
|
||
|
|
Double-click on folder label or click on [+] plus to expand subitems.
|
||
|
|
</font>
|
||
|
|
<br><br>
|
||
|
|
<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>
|
||
|
|
dhtmlxTree has built-in <b>checkboxes</b> providing a handy tool for any kind of navigation system where selection lists are required.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<table width="600">
|
||
|
|
<tr>
|
||
|
|
<td colspan="2">
|
||
|
|
<h3>What's new in version 1.1 (June 22, 2005):</h3>
|
||
|
|
<li>possibility to use tree without icons - <em>EnableTreeImages</em> method</li>
|
||
|
|
<li>autoscrolling while drag-and-drop</li>
|
||
|
|
<li>fixed bug in drag-and-drop on pages with scrollbars</li>
|
||
|
|
<li>added another drag-n-drop behavior – drop-as-sibling *</li>
|
||
|
|
<li><strong>drag-n-drop between frames/iframes</strong> *</li>
|
||
|
|
<li>OnDrop event handler *</li>
|
||
|
|
<li>fixed some visual glitches</li>
|
||
|
|
<li>focus item with script - <em>focusItem</em> method *</li>
|
||
|
|
<li>advanced xml processing for loading big trees - <strong>tested with 50000 items</strong> *</li>
|
||
|
|
<li>saving/Restoring tree <strong>state in cookie</strong> *</li>
|
||
|
|
<li>possibility to <strong>create XML</strong> based on updated tree structure *</li>
|
||
|
|
<li><strong>search functionality</strong> *</li>
|
||
|
|
<li>possibility to change <strong>nodes order</strong> *</li>
|
||
|
|
<li><strong>multi-line</strong> tree items *</li>
|
||
|
|
<li><strong>context menu</strong> - integration with dhtmlXMenu *</li>
|
||
|
|
<br>
|
||
|
|
<small>* - <a href="#editions">professional edition</a></small>
|
||
|
|
<br><br>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td valign="top">
|
||
|
|
<h3>Supported Browsers:</h3>
|
||
|
|
<li>IE 5.x and above</li>
|
||
|
|
<li>Mac OS X Safari</li>
|
||
|
|
<li>Mozilla 1.4 and above</li>
|
||
|
|
<li>FireFox 0.9 and above</li>
|
||
|
|
<li>Opera (Xml support depends on browser version)</li>
|
||
|
|
|
||
|
|
<h3>Features:</h3>
|
||
|
|
<li>Multibrowser/Multiplatform support </li>
|
||
|
|
<li>Full controll with JavaScript API</li>
|
||
|
|
<li>Dynamic loading <font color=gray>(can load data on demand)</font></li>
|
||
|
|
<li>Dynamic rendering *</li>
|
||
|
|
<li>XML support <font color=gray>(initializes from XML stream)</font></li>
|
||
|
|
<li>drag-&-drop <font color=gray>(within one tree, between trees, between frames *)</font></li>
|
||
|
|
<li>checkboxes <font color=gray>(two/three states)</font></li>
|
||
|
|
<li>context menu * <font color=gray>(integration with <a href="http://www.scbr.com/docs/products/dhtmlxMenu/index.shtml" target="_blank">dhtmlxMenu</a>)</font></li>
|
||
|
|
<li>tooltips</li>
|
||
|
|
<li>multi-line tree items *</li>
|
||
|
|
<li>customizable icons <font color=gray>(with javascript or xml)</font></li>
|
||
|
|
<li>user data for nodes</li>
|
||
|
|
<li>high stability</li>
|
||
|
|
<li>.NET custom server control</li>
|
||
|
|
<li>JSP custom tag for Java - <font color=gray><i>pending</i></font></li>
|
||
|
|
<li>Macromedia Cold Fusion support</li>
|
||
|
|
<br>
|
||
|
|
<small>* - <a href="#editions">professional edition</a></small>
|
||
|
|
<h3>Editions</h3>
|
||
|
|
<li>Standard - available for free download (for non-commercial use).</li>
|
||
|
|
<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. Avalable for users of Commercial and Enterprice licenses.</li>
|
||
|
|
<h3>Licensing</h3>
|
||
|
|
<li><a target="_blank" href="License_GPL.txt">Open Source - GPL</a> (standard edition only)</li>
|
||
|
|
<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 non-OpenSource project, get all features available in <a href="#editions">professional edition</a> or to have support you can purchase a Commercial License ($99) - please <a href="mailto:info@scand.com">contact us</a></li>
|
||
|
|
</td>
|
||
|
|
<td valign="top" style="padding-left:20px">
|
||
|
|
<h3>Download:</h3>
|
||
|
|
<a href="download/dhtmlxTree.zip"><li title="Scripts, Samples, Documentation, ColdFusion Tag">Full package (v.1.1 standard)</li></a>
|
||
|
|
<a href="download/dhtmlxTreeDoc.zip"><li>Documentation only</li></a>
|
||
|
|
<h3>Examples:</h3>
|
||
|
|
<a target="_blank" href="samples/treeEx11.html"><li>Initialize object</li></a>
|
||
|
|
<a target="_blank" href="samples/treeEx12.html"><li>Add/Delete items</li></a>
|
||
|
|
<a target="_blank" href="samples/treeEx13.html"><li>Attached events</li></a>
|
||
|
|
<a target="_blank" href="samples/treeEx21.html"><li>Collapse/Expand branch</li></a>
|
||
|
|
<a target="_blank" href="samples/treeEx22.html"><li>Change item text/images</li></a>
|
||
|
|
<a target="_blank" href="samples/treeEx23.html"><li>Checkboxes</li></a>
|
||
|
|
<a target="_blank" href="samples/treeEx24.html"><li>Change design</li></a>
|
||
|
|
<a target="_blank" href="samples/treeEx31.html"><li>Autoloading from xml</li></a>
|
||
|
|
<a target="_blank" href="samples/treeEx32.html"><li>Drag and Drop</li></a>
|
||
|
|
<h3>Documentation:</h3>
|
||
|
|
<a target="_blank" href="doc/index.html"><li>API Functions and Documentation<br>(including CF custom tag doc)</li></a>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
<br>
|
||
|
|
<div align="center" style="width:600"><h3><a href="download/dhtmlxTree.zip">Download latest version source code</a></h3></div>
|
||
|
|
<h3>Code Sample</h3>
|
||
|
|
|
||
|
|
<XMP style="color:green">
|
||
|
|
<link rel="STYLESHEET" type="text/css" href="jTreeX.css">
|
||
|
|
<script src="dhtmlXCommon.js"></script>
|
||
|
|
<script src="dhtmlXTree.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var tree1 = null;
|
||
|
|
function doOnLoad(){
|
||
|
|
tree1=new dhtmlXTreeObject('treebox1',"100%","100%",0);
|
||
|
|
tree1.setImagePath("imgs/");
|
||
|
|
tree1.enableDragAndDrop(true);
|
||
|
|
tree1.loadXML("tree.xml")
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<body onload="doOnLoad()">
|
||
|
|
<div
|
||
|
|
id="treebox1"
|
||
|
|
style=" width:250;
|
||
|
|
height:250;
|
||
|
|
background-color:#f5f5f5;
|
||
|
|
border :1px solid Silver;
|
||
|
|
overflow:auto;">
|
||
|
|
</div>
|
||
|
|
</XMP>
|
||
|
|
|
||
|
|
<p>See also our <a href="../jtree/">Java tree applet - jTree</a>.</p>
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<!--#include virtual="/include/bottom.shtml" -->
|