mirror of
https://github.com/EGroupware/egroupware.git
synced 2025-08-09 08:25:03 +02:00
updated dhtmlxtree to version 2.6
This commit is contained in:
Ralf Becker
193
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/01_appearance/09_tree_design.html
Executable file
193
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/01_appearance/09_tree_design.html
Executable file
@ -0,0 +1,193 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<title>Easy skinable design</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="title" content="Samples" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="../common/css/style.css" type="text/css" media="screen" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<a class="logo" href="http://www.dhtmlx.com" title="DHTMLX homepage"></a>
|
||||
<div class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</div>
|
||||
<div class="search-field">
|
||||
<form action="http://docs.dhtmlx.com/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="doc_inact" href="../../../docsExplorer/index.html" title="DHTMLX Documentation homepage"></a>
|
||||
<a class="sample"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="navigation-div">
|
||||
<a href="../../../docsExplorer/samples.html" class="navigation"><img src="../common/icons/file.gif" alt="" >All components</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="../index.html" class="navigation"><img height="22" src="../common/icons/tree.gif" alt="" >dhtmlxTree</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="./index.html" class="navigation"><img src="../common/icons/none.gif" alt="" >Appearance</a>
|
||||
</div>
|
||||
<div style="display:block;">
|
||||
<h3>Easy skinable design</h3>
|
||||
</div>
|
||||
<div class="navigation-div">
|
||||
<a href="#code" class="navigation view-source"><img src="../common/icons/source.gif" alt="" >View page source</a>
|
||||
</div>
|
||||
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">
|
||||
<script src="../../codebase/dhtmlxcommon.js"></script>
|
||||
<script src="../../codebase/dhtmlxtree.js"></script>
|
||||
|
||||
<p>dhtmlxTree is highly customizable JavaScript tree menu. Choose one of four tree
|
||||
designs to see how easily the tree appearance can be changed.</p>
|
||||
|
||||
<script>
|
||||
function setDesign(n){
|
||||
switch(n){
|
||||
case 4:
|
||||
tree.enableTreeLines(true);
|
||||
tree.setImageArrays("plus","plus2.gif","plus3.gif","plus4.gif","plus.gif","plus5.gif");
|
||||
tree.setImageArrays("minus","minus2.gif","minus3.gif","minus4.gif","minus.gif","minus5.gif");
|
||||
tree.setStdImages("book.gif","books_open.gif","books_close.gif");
|
||||
break;
|
||||
|
||||
break;
|
||||
case 3:
|
||||
tree.enableTreeLines(true);
|
||||
tree.setImageArrays("plus","open2.gif","open2.gif","open2.gif","open2.gif","open2.gif");
|
||||
tree.setImageArrays("minus","close2.gif","close2.gif","close2.gif","close2.gif","close2.gif");
|
||||
tree.setStdImages("leaf.gif","folderOpen.gif","folderClosed.gif");
|
||||
break;
|
||||
case 2:
|
||||
tree.enableTreeLines(true);
|
||||
tree.setImageArrays("plus","open2.gif","open2.gif","open2.gif","open2.gif","open2.gif");
|
||||
tree.setImageArrays("minus","close2.gif","close2.gif","close2.gif","close2.gif","close2.gif");
|
||||
tree.setStdImages("book.gif","books_open.gif","books_close.gif");
|
||||
break;
|
||||
case 1:
|
||||
tree.enableTreeLines(false);
|
||||
tree.setImageArrays("plus","","","","plus_ar.gif","plus_ar.gif");
|
||||
tree.setImageArrays("minus","","","","minus_ar.gif","minus_ar.gif");
|
||||
tree.setStdImages("book.gif","books_open.gif","books_close.gif");
|
||||
break;
|
||||
}
|
||||
tree.refreshItem(0);
|
||||
}
|
||||
</script>
|
||||
<table>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
|
||||
|
||||
<div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;"></div><br>
|
||||
|
||||
</td>
|
||||
<td rowspan="2" style="padding-left:25" valign="top">
|
||||
|
||||
<a href="javascript:void(0)" onclick="setDesign(1);">Set design 1</a><br>
|
||||
<a href="javascript:void(0)" onclick="setDesign(2);">Set design 2</a><br>
|
||||
<a href="javascript:void(0)" onclick="setDesign(3);">Set design 3</a><br>
|
||||
<a href="javascript:void(0)" onclick="setDesign(4);">Set design 4</a><br>
|
||||
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
|
||||
|
||||
tree.setSkin('dhx_skyblue');
|
||||
tree.setImagePath("../common/images/");
|
||||
tree.enableDragAndDrop(0);
|
||||
tree.enableTreeLines(false);
|
||||
tree.setImageArrays("plus","","","","plus.gif");
|
||||
tree.setImageArrays("minus","","","","minus.gif");
|
||||
tree.setStdImages("book.gif","books_open.gif","books_close.gif");
|
||||
tree.setXMLAutoLoading("../common/tree4.xml");
|
||||
tree.loadXML("../common/tree4.xml");
|
||||
</script>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="source">
|
||||
<div class="teg">Source</div>
|
||||
<div class="code" id="code">
|
||||
<div class="hl-main"><pre><span class="hl-brackets"><</span><span class="hl-reserved">link</span><span class="hl-code"> </span><span class="hl-var">rel</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">STYLESHEET</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">text/css</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxtree.css</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxcommon.js</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxtree.js</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code"><div class="hl-main"><pre><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">setDesign</span><span class="hl-brackets">(</span><span class="hl-identifier">n</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
|
||||
</span><span class="hl-reserved">switch</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-identifier">n</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
|
||||
</span><span class="hl-reserved">case</span><span class="hl-code"> </span><span class="hl-number">4</span><span class="hl-code">:
|
||||
;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">enableTreeLines</span><span class="hl-brackets">(</span><span class="hl-reserved">true</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setImageArrays</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">plus</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">plus2.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">plus3.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">plus4.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">plus.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">plus5.gif</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setImageArrays</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">minus</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">minus2.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">minus3.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">minus4.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">minus.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">minus5.gif</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setStdImages</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">book.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">books_open.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">books_close.gif</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-reserved">break</span><span class="hl-code">;
|
||||
</span><span class="hl-reserved">break</span><span class="hl-code">;
|
||||
</span><span class="hl-reserved">case</span><span class="hl-code"> </span><span class="hl-number">3</span><span class="hl-code">:
|
||||
;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">enableTreeLines</span><span class="hl-brackets">(</span><span class="hl-reserved">true</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setImageArrays</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">plus</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">open2.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">open2.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">open2.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">open2.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">open2.gif</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setImageArrays</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">minus</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">close2.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">close2.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">close2.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">close2.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">close2.gif</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setStdImages</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">leaf.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">folderOpen.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">folderClosed.gif</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-reserved">break</span><span class="hl-code">;
|
||||
</span><span class="hl-reserved">case</span><span class="hl-code"> </span><span class="hl-number">2</span><span class="hl-code">:
|
||||
;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">enableTreeLines</span><span class="hl-brackets">(</span><span class="hl-reserved">true</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setImageArrays</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">plus</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">open2.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">open2.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">open2.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">open2.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">open2.gif</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setImageArrays</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">minus</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">close2.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">close2.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">close2.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">close2.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">close2.gif</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setStdImages</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">book.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">books_open.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">books_close.gif</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-reserved">break</span><span class="hl-code">;
|
||||
</span><span class="hl-reserved">case</span><span class="hl-code"> </span><span class="hl-number">1</span><span class="hl-code">:
|
||||
;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">enableTreeLines</span><span class="hl-brackets">(</span><span class="hl-reserved">false</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setImageArrays</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">plus</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">plus_ar.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">plus_ar.gif</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setImageArrays</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">minus</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">minus_ar.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">minus_ar.gif</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setStdImages</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">book.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">books_open.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">books_close.gif</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-reserved">break</span><span class="hl-code">;
|
||||
</span><span class="hl-brackets">}</span><span class="hl-code">
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">refreshItem</span><span class="hl-brackets">(</span><span class="hl-number">0</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-brackets">}</span></pre></div></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">table</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-code"> </span><span class="hl-var">valign</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">top</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-code"> </span><span class="hl-var">rowspan</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">2</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">padding-left:25</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">valign</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">top</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0)</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onclick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">setDesign(1);</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">Set design 1</span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0)</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onclick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">setDesign(2);</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">Set design 2</span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0)</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onclick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">setDesign(3);</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">Set design 3</span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0)</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onclick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">setDesign(4);</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">Set design 4</span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">table</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code"><div class="hl-main"><pre><span class="hl-identifier">tree</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">dhtmlXTreeObject</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-number">0</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setSkin</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">dhx_skyblue</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setImagePath</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../common/images/</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">enableDragAndDrop</span><span class="hl-brackets">(</span><span class="hl-number">0</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">enableTreeLines</span><span class="hl-brackets">(</span><span class="hl-reserved">false</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setImageArrays</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">plus</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">plus.gif</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setImageArrays</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">minus</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">minus.gif</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setStdImages</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">book.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">books_open.gif</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">books_close.gif</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setXMLAutoLoading</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../common/tree4.xml</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">loadXML</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../common/tree4.xml</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;</span></pre></div></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span></pre></div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-logo"></div>
|
||||
<div class="copyright">Copyright © 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
155
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/01_appearance/10_tree_iconset.html
Executable file
155
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/01_appearance/10_tree_iconset.html
Executable file
@ -0,0 +1,155 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<title>Changing iconsets</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="title" content="Samples" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="../common/css/style.css" type="text/css" media="screen" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<a class="logo" href="http://www.dhtmlx.com" title="DHTMLX homepage"></a>
|
||||
<div class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</div>
|
||||
<div class="search-field">
|
||||
<form action="http://docs.dhtmlx.com/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="doc_inact" href="../../../docsExplorer/index.html" title="DHTMLX Documentation homepage"></a>
|
||||
<a class="sample"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="navigation-div">
|
||||
<a href="../../../docsExplorer/samples.html" class="navigation"><img src="../common/icons/file.gif" alt="" >All components</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="../index.html" class="navigation"><img height="22" src="../common/icons/tree.gif" alt="" >dhtmlxTree</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="./index.html" class="navigation"><img src="../common/icons/none.gif" alt="" >Appearance</a>
|
||||
</div>
|
||||
<div style="display:block;">
|
||||
<h3>Changing iconsets</h3>
|
||||
</div>
|
||||
<div class="navigation-div">
|
||||
<a href="#code" class="navigation view-source"><img src="../common/icons/source.gif" alt="" >View page source</a>
|
||||
</div>
|
||||
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">
|
||||
<script src="../../codebase/dhtmlxcommon.js"></script>
|
||||
<script src="../../codebase/dhtmlxtree.js"></script>
|
||||
|
||||
|
||||
|
||||
<p>dhtmlxTree is highly customizable JavaScript tree menu. You can use different iconsets for trees by changing images path.</p>
|
||||
|
||||
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<td valign="top">
|
||||
<div id="treeboxbox_tree0" style="width:250px; height:218px;border :1px solid Silver;"></div><br>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
<div id="treeboxbox_tree1" style="width:250px; height:218px;border :1px solid Silver;"></div><br>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div id="treeboxbox_tree2" style="width:250px; height:218px;border :1px solid Silver;; overflow:auto;"></div><br>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
tree=new dhtmlXTreeObject("treeboxbox_tree0","100%","100%",0);
|
||||
|
||||
tree.setSkin('dhx_skyblue');
|
||||
tree.setImagePath("../../codebase/imgs/");
|
||||
tree.loadXML("../common/tree_b.xml");
|
||||
|
||||
tree=new dhtmlXTreeObject("treeboxbox_tree1","100%","100%",0);
|
||||
|
||||
|
||||
tree.setSkin('dhx_skyblue');
|
||||
tree.setImagePath("../../codebase/imgs/csh_scbrblue/");
|
||||
tree.loadXML("../common/tree_a.xml");
|
||||
|
||||
tree=new dhtmlXTreeObject("treeboxbox_tree2","100%","100%",0);
|
||||
|
||||
|
||||
tree.setSkin('dhx_skyblue');
|
||||
tree.setImagePath("../../codebase/imgs/csh_yellowbooks/");
|
||||
tree.loadXML("../common/tree_b.xml");
|
||||
</script>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="source">
|
||||
<div class="teg">Source</div>
|
||||
<div class="code" id="code">
|
||||
<div class="hl-main"><pre><span class="hl-brackets"><</span><span class="hl-reserved">link</span><span class="hl-code"> </span><span class="hl-var">rel</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">STYLESHEET</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">text/css</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxtree.css</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxcommon.js</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxtree.js</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
|
||||
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">table</span><span class="hl-code"> </span><span class="hl-var">width</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-code"> </span><span class="hl-var">valign</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">top</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree0</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">width:250px; height:218px;border :1px solid Silver;</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-special">&nbsp;</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-code"> </span><span class="hl-var">valign</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">top</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree1</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">width:250px; height:218px;border :1px solid Silver;</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-special">&nbsp;</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree2</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">width:250px; height:218px;border :1px solid Silver;; overflow:auto;</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">table</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code"><div class="hl-main"><pre><span class="hl-identifier">tree</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">dhtmlXTreeObject</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree0</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-number">0</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setSkin</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">dhx_skyblue</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setImagePath</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">loadXML</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../common/tree_b.xml</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">dhtmlXTreeObject</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree1</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-number">0</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setSkin</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">dhx_skyblue</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setImagePath</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/csh_scbrblue/</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">loadXML</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../common/tree_a.xml</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">dhtmlXTreeObject</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree2</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-number">0</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setSkin</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">dhx_skyblue</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setImagePath</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/csh_yellowbooks/</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">loadXML</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../common/tree_b.xml</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;</span></pre></div></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span></pre></div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-logo"></div>
|
||||
<div class="copyright">Copyright © 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
184
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/01_appearance/11_tree_text_image.html
Executable file
184
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/01_appearance/11_tree_text_image.html
Executable file
@ -0,0 +1,184 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<title>Dynamical icon/text/style changing</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="title" content="Samples" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="../common/css/style.css" type="text/css" media="screen" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<a class="logo" href="http://www.dhtmlx.com" title="DHTMLX homepage"></a>
|
||||
<div class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</div>
|
||||
<div class="search-field">
|
||||
<form action="http://docs.dhtmlx.com/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="doc_inact" href="../../../docsExplorer/index.html" title="DHTMLX Documentation homepage"></a>
|
||||
<a class="sample"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="navigation-div">
|
||||
<a href="../../../docsExplorer/samples.html" class="navigation"><img src="../common/icons/file.gif" alt="" >All components</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="../index.html" class="navigation"><img height="22" src="../common/icons/tree.gif" alt="" >dhtmlxTree</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="./index.html" class="navigation"><img src="../common/icons/none.gif" alt="" >Appearance</a>
|
||||
</div>
|
||||
<div style="display:block;">
|
||||
<h3>Dynamical icon/text/style changing</h3>
|
||||
</div>
|
||||
<div class="navigation-div">
|
||||
<a href="#code" class="navigation view-source"><img src="../common/icons/source.gif" alt="" >View page source</a>
|
||||
</div>
|
||||
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">
|
||||
<script src="../../codebase/dhtmlxcommon.js"></script>
|
||||
<script src="../../codebase/dhtmlxtree.js"></script>
|
||||
|
||||
|
||||
<p>You can customize this JavaScript tree to look just the way you want.
|
||||
Select a tree item you want to edit then click on image or color to make appropriate changes.
|
||||
To change tree item's text, you should type new text in the box and click "Set new item label".</p>
|
||||
|
||||
<script>
|
||||
function setColor(color1,color2)
|
||||
{
|
||||
tree.setItemColor(tree.getSelectedItemId(),color1,color2);
|
||||
}
|
||||
</script>
|
||||
<table>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
<div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;"></div>
|
||||
</td>
|
||||
<td rowspan="2" style="padding-left:25" valign="top">
|
||||
|
||||
|
||||
<a href="javascript:void(0);" onClick="var d=new Date(); tree.setItemText(tree.getSelectedItemId(),document.getElementById('ed1').value);">Set new item label</a> <input type="text" value="New label" id="ed1"><br><br>
|
||||
|
||||
To change item's image - click on one of next images:
|
||||
<table>
|
||||
<tr><td>
|
||||
<a href="javascript:void(0);" onClick="tree.setItemImage2(tree.getSelectedItemId(),'tombs.gif','tombs.gif','tombs.gif');"><img src="../../codebase/imgs/csh_yellowbooks/tombs.gif" border="0"></a></td>
|
||||
<td><a href="javascript:void(0);" onClick="tree.setItemImage2(tree.getSelectedItemId(),'tombs_open.gif','tombs_open.gif','tombs_open.gif');"><img src="../../codebase/imgs/csh_yellowbooks/tombs_open.gif" border="0"></a></td>
|
||||
<td><a href="javascript:void(0);" onClick="tree.setItemImage2(tree.getSelectedItemId(),'leaf.gif','leaf.gif','leaf.gif');"><img src="../../codebase/imgs/csh_yellowbooks/leaf.gif" border="0"></a></td>
|
||||
<td><a href="javascript:void(0);" onClick="tree.setItemImage2(tree.getSelectedItemId(),'leaf2.gif','leaf2.gif','leaf2.gif');"><img src="../../codebase/imgs/csh_yellowbooks/leaf2.gif" border="0"></a></td>
|
||||
|
||||
</td></tr>
|
||||
<tr><td nowrap>
|
||||
<a href="javascript:void(0);" onClick="tree.setItemImage2(tree.getSelectedItemId(),'iconText.gif','iconText.gif','iconText.gif');"><img src="../../codebase/imgs/csh_yellowbooks/iconText.gif" border="0"></a></td>
|
||||
<td><a href="javascript:void(0);" onClick="tree.setItemImage2(tree.getSelectedItemId(),'folderOpen.gif','folderOpen.gif','folderOpen.gif');"><img src="../../codebase/imgs/csh_yellowbooks/folderOpen.gif" border="0"></a></td>
|
||||
<td><a href="javascript:void(0);" onClick="tree.setItemImage2(tree.getSelectedItemId(),'folderClosed.gif','folderClosed.gif','folderClosed.gif');"><img src="../../codebase/imgs/csh_yellowbooks/folderClosed.gif" border="0"></a></td>
|
||||
<td><a href="javascript:void(0);" onClick="tree.setItemImage2(tree.getSelectedItemId(),'leaf3.gif','leaf3.gif','leaf3.gif');"><img src="../../codebase/imgs/csh_yellowbooks/leaf3.gif" border="0"></a></td>
|
||||
</td></tr>
|
||||
</table>
|
||||
<br>
|
||||
To change item's color - click on one of next colors:
|
||||
<table>
|
||||
<tr>
|
||||
<td><div style="cursor:pointer; width:20px; height:20px; background-color:#ff0000;" onClick="setColor('#ff0000','#ff0000')"> </div></td>
|
||||
<td><div style="cursor:pointer;width:20px; height:20px; background-color:#ffa500;" onClick="setColor('#ffa500','#ffa500')"> </div></td>
|
||||
<td><div style="cursor:pointer;width:20px; height:20px; background-color:#ffff00;" onClick="setColor('#ffff00','#ffff00')"> </div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div style="cursor:pointer;width:20px; height:20px; background-color:#008000;" onClick="setColor('#008000','#adff2f')"> </div></td>
|
||||
<td><div style="cursor:pointer; width:20px; height:20px; background-color:#00ff7f;" onClick="setColor('#00ff7f','#adff2f')"> </div></td>
|
||||
<td><div style="cursor:pointer; width:20px; height:20px; background-color:#adff2f;" onClick="setColor('#adff2f')"> </div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div style="cursor:pointer; width:20px; height:20px; background-color:#0000ff;" onClick="setColor('#0000ff','#87ceeb')"> </div></td>
|
||||
<td><div style="cursor:pointer; width:20px; height:20px; background-color:#9932cc;" onClick="setColor('#9932cc','#9932cc')"> </div></td>
|
||||
<td><div style="cursor:pointer; width:20px; height:20px; background-color:#87ceeb;" onClick="setColor('#87ceeb','#87ceeb')"> </div></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
|
||||
<script>
|
||||
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
|
||||
|
||||
tree.setSkin('dhx_skyblue');
|
||||
tree.setImagePath("../../codebase/imgs/csh_yellowbooks/");
|
||||
tree.loadXML("../common/tree.xml");
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="source">
|
||||
<div class="teg">Source</div>
|
||||
<div class="code" id="code">
|
||||
<div class="hl-main"><pre><span class="hl-brackets"><</span><span class="hl-reserved">link</span><span class="hl-code"> </span><span class="hl-var">rel</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">STYLESHEET</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">text/css</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxtree.css</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxcommon.js</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxtree.js</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code"><div class="hl-main"><pre><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">setColor</span><span class="hl-brackets">(</span><span class="hl-identifier">color1</span><span class="hl-code">, </span><span class="hl-identifier">color2</span><span class="hl-brackets">)</span><span class="hl-code">; </span><span class="hl-brackets">{</span><span class="hl-code">
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setItemColor</span><span class="hl-brackets">(</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">getSelectedItemId</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code">, </span><span class="hl-identifier">color1</span><span class="hl-code">, </span><span class="hl-identifier">color2</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-brackets">}</span></pre></div></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">table</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-code"> </span><span class="hl-var">valign</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">top</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-code"> </span><span class="hl-var">rowspan</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">2</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">padding-left:25</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">valign</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">top</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">var d=new Date(); tree.setItemText(tree.getSelectedItemId(),document.getElementById('ed1').value);</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">Set new item label</span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-special">&nbsp;</span><span class="hl-brackets"><</span><span class="hl-reserved">input</span><span class="hl-code"> </span><span class="hl-var">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">text</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">value</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">New label</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">ed1</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
To change item's image - click on one of next images:
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">table</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">tree.setItemImage2(tree.getSelectedItemId(),'tombs.gif','tombs.gif','tombs.gif');</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">img</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/csh_yellowbooks/tombs.gif</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">border</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">0</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">tree.setItemImage2(tree.getSelectedItemId(),'tombs_open.gif','tombs_open.gif','tombs_open.gif');</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">img</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/csh_yellowbooks/tombs_open.gif</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">border</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">0</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">tree.setItemImage2(tree.getSelectedItemId(),'leaf.gif','leaf.gif','leaf.gif');</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">img</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/csh_yellowbooks/leaf.gif</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">border</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">0</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">tree.setItemImage2(tree.getSelectedItemId(),'leaf2.gif','leaf2.gif','leaf2.gif');</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">img</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/csh_yellowbooks/leaf2.gif</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">border</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">0</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-code"> </span><span class="hl-var">nowrap</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">tree.setItemImage2(tree.getSelectedItemId(),'iconText.gif','iconText.gif','iconText.gif');</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">img</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/csh_yellowbooks/iconText.gif</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">border</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">0</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">tree.setItemImage2(tree.getSelectedItemId(),'folderOpen.gif','folderOpen.gif','folderOpen.gif');</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">img</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/csh_yellowbooks/folderOpen.gif</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">border</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">0</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">tree.setItemImage2(tree.getSelectedItemId(),'folderClosed.gif','folderClosed.gif','folderClosed.gif');</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">img</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/csh_yellowbooks/folderClosed.gif</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">border</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">0</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">tree.setItemImage2(tree.getSelectedItemId(),'leaf3.gif','leaf3.gif','leaf3.gif');</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">img</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/csh_yellowbooks/leaf3.gif</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">border</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">0</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">table</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
To change item's color - click on one of next colors:
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">table</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">cursor:pointer; width:20px; height:20px; background-color:#ff0000;</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">setColor('#ff0000','#ff0000')</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-special">&nbsp;</span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">cursor:pointer;width:20px; height:20px; background-color:#ffa500;</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">setColor('#ffa500','#ffa500')</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-special">&nbsp;</span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">cursor:pointer;width:20px; height:20px; background-color:#ffff00;</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">setColor('#ffff00','#ffff00')</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-special">&nbsp;</span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">cursor:pointer;width:20px; height:20px; background-color:#008000;</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">setColor('#008000','#adff2f')</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-special">&nbsp;</span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">cursor:pointer; width:20px; height:20px; background-color:#00ff7f;</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">setColor('#00ff7f','#adff2f')</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-special">&nbsp;</span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">cursor:pointer; width:20px; height:20px; background-color:#adff2f;</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">setColor('#adff2f')</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-special">&nbsp;</span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">cursor:pointer; width:20px; height:20px; background-color:#0000ff;</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">setColor('#0000ff','#87ceeb')</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-special">&nbsp;</span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">cursor:pointer; width:20px; height:20px; background-color:#9932cc;</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">setColor('#9932cc','#9932cc')</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-special">&nbsp;</span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">cursor:pointer; width:20px; height:20px; background-color:#87ceeb;</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">setColor('#87ceeb','#87ceeb')</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-special">&nbsp;</span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">table</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">table</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code"><div class="hl-main"><pre><span class="hl-identifier">tree</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">dhtmlXTreeObject</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-number">0</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setSkin</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">dhx_skyblue</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setImagePath</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/csh_yellowbooks/</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">loadXML</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../common/tree.xml</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;</span></pre></div></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span></pre></div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-logo"></div>
|
||||
<div class="copyright">Copyright © 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
45
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/01_appearance/index.html
Executable file
45
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/01_appearance/index.html
Executable file
@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<title>Appearance</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="title" content="Samples" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="../common/css/style.css" type="text/css" media="screen" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<a class="logo" href="http://www.dhtmlx.com" title="DHTMLX homepage"></a>
|
||||
<div class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</div>
|
||||
<div class="search-field">
|
||||
<form action="http://docs.dhtmlx.com/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="doc_inact" href="../../../docsExplorer/index.html" title="DHTMLX Documentation homepage"></a>
|
||||
<a class="sample"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="navigation-div">
|
||||
<a href="../../../docsExplorer/samples.html" class="navigation"><img src="../common/icons/file.gif" alt="" border=0 >All components</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="../index.html" class="navigation"><img src="../common/icons/tree.gif" alt="" border=0 >dhtmlxTree</a>
|
||||
</div>
|
||||
<div style="display:block;">
|
||||
<h3>Appearance</h3>
|
||||
</div>
|
||||
<ul class="topics samples">
|
||||
<li><a href='./09_tree_design.html'>Easy skinable design</a></li><li><a href='./10_tree_iconset.html'>Changing iconsets</a></li><li><a href='./11_tree_text_image.html'>Dynamical icon/text/style changing</a></li>
|
||||
<!--<li><a href="#">Calendar eXcell</a></li>-->
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-logo"></div>
|
||||
<div class="copyright">Copyright © 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
159
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/02_checkboxes/05_tree_checkboxes.html
Executable file
159
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/02_checkboxes/05_tree_checkboxes.html
Executable file
@ -0,0 +1,159 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<title>Checkboxes</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="title" content="Samples" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="../common/css/style.css" type="text/css" media="screen" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<a class="logo" href="http://www.dhtmlx.com" title="DHTMLX homepage"></a>
|
||||
<div class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</div>
|
||||
<div class="search-field">
|
||||
<form action="http://docs.dhtmlx.com/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="doc_inact" href="../../../docsExplorer/index.html" title="DHTMLX Documentation homepage"></a>
|
||||
<a class="sample"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="navigation-div">
|
||||
<a href="../../../docsExplorer/samples.html" class="navigation"><img src="../common/icons/file.gif" alt="" >All components</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="../index.html" class="navigation"><img height="22" src="../common/icons/tree.gif" alt="" >dhtmlxTree</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="./index.html" class="navigation"><img src="../common/icons/none.gif" alt="" >Checkboxes</a>
|
||||
</div>
|
||||
<div style="display:block;">
|
||||
<h3>Checkboxes</h3>
|
||||
</div>
|
||||
<div class="navigation-div">
|
||||
<a href="#code" class="navigation view-source"><img src="../common/icons/source.gif" alt="" >View page source</a>
|
||||
</div>
|
||||
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">
|
||||
|
||||
<script src="../../codebase/dhtmlxcommon.js"></script>
|
||||
<script src="../../codebase/dhtmlxtree.js"></script>
|
||||
|
||||
|
||||
<p>This JavaScript tree has checkbox system in order to use this component as a navigation bar
|
||||
with selection lists. Besides usual two-state checkboxes (checked item, unchecked item),
|
||||
there is a possibility to use three state checkboxes with "partly-checked" value (some sub-items are checked). To test any of these functionalities you should select an item in a tree and then click on an appropriate action link.</p>
|
||||
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
<div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;"></div>
|
||||
</td>
|
||||
<td style="padding-left:25" valign="top">
|
||||
|
||||
Two state checkboxes<br><br>
|
||||
<a href="javascript:void(0);" onClick="tree.setCheck(tree.getSelectedItemId(),true);">Check item</a><br><br>
|
||||
<a href="javascript:void(0);" onClick="tree.setCheck(tree.getSelectedItemId(),false);">UnCheck item</a><br><br>
|
||||
<a href="javascript:void(0);" onClick="tree.setSubChecked(tree.getSelectedItemId(),true);">Check branch</a><br><br>
|
||||
<a href="javascript:void(0);" onClick="tree.setSubChecked(tree.getSelectedItemId(),false);">UnCheck branch</a><br><br>
|
||||
|
||||
<a href="javascript:void(0);" onClick="alert(tree.getAllChecked());">Get list of checked</a><br><br>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
<div id="treeboxbox_tree2" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div>
|
||||
</td>
|
||||
<td style="padding-left:25" valign="top">
|
||||
Three state checkboxes<br>
|
||||
<br>
|
||||
|
||||
<a href="javascript:void(0);" onClick="tree2.setCheck(tree2.getSelectedItemId(),true);">Check item</a><br><br>
|
||||
<a href="javascript:void(0);" onClick="tree2.setCheck(tree2.getSelectedItemId(),false);">UnCheck item</a><br><br>
|
||||
|
||||
<a href="javascript:void(0);" onClick="alert(tree2.getAllChecked());">Get list of checked</a><br><br>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<script>
|
||||
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
|
||||
|
||||
tree.setSkin('dhx_skyblue');
|
||||
tree.setImagePath("../../codebase/imgs/csh_bluebooks/");
|
||||
tree.enableCheckBoxes(1);
|
||||
tree.loadXML("../common/tree3.xml");
|
||||
|
||||
tree2=new dhtmlXTreeObject("treeboxbox_tree2","100%","100%",0);
|
||||
|
||||
|
||||
tree2.setSkin('dhx_skyblue');
|
||||
tree2.setImagePath("../../codebase/imgs/csh_bluebooks/");
|
||||
tree2.enableCheckBoxes(1);
|
||||
tree2.enableThreeStateCheckboxes(true);
|
||||
tree2.loadXML("../common/tree3.xml");
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="source">
|
||||
<div class="teg">Source</div>
|
||||
<div class="code" id="code">
|
||||
<div class="hl-main"><pre><span class="hl-brackets"><</span><span class="hl-reserved">link</span><span class="hl-code"> </span><span class="hl-var">rel</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">STYLESHEET</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">text/css</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxtree.css</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxcommon.js</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxtree.js</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">table</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-code"> </span><span class="hl-var">valign</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">top</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">padding-left:25</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">valign</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">top</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
Two state checkboxes</span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">tree.setCheck(tree.getSelectedItemId(),true);</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">Check item</span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">tree.setCheck(tree.getSelectedItemId(),false);</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">UnCheck item</span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">tree.setSubChecked(tree.getSelectedItemId(),true);</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">Check branch</span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">tree.setSubChecked(tree.getSelectedItemId(),false);</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">UnCheck branch</span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">alert(tree.getAllChecked());</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">Get list of checked</span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-code"> </span><span class="hl-var">valign</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">top</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree2</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">padding-left:25</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">valign</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">top</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
Three state checkboxes</span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">tree2.setCheck(tree2.getSelectedItemId(),true);</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">Check item</span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">tree2.setCheck(tree2.getSelectedItemId(),false);</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">UnCheck item</span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">alert(tree2.getAllChecked());</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">Get list of checked</span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">table</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code"><div class="hl-main"><pre><span class="hl-identifier">tree</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">dhtmlXTreeObject</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-number">0</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setSkin</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">dhx_skyblue</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setImagePath</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/csh_bluebooks/</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">enableCheckBoxes</span><span class="hl-brackets">(</span><span class="hl-number">1</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">loadXML</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../common/tree3.xml</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree2</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">dhtmlXTreeObject</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree2</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-number">0</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
|
||||
</span><span class="hl-identifier">tree2</span><span class="hl-code">.</span><span class="hl-identifier">setSkin</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">dhx_skyblue</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree2</span><span class="hl-code">.</span><span class="hl-identifier">setImagePath</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/csh_bluebooks/</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree2</span><span class="hl-code">.</span><span class="hl-identifier">enableCheckBoxes</span><span class="hl-brackets">(</span><span class="hl-number">1</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree2</span><span class="hl-code">.</span><span class="hl-identifier">enableThreeStateCheckboxes</span><span class="hl-brackets">(</span><span class="hl-reserved">true</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree2</span><span class="hl-code">.</span><span class="hl-identifier">loadXML</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../common/tree3.xml</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;</span></pre></div></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span></pre></div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-logo"></div>
|
||||
<div class="copyright">Copyright © 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
45
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/02_checkboxes/index.html
Executable file
45
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/02_checkboxes/index.html
Executable file
@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<title>Checkboxes</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="title" content="Samples" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="../common/css/style.css" type="text/css" media="screen" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<a class="logo" href="http://www.dhtmlx.com" title="DHTMLX homepage"></a>
|
||||
<div class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</div>
|
||||
<div class="search-field">
|
||||
<form action="http://docs.dhtmlx.com/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="doc_inact" href="../../../docsExplorer/index.html" title="DHTMLX Documentation homepage"></a>
|
||||
<a class="sample"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="navigation-div">
|
||||
<a href="../../../docsExplorer/samples.html" class="navigation"><img src="../common/icons/file.gif" alt="" border=0 >All components</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="../index.html" class="navigation"><img src="../common/icons/tree.gif" alt="" border=0 >dhtmlxTree</a>
|
||||
</div>
|
||||
<div style="display:block;">
|
||||
<h3>Checkboxes</h3>
|
||||
</div>
|
||||
<ul class="topics samples">
|
||||
<li><a href='./05_tree_checkboxes.html'>Checkboxes</a></li>
|
||||
<!--<li><a href="#">Calendar eXcell</a></li>-->
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-logo"></div>
|
||||
<div class="copyright">Copyright © 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
139
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/05_drag_n_drop/12_tree_drag.html
Executable file
139
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/05_drag_n_drop/12_tree_drag.html
Executable file
@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<title>Drag and Drop</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="title" content="Samples" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="../common/css/style.css" type="text/css" media="screen" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<a class="logo" href="http://www.dhtmlx.com" title="DHTMLX homepage"></a>
|
||||
<div class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</div>
|
||||
<div class="search-field">
|
||||
<form action="http://docs.dhtmlx.com/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="doc_inact" href="../../../docsExplorer/index.html" title="DHTMLX Documentation homepage"></a>
|
||||
<a class="sample"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="navigation-div">
|
||||
<a href="../../../docsExplorer/samples.html" class="navigation"><img src="../common/icons/file.gif" alt="" >All components</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="../index.html" class="navigation"><img height="22" src="../common/icons/tree.gif" alt="" >dhtmlxTree</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="./index.html" class="navigation"><img src="../common/icons/none.gif" alt="" >Drag-n-drop</a>
|
||||
</div>
|
||||
<div style="display:block;">
|
||||
<h3>Drag and Drop</h3>
|
||||
</div>
|
||||
<div class="navigation-div">
|
||||
<a href="#code" class="navigation view-source"><img src="../common/icons/source.gif" alt="" >View page source</a>
|
||||
</div>
|
||||
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">
|
||||
|
||||
<script src="../../codebase/dhtmlxcommon.js"></script>
|
||||
<script src="../../codebase/dhtmlxtree.js"></script>
|
||||
|
||||
|
||||
<p>This JavaScript tree menu has extended drag-and-drop functionality
|
||||
(within one tree, between trees, between frames). Drop-as-sibling behavior makes
|
||||
it easy to reorder nodes in a tree view.
|
||||
You can easily edit the tree by dragging nodes within one tree or between trees or even to another object.</p>
|
||||
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
|
||||
<div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;overflow:hidden"></div><br>
|
||||
|
||||
|
||||
</td>
|
||||
<td style="padding-left:25px" valign="top">
|
||||
|
||||
<div id="treeboxbox_tree2" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;overflow:hidden"></div><br>
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
<p> Drag-and-Drop works in each tree and between trees too. </p>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
|
||||
|
||||
|
||||
tree.setSkin('dhx_skyblue');
|
||||
tree.setImagePath("../../codebase/imgs/csh_yellowbooks/");
|
||||
tree.enableDragAndDrop(true);
|
||||
tree.loadXML("../common/tree_05_drag_n_drop.xml");
|
||||
|
||||
|
||||
tree2=new dhtmlXTreeObject("treeboxbox_tree2","100%","100%",0);
|
||||
|
||||
|
||||
|
||||
tree2.setSkin('dhx_skyblue');
|
||||
tree2.setImagePath("../../codebase/imgs/csh_yellowbooks/");
|
||||
tree2.enableDragAndDrop(true);
|
||||
tree2.loadXML("../common/tree_05_drag_n_drop.xml");
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="source">
|
||||
<div class="teg">Source</div>
|
||||
<div class="code" id="code">
|
||||
<div class="hl-main"><pre><span class="hl-brackets"><</span><span class="hl-reserved">link</span><span class="hl-code"> </span><span class="hl-var">rel</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">STYLESHEET</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">text/css</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxtree.css</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxcommon.js</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxtree.js</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">table</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-code"> </span><span class="hl-var">valign</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">top</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;overflow:hidden</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">padding-left:25px</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">valign</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">top</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree2</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;overflow:hidden</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">table</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code"><div class="hl-main"><pre><span class="hl-identifier">tree</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">dhtmlXTreeObject</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-number">0</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setSkin</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">dhx_skyblue</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setImagePath</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/csh_yellowbooks/</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">enableDragAndDrop</span><span class="hl-brackets">(</span><span class="hl-reserved">true</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">loadXML</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../common/tree_05_drag_n_drop.xml</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
|
||||
</span><span class="hl-identifier">tree2</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">dhtmlXTreeObject</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree2</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-number">0</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
|
||||
</span><span class="hl-identifier">tree2</span><span class="hl-code">.</span><span class="hl-identifier">setSkin</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">dhx_skyblue</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree2</span><span class="hl-code">.</span><span class="hl-identifier">setImagePath</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/csh_yellowbooks/</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree2</span><span class="hl-code">.</span><span class="hl-identifier">enableDragAndDrop</span><span class="hl-brackets">(</span><span class="hl-reserved">true</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree2</span><span class="hl-code">.</span><span class="hl-identifier">loadXML</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../common/tree_05_drag_n_drop.xml</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;</span></pre></div></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span></pre></div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-logo"></div>
|
||||
<div class="copyright">Copyright © 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,38 @@
|
||||
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||||
|
||||
<html>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<link rel="STYLESHEET" type="text/css" href="../../../codebase/dhtmlxtree.css">
|
||||
|
||||
<script src="../../../codebase/dhtmlxcommon.js"></script>
|
||||
<script src="../../../codebase/dhtmlxtree.js"></script>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<div id="treeboxbox_tree" style="width:260; height:260;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"/>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
<iframe frameborder="2" name="frm71" id="frm71" src="pro_drag_frame_f2.html" width="300" height="300" style="border:3px outset red;"></iframe>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<script>
|
||||
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
|
||||
tree.setSkin("dhx_skyblue")
|
||||
tree.setImagePath("../../../codebase/imgs/csh_bluefolders/");
|
||||
tree.enableDragAndDrop(true);
|
||||
tree.loadXML("../../common/tree_a.xml")
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,78 @@
|
||||
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||||
|
||||
<html>
|
||||
|
||||
|
||||
<body onload="onLoad()">
|
||||
|
||||
<link rel="STYLESHEET" type="text/css" href="../../../codebase/dhtmlxtree.css">
|
||||
|
||||
<script src="../../../codebase/dhtmlxcommon.js"></script>
|
||||
|
||||
<style>
|
||||
div.alfa{
|
||||
margin-top:10px;
|
||||
margin-left:50px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
var dragger;
|
||||
var dropper;
|
||||
function onLoad(){
|
||||
dragger=new dhtmlDragAndDropObject();
|
||||
dropper=new dragImageInTree();
|
||||
|
||||
var zone=document.getElementById("dragZone");
|
||||
zone.onmousedown= dropper._preventNsDrag;
|
||||
zone.onselectstart=new Function("return false;");
|
||||
|
||||
for (var i=1; i<5; i++){
|
||||
var item=document.getElementById("a"+i);
|
||||
dragger.addDraggableItem(item,dropper);
|
||||
item.dragLanding=null;
|
||||
//item.onmousedown=dropper._preventNsDrag;
|
||||
item.ondragstart=dropper._preventNsDrag;
|
||||
item.parentObject=new Object;
|
||||
item.parentObject.img=item;
|
||||
item.parentObject.treeNod=dropper;
|
||||
}
|
||||
|
||||
}
|
||||
function dragImageInTree(){
|
||||
|
||||
this.lWin=window;
|
||||
this._createDragNode=function(node){ // alert(1);
|
||||
var dragSpan=document.createElement('div');
|
||||
dragSpan.style.position="absolute";
|
||||
dragSpan.innerHTML="<img src=\""+node.getAttribute("src")+"\">";
|
||||
dragSpan.style.zIndex=12;
|
||||
return dragSpan;
|
||||
};
|
||||
this._preventNsDrag=function(e){
|
||||
(e||window.event).cancelBubble=true;
|
||||
if ((e)&&(e.preventDefault)) { e.preventDefault(); return false; }
|
||||
return false;
|
||||
}
|
||||
this._nonTrivialNode=function(tree,item,bitem,source){
|
||||
var image=source.img.getAttribute("src2");
|
||||
if (bitem)
|
||||
tree.insertNewNext(bitem.id,"new_ID",image,"",image,image,image);
|
||||
else
|
||||
tree.insertNewItem(item.id,"new_ID",image,"",image,image,image);
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<br><br>
|
||||
<div id="dragZone" style=" position:relative; top:0; ">
|
||||
<div id="a1" class="alfa" src2="close2.gif" src="<img src="../../../codebase/imgs/csh_bluebooks/close2.gif" style="background-image:url(../../../codebase/imgs/2_bluebooks/close2.gif); width:40px; height:40px;"> </div>
|
||||
<div id="a2" class="alfa" src2="item.gif" src="../../../codebase/imgs/csh_bluebooks/item.gif" style="background-image:url(../../../codebase/imgs/2_bluebooks/item.gif); width:40px; height:40px; "> </div>
|
||||
<div id="a3" class="alfa" src2="item2.gif" src="../../../codebase/imgs/csh_bluebooks/item2.gif" style="background-image:url(../../../codebase/imgs/2_bluebooks/item2.gif); width:40px; height:40px;"> </div>
|
||||
<div id="a4" class="alfa" src2="tombs.gif" src="../../../codebase/imgs/csh_bluebooks/tombs.gif" style="background-image:url(../../../codebase/imgs/2_bluebooks/tombs.gif); width:40px; height:40px;"> </div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,16 @@
|
||||
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||||
|
||||
<html>
|
||||
|
||||
<body>
|
||||
|
||||
<script src="../../../codebase/dhtmlxcommon.js"></script>
|
||||
<script>
|
||||
new dhtmlDragAndDropObject();
|
||||
</script>
|
||||
<h1>Drag and Drop between frames</h1>
|
||||
<p>Frame without tree</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,34 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||||
|
||||
<html>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<link rel="STYLESHEET" type="text/css" href="../../../codebase/dhtmlxtree.css">
|
||||
|
||||
<script src="../../../codebase/dhtmlxcommon.js"></script>
|
||||
<script src="../../../codebase/dhtmlxtree.js"></script>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<div id="treeboxbox_tree" style="width:260px; height:260px;background-color:#f5f5f5;border :1px solid Silver;"/>
|
||||
</td>
|
||||
<td valign="top">
|
||||
<iframe frameborder="2" name="frm71" id="frm71" src="pro_drag_frame_f2.html" width="300" height="300" style="border:3px outset red;"></iframe>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<script>
|
||||
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
|
||||
tree.setSkin("dhx_skyblue")
|
||||
tree.setImagePath("../../../codebase/imgs/csh_yellowbooks/");
|
||||
tree.enableDragAndDrop(true);
|
||||
tree.loadXML("../../common/tree_05_drag_n_drop.xml")
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,27 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||||
|
||||
<html>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<link rel="STYLESHEET" type="text/css" href="../../../codebase/dhtmlxtree.css">
|
||||
|
||||
<script src="../../../codebase/dhtmlxcommon.js"></script>
|
||||
<script src="../../../codebase/dhtmlxtree.js"></script>
|
||||
|
||||
<div id="treeboxbox_tree" style="width:260px; height:260px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"/>
|
||||
|
||||
|
||||
<script>
|
||||
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
|
||||
tree.setSkin("dhx_skyblue")
|
||||
tree.setImagePath("../../../codebase/imgs/csh_bluebooks/");
|
||||
tree.enableDragAndDrop(true);
|
||||
tree.loadXML("../../common/tree_05_drag_n_drop.xml")
|
||||
|
||||
</script>
|
||||
<br><br>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||||
|
||||
<html>
|
||||
|
||||
<style>
|
||||
|
||||
.{font-family:arial;font-size:12px}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<script src="../../../codebase/dhtmlxcommon.js"></script>
|
||||
<script>
|
||||
new dhtmlDragAndDropObject();
|
||||
</script>
|
||||
<p>Frame without tree</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
45
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/05_drag_n_drop/index.html
Executable file
45
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/05_drag_n_drop/index.html
Executable file
@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<title>Drag-n-drop</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="title" content="Samples" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="../common/css/style.css" type="text/css" media="screen" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<a class="logo" href="http://www.dhtmlx.com" title="DHTMLX homepage"></a>
|
||||
<div class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</div>
|
||||
<div class="search-field">
|
||||
<form action="http://docs.dhtmlx.com/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="doc_inact" href="../../../docsExplorer/index.html" title="DHTMLX Documentation homepage"></a>
|
||||
<a class="sample"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="navigation-div">
|
||||
<a href="../../../docsExplorer/samples.html" class="navigation"><img src="../common/icons/file.gif" alt="" border=0 >All components</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="../index.html" class="navigation"><img src="../common/icons/tree.gif" alt="" border=0 >dhtmlxTree</a>
|
||||
</div>
|
||||
<div style="display:block;">
|
||||
<h3>Drag-n-drop</h3>
|
||||
</div>
|
||||
<ul class="topics samples">
|
||||
<li><a href='./12_tree_drag.html'>Drag and Drop</a></li>
|
||||
<!--<li><a href="#">Calendar eXcell</a></li>-->
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-logo"></div>
|
||||
<div class="copyright">Copyright © 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
198
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/07_events/03_tree_events.html
Executable file
198
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/07_events/03_tree_events.html
Executable file
@ -0,0 +1,198 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<title>Event handlers</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="title" content="Samples" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="../common/css/style.css" type="text/css" media="screen" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<a class="logo" href="http://www.dhtmlx.com" title="DHTMLX homepage"></a>
|
||||
<div class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</div>
|
||||
<div class="search-field">
|
||||
<form action="http://docs.dhtmlx.com/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="doc_inact" href="../../../docsExplorer/index.html" title="DHTMLX Documentation homepage"></a>
|
||||
<a class="sample"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="navigation-div">
|
||||
<a href="../../../docsExplorer/samples.html" class="navigation"><img src="../common/icons/file.gif" alt="" >All components</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="../index.html" class="navigation"><img height="22" src="../common/icons/tree.gif" alt="" >dhtmlxTree</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="./index.html" class="navigation"><img src="../common/icons/none.gif" alt="" >Events</a>
|
||||
</div>
|
||||
<div style="display:block;">
|
||||
<h3>Event handlers</h3>
|
||||
</div>
|
||||
<div class="navigation-div">
|
||||
<a href="#code" class="navigation view-source"><img src="../common/icons/source.gif" alt="" >View page source</a>
|
||||
</div>
|
||||
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">
|
||||
|
||||
<script src="../../codebase/dhtmlxcommon.js"></script>
|
||||
<script src="../../codebase/dhtmlxtree.js"></script>
|
||||
|
||||
<p>This JavaScript tree example illustrates the ability to assign user-defined functions to different
|
||||
event handlers (e.g. <em>Mouse Over, Mouse Out, Check, UnCheck, Select, Deselect</em>). If you try to change
|
||||
a checkbox value, an alert box will appear. Alert box is displayed also when a tree node is selected.
|
||||
Confirm box will pop up if user opens or closes a node.<br>
|
||||
So, dhtmlxTree allows you to define any functions and attach them to event handlers in order to customize
|
||||
tree behavior. That enriches possibilities for user interaction with JavaScript tree interface.</p>
|
||||
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver; "/>
|
||||
</td>
|
||||
<td rowspan="2" style="padding-left:25" valign="top">
|
||||
<div id="logarea" style="background-color:lightgrey;height:218px;width:400px; padding:3px; overflow:auto;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<li>Selected node ID will be passed to function specified as argument for setDefaultAction(funcObj)</li>
|
||||
<li>Dropped node ID and new parent node ID will be passed to function specified as argument for setDragFunction(funcObj)</li>
|
||||
<li>node ID will be passed to the function specified as argument for setOpenAction(aFunc)</li>
|
||||
<li>node ID will be passed to the function specified as argument for setDblClickAction(aFunc)</li>
|
||||
<script>
|
||||
function doLog(str){
|
||||
|
||||
var log = document.getElementById("logarea");
|
||||
log.innerHTML = log.innerHTML+str+"<br/>"
|
||||
log.scrollTop = log.scrollHeight;
|
||||
}
|
||||
|
||||
function tonclick(id){
|
||||
|
||||
doLog("Item "+tree.getItemText(id)+" was selected");
|
||||
|
||||
};
|
||||
function tondblclick(id){
|
||||
|
||||
doLog("Item "+tree.getItemText(id)+" was doubleclicked");
|
||||
|
||||
};
|
||||
function tondrag(id,id2){
|
||||
|
||||
return confirm("Do you want to move node "+tree.getItemText(id)+" to item "+tree.getItemText(id2)+"?");
|
||||
|
||||
};
|
||||
function tonopen(id,mode){
|
||||
|
||||
return confirm("Do you want to "+(mode>0?"close":"open")+" node "+tree.getItemText(id)+"?");
|
||||
|
||||
};
|
||||
function toncheck(id,state){
|
||||
|
||||
doLog("Item "+tree.getItemText(id)+" was " +((state)?"checked":"unchecked"));
|
||||
|
||||
};
|
||||
|
||||
|
||||
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
|
||||
|
||||
|
||||
|
||||
tree.setSkin('dhx_skyblue');
|
||||
tree.setImagePath("../../codebase/imgs/csh_bluebooks/");
|
||||
tree.enableCheckBoxes(1);
|
||||
tree.enableDragAndDrop(1);
|
||||
tree.setOnOpenHandler(tonopen);
|
||||
|
||||
tree.attachEvent("onOpenEnd",function(nodeId, event){doLog("An id of open item is "+nodeId);});
|
||||
tree.setOnClickHandler(tonclick);
|
||||
tree.setOnCheckHandler(toncheck);
|
||||
tree.setOnDblClickHandler(tondblclick);
|
||||
tree.setDragHandler(tondrag);
|
||||
|
||||
tree.loadXML("../common/tree3.xml");
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="source">
|
||||
<div class="teg">Source</div>
|
||||
<div class="code" id="code">
|
||||
<div class="hl-main"><pre><span class="hl-brackets"><</span><span class="hl-reserved">link</span><span class="hl-code"> </span><span class="hl-var">rel</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">STYLESHEET</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">text/css</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxtree.css</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxcommon.js</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxtree.js</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">table</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver; </span><span class="hl-quotes">"</span><span class="hl-brackets">/></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-code"> </span><span class="hl-var">rowspan</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">2</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">padding-left:25</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">valign</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">top</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">logarea</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">background-color:lightgrey;height:218px;width:400px; padding:3px; overflow:auto;</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-special">&nbsp;</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">table</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">Selected node ID will be passed to function specified as argument for setDefaultAction(funcObj)</span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">Dropped node ID and new parent node ID will be passed to function specified as argument for setDragFunction(funcObj)</span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">node ID will be passed to the function specified as argument for setOpenAction(aFunc)</span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">node ID will be passed to the function specified as argument for setDblClickAction(aFunc)</span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code"><div class="hl-main"><pre><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">doLog</span><span class="hl-brackets">(</span><span class="hl-identifier">str</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
|
||||
</span><span class="hl-reserved">var</span><span class="hl-code"> </span><span class="hl-identifier">log</span><span class="hl-code"> = </span><span class="hl-builtin">document</span><span class="hl-code">.</span><span class="hl-identifier">getElementById</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">logarea</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">log</span><span class="hl-code">.</span><span class="hl-identifier">innerHTML</span><span class="hl-code"> = </span><span class="hl-identifier">log</span><span class="hl-code">.</span><span class="hl-identifier">innerHTML</span><span class="hl-code"> + </span><span class="hl-identifier">str</span><span class="hl-code"> + </span><span class="hl-quotes">"</span><span class="hl-string"><br/></span><span class="hl-quotes">"</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">log</span><span class="hl-code">.</span><span class="hl-identifier">scrollTop</span><span class="hl-code"> = </span><span class="hl-identifier">log</span><span class="hl-code">.</span><span class="hl-identifier">scrollHeight</span><span class="hl-code">;
|
||||
</span><span class="hl-brackets">}</span><span class="hl-code">
|
||||
</span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">tonclick</span><span class="hl-brackets">(</span><span class="hl-identifier">id</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
|
||||
</span><span class="hl-identifier">doLog</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">Item </span><span class="hl-quotes">"</span><span class="hl-code"> + </span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">getItemText</span><span class="hl-brackets">(</span><span class="hl-identifier">id</span><span class="hl-brackets">)</span><span class="hl-code"> + </span><span class="hl-quotes">"</span><span class="hl-string"> was selected</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-brackets">}</span><span class="hl-code">;
|
||||
</span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">tondblclick</span><span class="hl-brackets">(</span><span class="hl-identifier">id</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
|
||||
</span><span class="hl-identifier">doLog</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">Item </span><span class="hl-quotes">"</span><span class="hl-code"> + </span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">getItemText</span><span class="hl-brackets">(</span><span class="hl-identifier">id</span><span class="hl-brackets">)</span><span class="hl-code"> + </span><span class="hl-quotes">"</span><span class="hl-string"> was doubleclicked</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-brackets">}</span><span class="hl-code">;
|
||||
</span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">tondrag</span><span class="hl-brackets">(</span><span class="hl-identifier">id</span><span class="hl-code">, </span><span class="hl-identifier">id2</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
|
||||
</span><span class="hl-reserved">return</span><span class="hl-code"> </span><span class="hl-identifier">confirm</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">Do you want to move node </span><span class="hl-quotes">"</span><span class="hl-code"> + </span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">getItemText</span><span class="hl-brackets">(</span><span class="hl-identifier">id</span><span class="hl-brackets">)</span><span class="hl-code"> + </span><span class="hl-quotes">"</span><span class="hl-string"> to item </span><span class="hl-quotes">"</span><span class="hl-code"> + </span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">getItemText</span><span class="hl-brackets">(</span><span class="hl-identifier">id2</span><span class="hl-brackets">)</span><span class="hl-code"> + </span><span class="hl-quotes">"</span><span class="hl-string">?</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-brackets">}</span><span class="hl-code">;
|
||||
</span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">tonopen</span><span class="hl-brackets">(</span><span class="hl-identifier">id</span><span class="hl-code">, </span><span class="hl-identifier">mode</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
|
||||
</span><span class="hl-reserved">return</span><span class="hl-code"> </span><span class="hl-identifier">confirm</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">Do you want to </span><span class="hl-quotes">"</span><span class="hl-code"> + </span><span class="hl-brackets">(</span><span class="hl-identifier">mode</span><span class="hl-code"> > </span><span class="hl-number">0</span><span class="hl-code"> ? </span><span class="hl-quotes">"</span><span class="hl-string">close</span><span class="hl-quotes">"</span><span class="hl-code">: </span><span class="hl-quotes">"</span><span class="hl-string">open</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code"> + </span><span class="hl-quotes">"</span><span class="hl-string"> node </span><span class="hl-quotes">"</span><span class="hl-code"> + </span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">getItemText</span><span class="hl-brackets">(</span><span class="hl-identifier">id</span><span class="hl-brackets">)</span><span class="hl-code"> + </span><span class="hl-quotes">"</span><span class="hl-string">?</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-brackets">}</span><span class="hl-code">;
|
||||
</span><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">toncheck</span><span class="hl-brackets">(</span><span class="hl-identifier">id</span><span class="hl-code">, </span><span class="hl-identifier">state</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
|
||||
</span><span class="hl-identifier">doLog</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">Item </span><span class="hl-quotes">"</span><span class="hl-code"> + </span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">getItemText</span><span class="hl-brackets">(</span><span class="hl-identifier">id</span><span class="hl-brackets">)</span><span class="hl-code"> + </span><span class="hl-quotes">"</span><span class="hl-string"> was </span><span class="hl-quotes">"</span><span class="hl-code"> + </span><span class="hl-brackets">(</span><span class="hl-brackets">(</span><span class="hl-identifier">state</span><span class="hl-brackets">)</span><span class="hl-code"> ? </span><span class="hl-quotes">"</span><span class="hl-string">checked</span><span class="hl-quotes">"</span><span class="hl-code">: </span><span class="hl-quotes">"</span><span class="hl-string">unchecked</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-brackets">}</span><span class="hl-code">;
|
||||
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">dhtmlXTreeObject</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-number">0</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setSkin</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">dhx_skyblue</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setImagePath</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/csh_bluebooks/</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">enableCheckBoxes</span><span class="hl-brackets">(</span><span class="hl-number">1</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">enableDragAndDrop</span><span class="hl-brackets">(</span><span class="hl-number">1</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setOnOpenHandler</span><span class="hl-brackets">(</span><span class="hl-identifier">tonopen</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">attachEvent</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">onOpenEnd</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-reserved">function</span><span class="hl-brackets">(</span><span class="hl-identifier">nodeId</span><span class="hl-code">, </span><span class="hl-identifier">event</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
|
||||
</span><span class="hl-identifier">doLog</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">An id of open item is </span><span class="hl-quotes">"</span><span class="hl-code"> + </span><span class="hl-identifier">nodeId</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-brackets">}</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setOnClickHandler</span><span class="hl-brackets">(</span><span class="hl-identifier">tonclick</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setOnCheckHandler</span><span class="hl-brackets">(</span><span class="hl-identifier">toncheck</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setOnDblClickHandler</span><span class="hl-brackets">(</span><span class="hl-identifier">tondblclick</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setDragHandler</span><span class="hl-brackets">(</span><span class="hl-identifier">tondrag</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">loadXML</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../common/tree3.xml</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;</span></pre></div></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span></pre></div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-logo"></div>
|
||||
<div class="copyright">Copyright © 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
45
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/07_events/index.html
Executable file
45
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/07_events/index.html
Executable file
@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<title>Events</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="title" content="Samples" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="../common/css/style.css" type="text/css" media="screen" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<a class="logo" href="http://www.dhtmlx.com" title="DHTMLX homepage"></a>
|
||||
<div class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</div>
|
||||
<div class="search-field">
|
||||
<form action="http://docs.dhtmlx.com/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="doc_inact" href="../../../docsExplorer/index.html" title="DHTMLX Documentation homepage"></a>
|
||||
<a class="sample"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="navigation-div">
|
||||
<a href="../../../docsExplorer/samples.html" class="navigation"><img src="../common/icons/file.gif" alt="" border=0 >All components</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="../index.html" class="navigation"><img src="../common/icons/tree.gif" alt="" border=0 >dhtmlxTree</a>
|
||||
</div>
|
||||
<div style="display:block;">
|
||||
<h3>Events</h3>
|
||||
</div>
|
||||
<ul class="topics samples">
|
||||
<li><a href='./03_tree_events.html'>Event handlers</a></li>
|
||||
<!--<li><a href="#">Calendar eXcell</a></li>-->
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-logo"></div>
|
||||
<div class="copyright">Copyright © 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,237 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<title>Initialize from HTML</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="featured" content="yes"><meta name="title" content="Samples" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="../common/css/style.css" type="text/css" media="screen" />
|
||||
|
||||
</head>
|
||||
<body >
|
||||
<div class="header">
|
||||
<a class="logo" href="http://www.dhtmlx.com" title="DHTMLX homepage"></a>
|
||||
<div class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</div>
|
||||
<div class="search-field">
|
||||
<form action="http://docs.dhtmlx.com/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="doc_inact" href="../../../docsExplorer/index.html" title="DHTMLX Documentation homepage"></a>
|
||||
<a class="sample"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="navigation-div">
|
||||
<a href="../../../docsExplorer/samples.html" class="navigation"><img src="../common/icons/file.gif" alt="" >All components</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="../index.html" class="navigation"><img height="22" src="../common/icons/tree.gif" alt="" >dhtmlxTree</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="./index.html" class="navigation"><img src="../common/icons/none.gif" alt="" >Initialization, general settings</a>
|
||||
</div>
|
||||
<div style="display:block;">
|
||||
<h3>Initialize from HTML</h3>
|
||||
</div>
|
||||
<div class="navigation-div">
|
||||
<a href="#code" class="navigation view-source"><img src="../common/icons/source.gif" alt="" >View page source</a>
|
||||
</div>
|
||||
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">
|
||||
|
||||
<script src="../../codebase/dhtmlxcommon.js"></script>
|
||||
<script src="../../codebase/dhtmlxtree.js"></script>
|
||||
<script src="../../codebase/ext/dhtmlxtree_start.js"></script>
|
||||
<script>
|
||||
dhtmlx.skin = "dhx_skyblue"
|
||||
</script>
|
||||
|
||||
<p>
|
||||
To do automatic conversion:
|
||||
<ul>
|
||||
<li>Add <strong>dhtmlXTree_start.js</strong> file into the page</li>
|
||||
<li>Set <strong>class</strong> attribute of the top div element to <em>dhtmlxTree</em></li>
|
||||
<li>Set some attributes defining tree-specific properties of the top div element
|
||||
<ul>
|
||||
<li><strong>setImagePath</strong> - sets path to tree's image files</li>
|
||||
<li><strong>id</strong> - name of javascript variable referred to the tree object</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="h3">Initilize from list</div>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<div id="treeboxbox_tree" setImagePath="../../codebase/imgs/csh_bluebooks/" xclass="dhtmlxTree" style="width:250px; height:218px; background-color:#f5f5f5;border :1px solid Silver; ">
|
||||
<ul>
|
||||
<li>Root
|
||||
<ul>
|
||||
<li>Child1
|
||||
<ul>
|
||||
<li>Child 1-1</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Child2</li>
|
||||
<li><b>Bold</b> <i>Italic</i></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul></li>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div id="treeboxbox_tree" setImagePath="../../codebase/imgs/csh_bluebooks/" class="dhtmlxTree" style="width:250px; height:218px; background-color:#f5f5f5;border :1px solid Silver;">
|
||||
<ul>
|
||||
<li>Root
|
||||
<ul>
|
||||
<li>Child1
|
||||
<ul>
|
||||
<li>Child 1-1</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Child2</li>
|
||||
<li><b>Bold</b> <i>Italic</i></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul></li>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<!--- Start --->
|
||||
<div class="h3"><strong>Initialize from inline XML structure</strong></div>
|
||||
<div class="txt">It is possible to use standard dhtmlxTree XML structure enclosed in <strong>XMP</strong>
|
||||
tag inside div element which is a tree container.<br>
|
||||
<br>
|
||||
<div id="treeboxbox_tree2" setImagePath="../../codebase/imgs/" class="dhtmlxTree" style="width:250px; height:218px; background-color:#f5f5f5;border :1px solid Silver;;">
|
||||
<xmp container="true">
|
||||
<item text="Root" open="1" id="11">
|
||||
<item text="Child1" select="1" open="1" id="12">
|
||||
<item text="Child1-1" id="13"/>
|
||||
</item>
|
||||
<item text="Child2" id="14"/>
|
||||
<item id="15" text="Text"/>
|
||||
</item>
|
||||
</xmp>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!--- Start --->
|
||||
<div class="h3"><strong>Initialize from HTML using script command</strong></div>
|
||||
<div class="txt">It is possible to convert existing html structure calling an appropriate script command. To test it press the Confirm button.</div>
|
||||
<div id="listBox" setImagePath="../../codebase/imgs/" style="width:250px; height:218px; background-color:#f5f5f5;border :1px solid Silver;">
|
||||
<ul>
|
||||
<li>Root
|
||||
<ul>
|
||||
<li>Child1
|
||||
<ul>
|
||||
<li>Child 1-1</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Child2</li>
|
||||
<li><b>Bold</b> <i>Italic</i></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button onClick="var myTree = dhtmlXTreeFromHTML('listBox');">Convert</button>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="source">
|
||||
<div class="teg">Source</div>
|
||||
<div class="code" id="code">
|
||||
<div class="hl-main"><pre><span class="hl-brackets"><</span><span class="hl-reserved">link</span><span class="hl-code"> </span><span class="hl-var">rel</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">STYLESHEET</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">text/css</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxtree.css</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxcommon.js</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxtree.js</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/ext/dhtmlxtree_start.js</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code"><div class="hl-main"><pre><span class="hl-identifier">dhtmlx</span><span class="hl-code">.</span><span class="hl-identifier">skin</span><span class="hl-code"> = </span><span class="hl-quotes">"</span><span class="hl-string">dhx_skyblue</span><span class="hl-quotes">"</span><span class="hl-code">;</span></pre></div></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">class</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">h3</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">Initilize from list</span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">table</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">setImagePath</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/csh_bluebooks/</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">xclass</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">dhtmlxTree</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">width:250px; height:218px; background-color:#f5f5f5;border :1px solid Silver; </span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">ul</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">Root
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">ul</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">Child1
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">ul</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">Child 1-1</span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">ul</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">Child2</span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">b</span><span class="hl-brackets">></span><span class="hl-code">Bold</span><span class="hl-brackets"></</span><span class="hl-reserved">b</span><span class="hl-brackets">></span><span class="hl-code"> </span><span class="hl-brackets"><</span><span class="hl-reserved">i</span><span class="hl-brackets">></span><span class="hl-code">Italic</span><span class="hl-brackets"></</span><span class="hl-reserved">i</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">ul</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">ul</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">setImagePath</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/csh_bluebooks/</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">class</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">dhtmlxTree</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">width:250px; height:218px; background-color:#f5f5f5;border :1px solid Silver;</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">ul</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">Root
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">ul</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">Child1
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">ul</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">Child 1-1</span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">ul</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">Child2</span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">b</span><span class="hl-brackets">></span><span class="hl-code">Bold</span><span class="hl-brackets"></</span><span class="hl-reserved">b</span><span class="hl-brackets">></span><span class="hl-code"> </span><span class="hl-brackets"><</span><span class="hl-reserved">i</span><span class="hl-brackets">></span><span class="hl-code">Italic</span><span class="hl-brackets"></</span><span class="hl-reserved">i</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">ul</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">ul</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">table</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
</span><span class="hl-comment"><!--</span><span class="hl-comment">- Start -</span><span class="hl-comment">--></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">class</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">h3</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">strong</span><span class="hl-brackets">></span><span class="hl-code">Initialize from inline XML structure</span><span class="hl-brackets"></</span><span class="hl-reserved">strong</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">class</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">txt</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">It is possible to use standard dhtmlxTree XML structure enclosed in </span><span class="hl-brackets"><</span><span class="hl-reserved">strong</span><span class="hl-brackets">></span><span class="hl-code">XMP</span><span class="hl-brackets"></</span><span class="hl-reserved">strong</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
tag inside div element which is a tree container.</span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree2</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">setImagePath</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">class</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">dhtmlxTree</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">width:250px; height:218px; background-color:#f5f5f5;border :1px solid Silver;;</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">xmp</span><span class="hl-code"> </span><span class="hl-var">container</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">true</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">item</span><span class="hl-code"> </span><span class="hl-var">text</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">Root</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">open</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">1</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">11</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">item</span><span class="hl-code"> </span><span class="hl-var">text</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">Child1</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">select</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">1</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">open</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">1</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">12</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">item</span><span class="hl-code"> </span><span class="hl-var">text</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">Child1-1</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">13</span><span class="hl-quotes">"</span><span class="hl-brackets">/></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">item</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">item</span><span class="hl-code"> </span><span class="hl-var">text</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">Child2</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">14</span><span class="hl-quotes">"</span><span class="hl-brackets">/></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">item</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">15</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">text</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">Text</span><span class="hl-quotes">"</span><span class="hl-brackets">/></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">item</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">xmp</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
|
||||
</span><span class="hl-comment"><!--</span><span class="hl-comment">- Start -</span><span class="hl-comment">--></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">class</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">h3</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">strong</span><span class="hl-brackets">></span><span class="hl-code">Initialize from HTML using script command</span><span class="hl-brackets"></</span><span class="hl-reserved">strong</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">class</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">txt</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">It is possible to convert existing html structure calling an appropriate script command. To test it press the Confirm button.</span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">listBox</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">setImagePath</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">width:250px; height:218px; background-color:#f5f5f5;border :1px solid Silver;</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">ul</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">Root
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">ul</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">Child1
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">ul</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">Child 1-1</span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">ul</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">Child2</span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">b</span><span class="hl-brackets">></span><span class="hl-code">Bold</span><span class="hl-brackets"></</span><span class="hl-reserved">b</span><span class="hl-brackets">></span><span class="hl-code"> </span><span class="hl-brackets"><</span><span class="hl-reserved">i</span><span class="hl-brackets">></span><span class="hl-code">Italic</span><span class="hl-brackets"></</span><span class="hl-reserved">i</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">ul</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">ul</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">button</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">var myTree = dhtmlXTreeFromHTML('listBox');</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">Convert</span><span class="hl-brackets"></</span><span class="hl-reserved">button</span><span class="hl-brackets">></span></pre></div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-logo"></div>
|
||||
<div class="copyright">Copyright © 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<title>Initialization from xml</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="title" content="Samples" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="../common/css/style.css" type="text/css" media="screen" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<a class="logo" href="http://www.dhtmlx.com" title="DHTMLX homepage"></a>
|
||||
<div class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</div>
|
||||
<div class="search-field">
|
||||
<form action="http://docs.dhtmlx.com/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="doc_inact" href="../../../docsExplorer/index.html" title="DHTMLX Documentation homepage"></a>
|
||||
<a class="sample"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="navigation-div">
|
||||
<a href="../../../docsExplorer/samples.html" class="navigation"><img src="../common/icons/file.gif" alt="" >All components</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="../index.html" class="navigation"><img height="22" src="../common/icons/tree.gif" alt="" >dhtmlxTree</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="./index.html" class="navigation"><img src="../common/icons/none.gif" alt="" >Initialization, general settings</a>
|
||||
</div>
|
||||
<div style="display:block;">
|
||||
<h3>Initialization from xml</h3>
|
||||
</div>
|
||||
<div class="navigation-div">
|
||||
<a href="#code" class="navigation view-source"><img src="../common/icons/source.gif" alt="" >View page source</a>
|
||||
</div>
|
||||
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">
|
||||
|
||||
<script src="../../codebase/dhtmlxcommon.js"></script>
|
||||
<script src="../../codebase/dhtmlxtree.js"></script>
|
||||
|
||||
|
||||
<p>You can place this JavaScript tree menu anywhere on your web page, attaching the tree
|
||||
to any object.<br>
|
||||
Set up tree parameters to determine the appearance of the tree.
|
||||
Specify whether the tree items will be loaded dynamically from XML. dhtmlxTree uses
|
||||
AJAX for fast and flexible data loading.</p>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"/>
|
||||
</td>
|
||||
<td rowspan="2" style="padding-left:25" valign="top">
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
</tr>
|
||||
</table>
|
||||
<script>
|
||||
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
|
||||
|
||||
tree.setSkin('dhx_skyblue');
|
||||
tree.setImagePath("../../codebase/imgs/csh_bluebooks/");
|
||||
tree.loadXML("../common/tree3.xml");
|
||||
</script>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="source">
|
||||
<div class="teg">Source</div>
|
||||
<div class="code" id="code">
|
||||
<div class="hl-main"><pre><span class="hl-brackets"><</span><span class="hl-reserved">link</span><span class="hl-code"> </span><span class="hl-var">rel</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">STYLESHEET</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">text/css</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxtree.css</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxcommon.js</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxtree.js</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">table</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;</span><span class="hl-quotes">"</span><span class="hl-brackets">/></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-code"> </span><span class="hl-var">rowspan</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">2</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">padding-left:25</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">valign</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">top</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-special">&nbsp;</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">table</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code"><div class="hl-main"><pre><span class="hl-identifier">tree</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">dhtmlXTreeObject</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-number">0</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setSkin</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">dhx_skyblue</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setImagePath</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/csh_bluebooks/</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">loadXML</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../common/tree3.xml</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;</span></pre></div></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span></pre></div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-logo"></div>
|
||||
<div class="copyright">Copyright © 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,87 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<title>Object constructor</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="title" content="Samples" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="../common/css/style.css" type="text/css" media="screen" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<a class="logo" href="http://www.dhtmlx.com" title="DHTMLX homepage"></a>
|
||||
<div class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</div>
|
||||
<div class="search-field">
|
||||
<form action="http://docs.dhtmlx.com/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="doc_inact" href="../../../docsExplorer/index.html" title="DHTMLX Documentation homepage"></a>
|
||||
<a class="sample"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="navigation-div">
|
||||
<a href="../../../docsExplorer/samples.html" class="navigation"><img src="../common/icons/file.gif" alt="" >All components</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="../index.html" class="navigation"><img height="22" src="../common/icons/tree.gif" alt="" >dhtmlxTree</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="./index.html" class="navigation"><img src="../common/icons/none.gif" alt="" >Initialization, general settings</a>
|
||||
</div>
|
||||
<div style="display:block;">
|
||||
<h3>Object constructor</h3>
|
||||
</div>
|
||||
<div class="navigation-div">
|
||||
<a href="#code" class="navigation view-source"><img src="../common/icons/source.gif" alt="" >View page source</a>
|
||||
</div>
|
||||
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">
|
||||
|
||||
<script src="../../codebase/dhtmlxcommon.js"></script>
|
||||
<script src="../../codebase/dhtmlxtree.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"/>
|
||||
|
||||
|
||||
<script>
|
||||
tree=new dhtmlXTreeObject({
|
||||
skin:"dhx_skyblue",
|
||||
parent:"treeboxbox_tree",
|
||||
image_path:"../../codebase/imgs/csh_bluebooks/",
|
||||
checkbox:true,
|
||||
xml:"../common/tree3.xml"
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="source">
|
||||
<div class="teg">Source</div>
|
||||
<div class="code" id="code">
|
||||
<div class="hl-main"><pre><span class="hl-brackets"><</span><span class="hl-reserved">link</span><span class="hl-code"> </span><span class="hl-var">rel</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">STYLESHEET</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">text/css</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxtree.css</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxcommon.js</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxtree.js</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;</span><span class="hl-quotes">"</span><span class="hl-brackets">/></span><span class="hl-code">
|
||||
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code"><div class="hl-main"><pre><span class="hl-identifier">tree</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">dhtmlXTreeObject</span><span class="hl-brackets">(</span><span class="hl-brackets">{</span><span class="hl-code">
|
||||
</span><span class="hl-identifier">skin</span><span class="hl-code">: </span><span class="hl-quotes">"</span><span class="hl-string">dhx_skyblue</span><span class="hl-quotes">"</span><span class="hl-code">,
|
||||
</span><span class="hl-identifier">parent</span><span class="hl-code">: </span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree</span><span class="hl-quotes">"</span><span class="hl-code">,
|
||||
</span><span class="hl-identifier">image_path</span><span class="hl-code">: </span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/csh_bluebooks/</span><span class="hl-quotes">"</span><span class="hl-code">,
|
||||
</span><span class="hl-identifier">checkbox</span><span class="hl-code">: </span><span class="hl-reserved">true</span><span class="hl-code">,
|
||||
</span><span class="hl-identifier">xml</span><span class="hl-code">: </span><span class="hl-quotes">"</span><span class="hl-string">../common/tree3.xml</span><span class="hl-quotes">"</span><span class="hl-code">;
|
||||
</span><span class="hl-brackets">}</span><span class="hl-brackets">)</span><span class="hl-code">;</span></pre></div></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span></pre></div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-logo"></div>
|
||||
<div class="copyright">Copyright © 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<title>Initialization, general settings</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="title" content="Samples" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="../common/css/style.css" type="text/css" media="screen" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<a class="logo" href="http://www.dhtmlx.com" title="DHTMLX homepage"></a>
|
||||
<div class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</div>
|
||||
<div class="search-field">
|
||||
<form action="http://docs.dhtmlx.com/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="doc_inact" href="../../../docsExplorer/index.html" title="DHTMLX Documentation homepage"></a>
|
||||
<a class="sample"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="navigation-div">
|
||||
<a href="../../../docsExplorer/samples.html" class="navigation"><img src="../common/icons/file.gif" alt="" border=0 >All components</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="../index.html" class="navigation"><img src="../common/icons/tree.gif" alt="" border=0 >dhtmlxTree</a>
|
||||
</div>
|
||||
<div style="display:block;">
|
||||
<h3>Initialization, general settings</h3>
|
||||
</div>
|
||||
<ul class="topics samples">
|
||||
<li><a href='./02_tree_init_from_html.html'>Initialize from HTML</a></li><li><a href='./03_tree_init_xml.html'>Initialization from xml</a></li><li><a href='./04_tree_init_o_api.html'>Object constructor</a></li>
|
||||
<!--<li><a href="#">Calendar eXcell</a></li>-->
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-logo"></div>
|
||||
<div class="copyright">Copyright © 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,88 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<title>Autoloading from XML</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="featured" content="yes"><meta name="title" content="Samples" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="../common/css/style.css" type="text/css" media="screen" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<a class="logo" href="http://www.dhtmlx.com" title="DHTMLX homepage"></a>
|
||||
<div class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</div>
|
||||
<div class="search-field">
|
||||
<form action="http://docs.dhtmlx.com/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="doc_inact" href="../../../docsExplorer/index.html" title="DHTMLX Documentation homepage"></a>
|
||||
<a class="sample"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="navigation-div">
|
||||
<a href="../../../docsExplorer/samples.html" class="navigation"><img src="../common/icons/file.gif" alt="" >All components</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="../index.html" class="navigation"><img height="22" src="../common/icons/tree.gif" alt="" >dhtmlxTree</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="./index.html" class="navigation"><img src="../common/icons/none.gif" alt="" >Loading/Processing data</a>
|
||||
</div>
|
||||
<div style="display:block;">
|
||||
<h3>Autoloading from XML</h3>
|
||||
</div>
|
||||
<div class="navigation-div">
|
||||
<a href="#code" class="navigation view-source"><img src="../common/icons/source.gif" alt="" >View page source</a>
|
||||
</div>
|
||||
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">
|
||||
<script src="../../codebase/dhtmlxcommon.js"></script>
|
||||
<script src="../../codebase/dhtmlxtree.js"></script>
|
||||
|
||||
|
||||
<p>Advanced processing of XML allows this JavaScript tree menu to handle large amount of data.
|
||||
Dynamical items loading from XML stream enables you to create DHTML trees with unlimited
|
||||
number of nodes. You can load data asynchronously in dhtmlxTree as-needed (using AJAX)
|
||||
that increases overall performance of the tree. It means that the script specified in setXMLAutoLoading() method will be called when you click the tree to expand any of the parent nodes (which child nodes were not loaded). The script will get the id of the node to open, and return the XML with description of the child items.</p>
|
||||
|
||||
<div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div>
|
||||
<br>
|
||||
|
||||
|
||||
<script>
|
||||
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
|
||||
|
||||
tree.setSkin('dhx_skyblue');
|
||||
tree.setImagePath("../../codebase/imgs/csh_bluebooks/");
|
||||
tree.setXMLAutoLoading("php/xml.php");
|
||||
tree.loadXML("php/xml.php?id=0");
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="source">
|
||||
<div class="teg">Source</div>
|
||||
<div class="code" id="code">
|
||||
<div class="hl-main"><pre><span class="hl-brackets"><</span><span class="hl-reserved">link</span><span class="hl-code"> </span><span class="hl-var">rel</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">STYLESHEET</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">text/css</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxtree.css</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxcommon.js</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxtree.js</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code"><div class="hl-main"><pre><span class="hl-identifier">tree</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">dhtmlXTreeObject</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-number">0</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setSkin</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">dhx_skyblue</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setImagePath</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/csh_bluebooks/</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setXMLAutoLoading</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">php/xml.php</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">loadXML</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">php/xml.php?id=0</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;</span></pre></div></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span></pre></div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-logo"></div>
|
||||
<div class="copyright">Copyright © 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<title>Loading/Processing data</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="title" content="Samples" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="../common/css/style.css" type="text/css" media="screen" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<a class="logo" href="http://www.dhtmlx.com" title="DHTMLX homepage"></a>
|
||||
<div class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</div>
|
||||
<div class="search-field">
|
||||
<form action="http://docs.dhtmlx.com/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="doc_inact" href="../../../docsExplorer/index.html" title="DHTMLX Documentation homepage"></a>
|
||||
<a class="sample"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="navigation-div">
|
||||
<a href="../../../docsExplorer/samples.html" class="navigation"><img src="../common/icons/file.gif" alt="" border=0 >All components</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="../index.html" class="navigation"><img src="../common/icons/tree.gif" alt="" border=0 >dhtmlxTree</a>
|
||||
</div>
|
||||
<div style="display:block;">
|
||||
<h3>Loading/Processing data</h3>
|
||||
</div>
|
||||
<ul class="topics samples">
|
||||
<li><a href='./13_tree_dyn_loading.html'>Autoloading from XML</a></li>
|
||||
<!--<li><a href="#">Calendar eXcell</a></li>-->
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-logo"></div>
|
||||
<div class="copyright">Copyright © 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,15 @@
|
||||
<?php
|
||||
error_reporting(E_ALL ^ E_NOTICE);
|
||||
|
||||
header("Content-type:text/xml");
|
||||
$data=explode(",","5,10,20,30,50,80,100,200,500,1000");
|
||||
echo '<?xml version="1.0" ?><tree id="0">';
|
||||
|
||||
for ($i=0; $i<sizeof($data); $i++){
|
||||
echo "<item id='arra_".$data[$i]."' text='arra ".$data[$i]."'>";
|
||||
for ($j=0; $j<$data[$i]; $j++)
|
||||
echo "<item id='arra_".$i."_".$j."' text='arra ".$i." ".$j."'></item>";
|
||||
echo "</item>";
|
||||
}
|
||||
echo '</tree>';
|
||||
?>
|
||||
@ -0,0 +1,13 @@
|
||||
<?php
|
||||
error_reporting(E_ALL ^ E_NOTICE);
|
||||
|
||||
header("Content-type:text/xml"); print("<?xml version=\"1.0\"?>");
|
||||
if (isset($_GET["id"]))
|
||||
$url_var=$_GET["id"];
|
||||
else
|
||||
$url_var=0;
|
||||
print("<tree id='".$url_var."'>");
|
||||
for ($inta=0; $inta<4; $inta++)
|
||||
print("<item child='1' id='".$url_var."_".$inta."' text='Item ".$url_var."-".$inta."'><userdata name='ud_block'>ud_data</userdata></item>");
|
||||
print("</tree>");
|
||||
?>
|
||||
@ -0,0 +1,170 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<title>Add / Delete items</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="title" content="Samples" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="../common/css/style.css" type="text/css" media="screen" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<a class="logo" href="http://www.dhtmlx.com" title="DHTMLX homepage"></a>
|
||||
<div class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</div>
|
||||
<div class="search-field">
|
||||
<form action="http://docs.dhtmlx.com/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="doc_inact" href="../../../docsExplorer/index.html" title="DHTMLX Documentation homepage"></a>
|
||||
<a class="sample"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="navigation-div">
|
||||
<a href="../../../docsExplorer/samples.html" class="navigation"><img src="../common/icons/file.gif" alt="" >All components</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="../index.html" class="navigation"><img height="22" src="../common/icons/tree.gif" alt="" >dhtmlxTree</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="./index.html" class="navigation"><img src="../common/icons/none.gif" alt="" >Nodes manipulations</a>
|
||||
</div>
|
||||
<div style="display:block;">
|
||||
<h3>Add / Delete items</h3>
|
||||
</div>
|
||||
<div class="navigation-div">
|
||||
<a href="#code" class="navigation view-source"><img src="../common/icons/source.gif" alt="" >View page source</a>
|
||||
</div>
|
||||
<p>You can freely customize a tree view. This sample illustrates that the tree items can be easily
|
||||
added/deleted dynamically through the graphical user interface.
|
||||
You can insert new sibling or child node as well.
|
||||
This feature allows you to configure a DHTML tree menu effortlessly.</p>
|
||||
|
||||
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">
|
||||
<script src="../../codebase/dhtmlxcommon.js"></script>
|
||||
<script src="../../codebase/dhtmlxtree.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
function fixImage(id){
|
||||
switch(tree.getLevel(id)){
|
||||
case 1:
|
||||
tree.setItemImage2(id,'folderClosed.gif','folderOpen.gif','folderClosed.gif');
|
||||
break;
|
||||
case 2:
|
||||
tree.setItemImage2(id,'folderClosed.gif','folderOpen.gif','folderClosed.gif');
|
||||
break;
|
||||
case 3:
|
||||
tree.setItemImage2(id,'folderClosed.gif','folderOpen.gif','folderClosed.gif');
|
||||
break;
|
||||
default:
|
||||
tree.setItemImage2(id,'leaf.gif','folderClosed.gif','folderOpen.gif');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<table>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
|
||||
|
||||
<div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div>
|
||||
</td>
|
||||
<td rowspan="2" style="padding-left:25" valign="top">
|
||||
|
||||
|
||||
<a href="javascript:void(0);" onClick="var d=new Date(); tree.insertNewItem(tree.getSelectedItemId(),d.valueOf(),document.getElementById('ed1').value,0,0,0,0,'SELECT'); fixImage(d.valueOf());">Insert new child item</a> Item label <input type="text" value="New item" id="ed1"><br><br>
|
||||
|
||||
<a href="javascript:void(0);" onClick="var d=new Date(); tree.insertNewNext(tree.getSelectedItemId(),d.valueOf(),document.getElementById('ed2').value,0,0,0,0,'SELECT'); fixImage(d.valueOf());">Insert new item next</a> Item label <input type="text" value="New item" id="ed2"><br><br>
|
||||
|
||||
<a href="javascript:void(0);" onClick="tree.deleteItem(tree.getSelectedItemId(),true);">Delete item</a><br><br>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
<li>zeros passed to the function for arguments 4-7 (function to call on select, images) mean the usage of default values for them</li>
|
||||
<li>Last argument is a comma delimited string of the following possible value (upper case only):</li>
|
||||
<li type="circle">SELECT - move selection to this node after inserting</li>
|
||||
<li type="circle">CALL - call function on select</li>
|
||||
<li type="circle">TOP - add node to the top position </li>
|
||||
<li type="circle">CHILD - node has child items</li>
|
||||
<li type="circle">CHECKED - checkbox is checked (if exists)</li>
|
||||
<script>
|
||||
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
|
||||
|
||||
tree.setSkin('dhx_skyblue');
|
||||
tree.setImagePath("../../codebase/imgs/csh_bluebooks/");
|
||||
tree.loadXML("../common/tree3.xml");
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="source">
|
||||
<div class="teg">Source</div>
|
||||
<div class="code" id="code">
|
||||
<div class="hl-main"><pre><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">link</span><span class="hl-code"> </span><span class="hl-var">rel</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">STYLESHEET</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">text/css</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxtree.css</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxcommon.js</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxtree.js</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code"><div class="hl-main"><pre><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">fixImage</span><span class="hl-brackets">(</span><span class="hl-identifier">id</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
|
||||
</span><span class="hl-reserved">switch</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">getLevel</span><span class="hl-brackets">(</span><span class="hl-identifier">id</span><span class="hl-brackets">)</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
|
||||
</span><span class="hl-reserved">case</span><span class="hl-code"> </span><span class="hl-number">1</span><span class="hl-code">:
|
||||
;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setItemImage2</span><span class="hl-brackets">(</span><span class="hl-identifier">id</span><span class="hl-code">, </span><span class="hl-quotes">'</span><span class="hl-string">folderClosed.gif</span><span class="hl-quotes">'</span><span class="hl-code">, </span><span class="hl-quotes">'</span><span class="hl-string">folderOpen.gif</span><span class="hl-quotes">'</span><span class="hl-code">, </span><span class="hl-quotes">'</span><span class="hl-string">folderClosed.gif</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-reserved">break</span><span class="hl-code">;
|
||||
</span><span class="hl-reserved">case</span><span class="hl-code"> </span><span class="hl-number">2</span><span class="hl-code">:
|
||||
;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setItemImage2</span><span class="hl-brackets">(</span><span class="hl-identifier">id</span><span class="hl-code">, </span><span class="hl-quotes">'</span><span class="hl-string">folderClosed.gif</span><span class="hl-quotes">'</span><span class="hl-code">, </span><span class="hl-quotes">'</span><span class="hl-string">folderOpen.gif</span><span class="hl-quotes">'</span><span class="hl-code">, </span><span class="hl-quotes">'</span><span class="hl-string">folderClosed.gif</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-reserved">break</span><span class="hl-code">;
|
||||
</span><span class="hl-reserved">case</span><span class="hl-code"> </span><span class="hl-number">3</span><span class="hl-code">:
|
||||
;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setItemImage2</span><span class="hl-brackets">(</span><span class="hl-identifier">id</span><span class="hl-code">, </span><span class="hl-quotes">'</span><span class="hl-string">folderClosed.gif</span><span class="hl-quotes">'</span><span class="hl-code">, </span><span class="hl-quotes">'</span><span class="hl-string">folderOpen.gif</span><span class="hl-quotes">'</span><span class="hl-code">, </span><span class="hl-quotes">'</span><span class="hl-string">folderClosed.gif</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-reserved">break</span><span class="hl-code">;
|
||||
</span><span class="hl-reserved">default</span><span class="hl-code">:
|
||||
;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setItemImage2</span><span class="hl-brackets">(</span><span class="hl-identifier">id</span><span class="hl-code">, </span><span class="hl-quotes">'</span><span class="hl-string">leaf.gif</span><span class="hl-quotes">'</span><span class="hl-code">, </span><span class="hl-quotes">'</span><span class="hl-string">folderClosed.gif</span><span class="hl-quotes">'</span><span class="hl-code">, </span><span class="hl-quotes">'</span><span class="hl-string">folderOpen.gif</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-reserved">break</span><span class="hl-code">;
|
||||
</span><span class="hl-brackets">}</span><span class="hl-code">
|
||||
</span><span class="hl-brackets">}</span></pre></div></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">table</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-code"> </span><span class="hl-var">valign</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">top</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-code"> </span><span class="hl-var">rowspan</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">2</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">padding-left:25</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">valign</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">top</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">var d=new Date(); tree.insertNewItem(tree.getSelectedItemId(),d.valueOf(),document.getElementById('ed1').value,0,0,0,0,'SELECT'); fixImage(d.valueOf());</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">Insert new child item</span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-code"> Item label </span><span class="hl-brackets"><</span><span class="hl-reserved">input</span><span class="hl-code"> </span><span class="hl-var">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">text</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">value</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">New item</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">ed1</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">var d=new Date(); tree.insertNewNext(tree.getSelectedItemId(),d.valueOf(),document.getElementById('ed2').value,0,0,0,0,'SELECT'); fixImage(d.valueOf());</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">Insert new item next</span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-code"> Item label </span><span class="hl-brackets"><</span><span class="hl-reserved">input</span><span class="hl-code"> </span><span class="hl-var">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">text</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">value</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">New item</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">ed2</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">tree.deleteItem(tree.getSelectedItemId(),true);</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">Delete item</span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">table</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">zeros passed to the function for arguments 4-7 (function to call on select, images) mean the usage of default values for them</span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">Last argument is a comma delimited string of the following possible value (upper case only):</span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-code"> </span><span class="hl-var">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">circle</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">SELECT - move selection to this node after inserting</span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-code"> </span><span class="hl-var">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">circle</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">CALL - call function on select</span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-code"> </span><span class="hl-var">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">circle</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">TOP - add node to the top position </span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-code"> </span><span class="hl-var">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">circle</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">CHILD - node has child items</span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">li</span><span class="hl-code"> </span><span class="hl-var">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">circle</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">CHECKED - checkbox is checked (if exists)</span><span class="hl-brackets"></</span><span class="hl-reserved">li</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code"><div class="hl-main"><pre><span class="hl-identifier">tree</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">dhtmlXTreeObject</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-number">0</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setSkin</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">dhx_skyblue</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setImagePath</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/csh_bluebooks/</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">loadXML</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../common/tree3.xml</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;</span></pre></div></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span></pre></div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-logo"></div>
|
||||
<div class="copyright">Copyright © 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,135 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<title>Collapse/Expand nodes</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="title" content="Samples" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="../common/css/style.css" type="text/css" media="screen" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<a class="logo" href="http://www.dhtmlx.com" title="DHTMLX homepage"></a>
|
||||
<div class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</div>
|
||||
<div class="search-field">
|
||||
<form action="http://docs.dhtmlx.com/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="doc_inact" href="../../../docsExplorer/index.html" title="DHTMLX Documentation homepage"></a>
|
||||
<a class="sample"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="navigation-div">
|
||||
<a href="../../../docsExplorer/samples.html" class="navigation"><img src="../common/icons/file.gif" alt="" >All components</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="../index.html" class="navigation"><img height="22" src="../common/icons/tree.gif" alt="" >dhtmlxTree</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="./index.html" class="navigation"><img src="../common/icons/none.gif" alt="" >Nodes manipulations</a>
|
||||
</div>
|
||||
<div style="display:block;">
|
||||
<h3>Collapse/Expand nodes</h3>
|
||||
</div>
|
||||
<div class="navigation-div">
|
||||
<a href="#code" class="navigation view-source"><img src="../common/icons/source.gif" alt="" >View page source</a>
|
||||
</div>
|
||||
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">
|
||||
<script src="../../codebase/dhtmlxcommon.js"></script>
|
||||
<script src="../../codebase/dhtmlxtree.js"></script>
|
||||
|
||||
<p>You can easily collapse/expand any node, branch or the entire tree.</p>
|
||||
|
||||
<script>
|
||||
function closeAllRoots(){
|
||||
var rootsAr = tree.getSubItems(0).split(",")
|
||||
for(var i=0;i<rootsAr.length;i++){
|
||||
tree.closeAllItems(rootsAr[i])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<table>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
|
||||
|
||||
<div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div>
|
||||
</td>
|
||||
<td rowspan="2" style="padding-left:25" valign="top">
|
||||
|
||||
|
||||
<a href="javascript:void(0);" onClick="tree.openAllItems(0);">Expand all</a><br><br>
|
||||
<a href="javascript:void(0);" onClick="tree.closeAllItems(0);">Collapse all</a><br><br>
|
||||
<a href="javascript:void(0);" onClick="tree.closeItem(tree.getSelectedItemId());">Close selected item</a><br><br>
|
||||
<a href="javascript:void(0);" onClick="tree.openItem(tree.getSelectedItemId());">Open selected item</a><br><br>
|
||||
<a href="javascript:void(0);" onClick="tree.closeAllItems(tree.getSelectedItemId());">Collapse selected branch</a><br><br>
|
||||
<a href="javascript:void(0);" onClick="tree.openAllItems(tree.getSelectedItemId());">Expand selected branch</a><br><br>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
|
||||
|
||||
tree.setSkin('dhx_skyblue');
|
||||
tree.setImagePath("../../codebase/imgs/csh_bluebooks/");
|
||||
tree.loadXML("../common/tree3.xml");
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="source">
|
||||
<div class="teg">Source</div>
|
||||
<div class="code" id="code">
|
||||
<div class="hl-main"><pre><span class="hl-brackets"><</span><span class="hl-reserved">link</span><span class="hl-code"> </span><span class="hl-var">rel</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">STYLESHEET</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">text/css</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxtree.css</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxcommon.js</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/dhtmlxtree.js</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code"><div class="hl-main"><pre><span class="hl-reserved">function</span><span class="hl-code"> </span><span class="hl-identifier">closeAllRoots</span><span class="hl-brackets">(</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
|
||||
</span><span class="hl-reserved">var</span><span class="hl-code"> </span><span class="hl-identifier">rootsAr</span><span class="hl-code"> = </span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">getSubItems</span><span class="hl-brackets">(</span><span class="hl-number">0</span><span class="hl-brackets">)</span><span class="hl-code">.</span><span class="hl-identifier">split</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">,</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-reserved">for</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-reserved">var</span><span class="hl-code"> </span><span class="hl-identifier">i</span><span class="hl-code"> = </span><span class="hl-number">0</span><span class="hl-code">; </span><span class="hl-identifier">i</span><span class="hl-code"> < </span><span class="hl-identifier">rootsAr</span><span class="hl-code">.</span><span class="hl-identifier">length</span><span class="hl-code">; </span><span class="hl-identifier">i</span><span class="hl-code">++</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">closeAllItems</span><span class="hl-brackets">(</span><span class="hl-identifier">rootsAr</span><span class="hl-brackets">[</span><span class="hl-identifier">i</span><span class="hl-brackets">]</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-brackets">}</span><span class="hl-code">
|
||||
</span><span class="hl-brackets">}</span></pre></div></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">table</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-code"> </span><span class="hl-var">valign</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">top</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">div</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-brackets"></</span><span class="hl-reserved">div</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-code"> </span><span class="hl-var">rowspan</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">2</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">style</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">padding-left:25</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">valign</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">top</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">tree.openAllItems(0);</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">Expand all</span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">tree.closeAllItems(0);</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">Collapse all</span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">tree.closeItem(tree.getSelectedItemId());</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">Close selected item</span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">tree.openItem(tree.getSelectedItemId());</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">Open selected item</span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">tree.closeAllItems(tree.getSelectedItemId());</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">Collapse selected branch</span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">a</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">javascript:void(0);</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onClick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">tree.openAllItems(tree.getSelectedItemId());</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">Expand selected branch</span><span class="hl-brackets"></</span><span class="hl-reserved">a</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-brackets"><</span><span class="hl-reserved">br</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-special">&nbsp;</span><span class="hl-brackets"></</span><span class="hl-reserved">td</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">tr</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
</span><span class="hl-brackets"></</span><span class="hl-reserved">table</span><span class="hl-brackets">></span><span class="hl-code">
|
||||
|
||||
</span><span class="hl-brackets"><</span><span class="hl-reserved">script</span><span class="hl-brackets">></span><span class="hl-code"><div class="hl-main"><pre><span class="hl-identifier">tree</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">dhtmlXTreeObject</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">treeboxbox_tree</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-quotes">"</span><span class="hl-string">100%</span><span class="hl-quotes">"</span><span class="hl-code">, </span><span class="hl-number">0</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setSkin</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">dhx_skyblue</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">setImagePath</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../../codebase/imgs/csh_bluebooks/</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
|
||||
</span><span class="hl-identifier">tree</span><span class="hl-code">.</span><span class="hl-identifier">loadXML</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">../common/tree3.xml</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;</span></pre></div></span><span class="hl-brackets"></</span><span class="hl-reserved">script</span><span class="hl-brackets">></span></pre></div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-logo"></div>
|
||||
<div class="copyright">Copyright © 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
45
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/13_nodes_manipulation/index.html
Executable file
45
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/13_nodes_manipulation/index.html
Executable file
@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<title>Nodes manipulations</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="title" content="Samples" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="../common/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="../common/css/style.css" type="text/css" media="screen" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<a class="logo" href="http://www.dhtmlx.com" title="DHTMLX homepage"></a>
|
||||
<div class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</div>
|
||||
<div class="search-field">
|
||||
<form action="http://docs.dhtmlx.com/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit">Search</button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="doc_inact" href="../../../docsExplorer/index.html" title="DHTMLX Documentation homepage"></a>
|
||||
<a class="sample"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="navigation-div">
|
||||
<a href="../../../docsExplorer/samples.html" class="navigation"><img src="../common/icons/file.gif" alt="" border=0 >All components</a>
|
||||
<div class="arrow"></div>
|
||||
<a href="../index.html" class="navigation"><img src="../common/icons/tree.gif" alt="" border=0 >dhtmlxTree</a>
|
||||
</div>
|
||||
<div style="display:block;">
|
||||
<h3>Nodes manipulations</h3>
|
||||
</div>
|
||||
<ul class="topics samples">
|
||||
<li><a href='./05_tree_add_delete.html'>Add / Delete items</a></li><li><a href='./06_tree_open_close.html'>Collapse/Expand nodes</a></li>
|
||||
<!--<li><a href="#">Calendar eXcell</a></li>-->
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-logo"></div>
|
||||
<div class="copyright">Copyright © 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
10
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/_context.xml
Executable file
10
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/_context.xml
Executable file
@ -0,0 +1,10 @@
|
||||
<?xml version='1.0' ?>
|
||||
<menu id="0">
|
||||
<item text="Red" img="red.gif" id="edit_Red"/>
|
||||
<item text="Green" img="green.gif" id="edit_Green"/>
|
||||
<item text="Blue" img="blue.gif" id="edit_Blue"/>
|
||||
<item text="Other..." img="" id="outher">
|
||||
<item text="Yellow" img="yellow.gif" id="edit_Yellow"/>
|
||||
<item text="White" img="white.gif" id="edit_White"/>
|
||||
</item>
|
||||
</menu>
|
||||
12102
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/big_data.json
Executable file
12102
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/big_data.json
Executable file
File diff suppressed because it is too large
Load Diff
1
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/big_xml.xml
Executable file
1
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/big_xml.xml
Executable file
File diff suppressed because one or more lines are too long
13
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/config.php
Executable file
13
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/config.php
Executable file
@ -0,0 +1,13 @@
|
||||
<?php
|
||||
/*
|
||||
Copyright DHTMLX LTD. http://www.dhtmlx.com
|
||||
This version of Software is free for using in non-commercial applications.
|
||||
For commercial use please contact sales@dhtmlx.com to obtain license
|
||||
*/
|
||||
|
||||
$mysql_host = "db2.dhtmlx.com";
|
||||
$mysql_user = "dhtmuzer_ro";
|
||||
$mysql_pasw = "gp45_gm";
|
||||
$mysql_db = "dhtmlxsamples";
|
||||
|
||||
?>
|
||||
484
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/css/style.css
Executable file
484
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/css/style.css
Executable file
@ -0,0 +1,484 @@
|
||||
/* MAIN STYLES */
|
||||
|
||||
html {
|
||||
overflow-x:hidden;
|
||||
border: none;
|
||||
}
|
||||
|
||||
body {
|
||||
margin:1px;
|
||||
color:#666;
|
||||
font-family: Tahoma, Arial, Helvetica, Tahoma, serif;
|
||||
font-size:12px;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: Tahoma, Arial, Helvetica, serif;
|
||||
font-size:12px;
|
||||
color: #058cb6;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
a.navigation img {
|
||||
margin-bottom:-5px;
|
||||
padding-right:5px;
|
||||
border:none;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-bottom:30px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color:#000;
|
||||
font-family: Tahoma, Arial, Helvetica, serif;
|
||||
font-size:21px;
|
||||
font-weight:normal;
|
||||
padding-bottom:37px;
|
||||
margin-top:35px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
display:inline-block;
|
||||
width:100%;
|
||||
color:#B5B5B5;
|
||||
font-family: Arial, Helvetica, Tahoma, serif;
|
||||
font-size:20px;
|
||||
font-weight:normal;
|
||||
padding-bottom:20px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
color:#666;
|
||||
font-family: Tahoma, Arial, Helvetica, Tahoma, serif;
|
||||
font-size:13px;
|
||||
padding:4px 0 10px 0;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.column {
|
||||
float:left;
|
||||
width:24%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* HEADER */
|
||||
|
||||
.header {
|
||||
width:100%;
|
||||
height: 100px;
|
||||
background:url("../img/head_bg.png");
|
||||
}
|
||||
|
||||
a.logo {
|
||||
display:block;
|
||||
margin-left:48px;
|
||||
height:100px;
|
||||
width:100px;
|
||||
background-image:url("../img/logo.png");
|
||||
float:left;
|
||||
outline:none;
|
||||
}
|
||||
|
||||
.tittle-dhtmlx {
|
||||
padding: 29px 0 0 121px;
|
||||
font-family:arial, serif;
|
||||
font-size:16px;
|
||||
color:white;
|
||||
float:left;
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
/* Search */
|
||||
|
||||
.search-field {
|
||||
position:absolute;
|
||||
float:right;
|
||||
right:67px;
|
||||
top:30px;
|
||||
min-width: 430px;
|
||||
}
|
||||
|
||||
.search-field input {
|
||||
float:left;
|
||||
width:351px;
|
||||
height:20px;
|
||||
background: white url("../img/search-field.png");
|
||||
border: none;
|
||||
}
|
||||
|
||||
.search-field input:hover {
|
||||
background-position:0 -20px;
|
||||
}
|
||||
|
||||
input.button {
|
||||
cursor:pointer;
|
||||
margin-left:7px;
|
||||
float:left;
|
||||
width:70px;
|
||||
height:20px;
|
||||
background: white url("../img/search-button.png");
|
||||
border: 0;
|
||||
}
|
||||
|
||||
input.button:hover {
|
||||
background-position:0 -20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* BUTTONS */
|
||||
|
||||
.buttons {
|
||||
position:absolute;
|
||||
width: 154px;
|
||||
height: 24px;
|
||||
left: 55px;
|
||||
top:80px;
|
||||
}
|
||||
|
||||
.buttons a.doc {
|
||||
display:block;
|
||||
height:24px;
|
||||
width:93px;
|
||||
background-image:url("../img/doc-button.png");
|
||||
float:left;
|
||||
outline:none;
|
||||
}
|
||||
|
||||
.buttons a.doc_inact {
|
||||
display:block;
|
||||
height:24px;
|
||||
width:92px;
|
||||
background-image:url("../img/doc-button_inact.png");
|
||||
float:left;
|
||||
outline:none;
|
||||
}
|
||||
|
||||
.buttons a.doc_inact:hover {
|
||||
background-position:0 -24px;
|
||||
}
|
||||
|
||||
.buttons a.sample {
|
||||
display:block;
|
||||
height:24px;
|
||||
width:62px;
|
||||
background-image:url("../img/samples-but.png");
|
||||
float:left;
|
||||
outline:none;
|
||||
}
|
||||
|
||||
.buttons a.sample_inact {
|
||||
display:block;
|
||||
height:24px;
|
||||
width:55px;
|
||||
background-image:url("../img/samples-but_inact.png");
|
||||
float:left;
|
||||
outline:none;
|
||||
}
|
||||
|
||||
.buttons a.sample_inact:hover {
|
||||
background-position:0 -24px;
|
||||
}
|
||||
|
||||
|
||||
/* CONTENT */
|
||||
|
||||
.content {
|
||||
margin: 30px 63px 0 63px;
|
||||
}
|
||||
|
||||
.content li {
|
||||
list-style:none;
|
||||
height:22px;
|
||||
}
|
||||
|
||||
li img {
|
||||
margin-bottom:-5px;
|
||||
padding-right: 7px;
|
||||
}
|
||||
|
||||
.line {
|
||||
margin: 0;
|
||||
padding: 1px;
|
||||
background: url("../img/border-dotted.gif") repeat-x top;
|
||||
}
|
||||
|
||||
|
||||
/* NAVIGATION */
|
||||
|
||||
.navigation-div {
|
||||
display:block;
|
||||
height:35px;
|
||||
width:100%;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
|
||||
a.navigation {
|
||||
outline:none;
|
||||
float:left;
|
||||
display:block;
|
||||
height:25px;
|
||||
padding: 2px 10px 0 5px;
|
||||
border: solid 1px #cccccc;
|
||||
}
|
||||
|
||||
a.navigation:hover {
|
||||
background-color: #eaeff4;
|
||||
border-color: #6699CC;
|
||||
text-decoration:none;
|
||||
outline:none;
|
||||
}
|
||||
|
||||
a.navigation img {
|
||||
margin-bottom:-5px;
|
||||
padding-right:5px;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
float:left;
|
||||
height:23px;
|
||||
background:url("../img/arrow.gif");
|
||||
margin: 3px 3px;
|
||||
width:8px;
|
||||
}
|
||||
|
||||
a.view-source {
|
||||
border: dashed 1px #cccccc;
|
||||
}
|
||||
|
||||
|
||||
/* LOGOS */
|
||||
|
||||
.big_logo {
|
||||
display:block;
|
||||
width:200px;
|
||||
height:54px;
|
||||
overflow:hidden;
|
||||
line-height:1000px;
|
||||
margin: 40px 0 20px 0;
|
||||
}
|
||||
|
||||
.logo_grid{
|
||||
background:transparent url("../img/logo_grid.gif") no-repeat;
|
||||
}
|
||||
.logo_treegrid{
|
||||
background:transparent url("../img/logo_treegrid.gif") no-repeat;
|
||||
}
|
||||
.logo_tree{
|
||||
background:transparent url("../img/logo_tree.gif") no-repeat;
|
||||
}
|
||||
.logo_layout{
|
||||
background:transparent url("../img/logo_layout.gif") no-repeat;
|
||||
}
|
||||
.logo_menu{
|
||||
background:transparent url("../img/logo_menu.gif") no-repeat;
|
||||
}
|
||||
.logo_toolbar{
|
||||
background:transparent url("../img/logo_toolbar.gif") no-repeat;
|
||||
}
|
||||
.logo_windows{
|
||||
background:transparent url("../img/logo_windows.gif") no-repeat;
|
||||
}
|
||||
.logo_calendar{
|
||||
background:transparent url("../img/logo_calendar.gif") no-repeat;
|
||||
}
|
||||
.logo_slider{
|
||||
background:transparent url("../img/logo_slider.gif") no-repeat;
|
||||
}
|
||||
.logo_scheduler{
|
||||
background:transparent url("../img/logo_scheduler.gif") no-repeat;
|
||||
}
|
||||
.logo_colorpicker{
|
||||
background:transparent url("../img/logo_colorpicker.gif") no-repeat;
|
||||
}
|
||||
.logo_combo{
|
||||
background:transparent url("../img/logo_combo.gif") no-repeat;
|
||||
}
|
||||
.logo_tabbar{
|
||||
background:transparent url("../img/logo_tabbar.gif") no-repeat;
|
||||
}
|
||||
.logo_accordion{
|
||||
background:transparent url("../img/logo_accordion.gif") no-repeat;
|
||||
}
|
||||
.logo_folders{
|
||||
background:transparent url("../img/logo_folders.gif") no-repeat;
|
||||
}
|
||||
.logo_editor{
|
||||
background:transparent url("../img/logo_editor.gif") no-repeat;
|
||||
}
|
||||
.logo_ajax{
|
||||
background:transparent url("../img/logo_ajax.gif") no-repeat;
|
||||
}
|
||||
.logo_gantt{
|
||||
background:transparent url("../img/logo_gantt.gif") no-repeat;
|
||||
}
|
||||
.logo_chart{
|
||||
background:transparent url("../img/logo_chart.gif") no-repeat;
|
||||
}
|
||||
.logo_dataview{
|
||||
background:transparent url("../img/logo_dataview.gif") no-repeat;
|
||||
}
|
||||
.logo_form{
|
||||
background:transparent url("../img/logo_form.gif") no-repeat;
|
||||
}
|
||||
|
||||
/* Topics */
|
||||
|
||||
.topics li {
|
||||
background:url("../icons/old.gif") no-repeat;
|
||||
padding-left: 25px;
|
||||
line-height:22px;
|
||||
}
|
||||
|
||||
.samples li {
|
||||
background:url("../icons/file.gif") no-repeat;
|
||||
}
|
||||
|
||||
ul.list {
|
||||
margin-left:40px;
|
||||
}
|
||||
|
||||
.list li {
|
||||
list-style-image:url("../icons/bullet.gif");
|
||||
}
|
||||
|
||||
.component-demo-placeholder {
|
||||
width:602px;
|
||||
height:252px;
|
||||
background:url("../img/grid-placeholder.gif");
|
||||
}
|
||||
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
.footer {
|
||||
display:block;
|
||||
float:left;
|
||||
width:100%;
|
||||
height:64px;
|
||||
background: white url("../img/border-dotted-ccc.gif") repeat-x;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
float:left;
|
||||
width:55px;
|
||||
height:24px;
|
||||
background:url("../img/footer-logo.gif");
|
||||
margin: 20px 20px 20px 63px;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
float:left;
|
||||
margin-top:18px;
|
||||
font-size:11px;
|
||||
}
|
||||
|
||||
/* CODE */
|
||||
|
||||
.source {
|
||||
width:100%;
|
||||
background:url("../img/source-bg.gif");
|
||||
border-top: dashed 3px #ccc;
|
||||
border-bottom: dotted 1px #ccc;
|
||||
margin-top:20px;
|
||||
}
|
||||
|
||||
.code {
|
||||
margin:20px 63px;
|
||||
}
|
||||
|
||||
.teg {
|
||||
height:40px;
|
||||
color:#ccc;
|
||||
font-size:30px;
|
||||
font-family: Tahoma, Arial, Helvetica, Tahoma, serif;
|
||||
background:url("../img/source.gif") no-repeat 0 22px;
|
||||
padding: 10px 0 0 63px;
|
||||
}
|
||||
|
||||
/*colorizer*/
|
||||
|
||||
|
||||
.hl-default {
|
||||
color: Black;
|
||||
}
|
||||
.hl-code {
|
||||
color: Gray;
|
||||
}
|
||||
.hl-brackets {
|
||||
color: Olive;
|
||||
}
|
||||
.hl-comment {
|
||||
color: Orange;
|
||||
}
|
||||
.hl-quotes {
|
||||
color: Darkred;
|
||||
}
|
||||
.hl-string {
|
||||
color: Red;
|
||||
}
|
||||
|
||||
.hl-identifier {
|
||||
color: Blue;
|
||||
}
|
||||
|
||||
.hl-identifier a{
|
||||
font-family: "Courier New";
|
||||
font-size: 11px;
|
||||
color: Blue;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.hl-builtin {
|
||||
color: Teal;
|
||||
}
|
||||
.hl-reserved {
|
||||
color: Green;
|
||||
}
|
||||
.hl-inlinedoc {
|
||||
color: Blue;
|
||||
}
|
||||
.hl-var {
|
||||
color: Darkblue;
|
||||
}
|
||||
.hl-url {
|
||||
color: Blue;
|
||||
}
|
||||
.hl-special {
|
||||
color: Navy;
|
||||
}
|
||||
.hl-number {
|
||||
color: Maroon;
|
||||
}
|
||||
.hl-inlinetags {
|
||||
color: Blue;
|
||||
}
|
||||
.hl-main {
|
||||
background: transparent;
|
||||
}
|
||||
.hl-gutter {
|
||||
background-color: #999999;
|
||||
color: White
|
||||
}
|
||||
.hl-table {
|
||||
font-family: "Courier New";
|
||||
font-size: 12px;
|
||||
border: solid 1px lightgray;
|
||||
}
|
||||
5
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/data.csv
Executable file
5
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/data.csv
Executable file
@ -0,0 +1,5 @@
|
||||
1,0,start
|
||||
555,0,middle
|
||||
1111,0,finish
|
||||
2,1,child 1
|
||||
3,2,child 2
|
||||
|
4
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/data.js
Executable file
4
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/data.js
Executable file
@ -0,0 +1,4 @@
|
||||
[[1,0,"first"],
|
||||
[2,0,"middle"],
|
||||
[3,0,"last"],
|
||||
[4,2,"child"]]
|
||||
1
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/data.json
Executable file
1
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/data.json
Executable file
@ -0,0 +1 @@
|
||||
{id:0, item:[{id:1,text:"first"},{id:2, text:"middle", item:[{id:"21", text:"child"}]},{id:3,text:"last"}]}
|
||||
113
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/grid.xml
Executable file
113
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/grid.xml
Executable file
@ -0,0 +1,113 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<rows>
|
||||
<row id="1">
|
||||
<cell>-1500</cell>
|
||||
<cell>A Time to Kill</cell>
|
||||
<cell>John Grisham</cell>
|
||||
<cell>12.99</cell>
|
||||
<cell>1</cell>
|
||||
<cell>24</cell>
|
||||
<cell>0</cell>
|
||||
<cell>05/01/1998</cell>
|
||||
</row>
|
||||
<row id="2">
|
||||
<cell>1000</cell>
|
||||
<cell>Blood and Smoke</cell>
|
||||
<cell>Stephen King</cell>
|
||||
<cell>0</cell>
|
||||
<cell>1</cell>
|
||||
<cell>24</cell>
|
||||
<cell>0</cell>
|
||||
<cell>01/01/2000</cell>
|
||||
</row>
|
||||
<row id="3" selected="1">
|
||||
<cell>-200</cell>
|
||||
<cell>The Rainmaker</cell>
|
||||
<cell>John Grisham</cell>
|
||||
<cell>7.99</cell>
|
||||
<cell>0</cell>
|
||||
<cell>48</cell>
|
||||
<cell>0</cell>
|
||||
<cell>12/01/2001</cell>
|
||||
</row>
|
||||
<row id="4">
|
||||
<cell>350</cell>
|
||||
<cell>The Green Mile</cell>
|
||||
<cell>Stephen King</cell>
|
||||
<cell>11.10</cell>
|
||||
<cell>1</cell>
|
||||
<cell>24</cell>
|
||||
<cell>0</cell>
|
||||
<cell>01/01/1992</cell>
|
||||
</row>
|
||||
<row id="5">
|
||||
<cell>700</cell>
|
||||
<cell>Misery</cell>
|
||||
<cell>Stephen King</cell>
|
||||
<cell>7.70</cell>
|
||||
<cell>0</cell>
|
||||
<cell>na</cell>
|
||||
<cell>0</cell>
|
||||
<cell>01/01/2003</cell>
|
||||
</row>
|
||||
<row id="6">
|
||||
<cell>-1200</cell>
|
||||
<cell>The Dark Half</cell>
|
||||
<cell>Stephen King</cell>
|
||||
<cell>0</cell>
|
||||
<cell>0</cell>
|
||||
<cell>48</cell>
|
||||
<cell>0</cell>
|
||||
<cell>10/30/1999</cell>
|
||||
</row>
|
||||
<row id="7">
|
||||
<cell>1500</cell>
|
||||
<cell>The Partner</cell>
|
||||
<cell>John Grisham</cell>
|
||||
<cell>12.99</cell>
|
||||
<cell>1</cell>
|
||||
<cell>48</cell>
|
||||
<cell>1</cell>
|
||||
<cell>01/01/2005</cell>
|
||||
</row>
|
||||
<row id="8">
|
||||
<cell>500</cell>
|
||||
<cell>It</cell>
|
||||
<cell>Stephen King</cell>
|
||||
<cell>9.70</cell>
|
||||
<cell>0</cell>
|
||||
<cell>na</cell>
|
||||
<cell>0</cell>
|
||||
<cell>10/15/2001</cell>
|
||||
</row>
|
||||
<row id="9">
|
||||
<cell>400</cell>
|
||||
<cell>Cousin Bette</cell>
|
||||
<cell>Honore de Balzac</cell>
|
||||
<cell>0</cell>
|
||||
<cell>1</cell>
|
||||
<cell>1</cell>
|
||||
<cell>0</cell>
|
||||
<cell>12/01/1991</cell>
|
||||
</row>
|
||||
<row id="10">
|
||||
<cell>-100</cell>
|
||||
<cell>Boris Godunov</cell>
|
||||
<cell>Alexandr Pushkin</cell>
|
||||
<cell>7.15</cell>
|
||||
<cell>1</cell>
|
||||
<cell>1</cell>
|
||||
<cell>0</cell>
|
||||
<cell>01/01/1999</cell>
|
||||
</row>
|
||||
<row id="11">
|
||||
<cell>-150</cell>
|
||||
<cell>Alice in Wonderland</cell>
|
||||
<cell>Lewis Carroll</cell>
|
||||
<cell>4.15</cell>
|
||||
<cell>1</cell>
|
||||
<cell>1</cell>
|
||||
<cell>0</cell>
|
||||
<cell>01/01/1999</cell>
|
||||
</row>
|
||||
</rows>
|
||||
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/accordion.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/accordion.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 394 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/ajax.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/ajax.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 371 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/arrow.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/arrow.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 185 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/bullet.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/bullet.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 51 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/calendar.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/calendar.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 207 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/chart.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/chart.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/chm.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/chm.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 671 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/colorpicker.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/colorpicker.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 352 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/combo.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/combo.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 186 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/connector.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/connector.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 635 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/dataprocessor.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/dataprocessor.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 173 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/dataview.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/dataview.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 222 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/editor.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/editor.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 280 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/file.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/file.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 622 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/file_link.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/file_link.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/folders.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/folders.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 637 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/form.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/form.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 153 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/gantt.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/gantt.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1010 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/grid.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/grid.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 191 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/layout.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/layout.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 635 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/menu.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/menu.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 270 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/none.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/none.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 45 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/old.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/old.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 388 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/pdf.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/pdf.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 646 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/scheduler.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/scheduler.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 432 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/slider.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/slider.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 363 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/source.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/source.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 333 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/tabbar.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/tabbar.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 258 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/toolbar.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/toolbar.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 243 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/tree.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/tree.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 261 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/treegrid.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/treegrid.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 322 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/vault.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/vault.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 262 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/windows.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/icons/windows.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 267 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/blank.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/blank.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 56 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/blue.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/blue.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 75 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/book.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/book.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 184 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/books_close.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/books_close.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 189 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/books_open.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/books_open.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 187 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/close2.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/close2.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 181 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/folderClosed.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/folderClosed.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 135 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/folderOpen.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/folderOpen.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 139 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/green.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/green.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 75 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/iconCheckAll.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/iconCheckAll.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 123 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/iconCheckDis.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/iconCheckDis.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 126 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/iconCheckGray.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/iconCheckGray.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 126 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/iconUncheckAll.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/iconUncheckAll.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 111 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/iconUncheckDis.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/iconUncheckDis.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 117 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/item2c.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/item2c.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 267 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/item2o.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/item2o.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 263 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/leaf.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/leaf.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 123 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/line1.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/line1.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 71 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/line1_rtl.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/line1_rtl.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 64 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/line2.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/line2.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 70 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/line2_rtl.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/line2_rtl.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 64 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/line3.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/line3.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 73 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/line3_rtl.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/line3_rtl.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 67 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/line4.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/line4.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 69 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/line4_rtl.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/line4_rtl.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 64 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/minus.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/minus.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 85 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/minus2.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/minus2.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 92 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/minus2_rtl.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/minus2_rtl.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/minus3.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/minus3.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 93 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/minus3_rtl.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/minus3_rtl.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 85 B |
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/minus4.gif
Executable file
BIN
phpgwapi/js/dhtmlxtree/dhtmlxTree/samples/common/images/minus4.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 90 B |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user