You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
3.5 KiB
89 lines
3.5 KiB
2 years ago
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Dojo Tree Widget Test</title>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
var djConfig = {isDebug: true, debugAtAllCosts: true };
|
||
|
|
</script>
|
||
|
|
<script type="text/javascript" src="../../../dojo.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
delete dojo["profile"];
|
||
|
|
dojo.require("dojo.profile");
|
||
|
|
|
||
|
|
dojo.require("dojo.widget.*");
|
||
|
|
dojo.require("dojo.widget.TreeV3");
|
||
|
|
dojo.require("dojo.widget.TreeNodeV3");
|
||
|
|
dojo.require("dojo.widget.TreeDocIconExtension");
|
||
|
|
dojo.require("dojo.widget.TreeDisableWrapExtension");
|
||
|
|
dojo.require("dojo.widget.TreeBasicControllerV3");
|
||
|
|
dojo.hostenv.writeIncludes();
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
font-size:16px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>Simplest tree</h2>
|
||
|
|
|
||
|
|
<div style="display:none">
|
||
|
|
<img src="../../../src/widget/templates/images/TreeV3/i.gif">
|
||
|
|
<img src="../../../src/widget/templates/images/TreeV3/i_half.gif">
|
||
|
|
<img src="../../../src/widget/templates/images/TreeV3/expand_minus.gif">
|
||
|
|
<img src="../../../src/widget/templates/images/TreeV3/expand_plus.gif">
|
||
|
|
<img src="../../../src/widget/templates/images/TreeV3/expand_leaf.gif">
|
||
|
|
<img src="../../../src/widget/templates/images/TreeV3/i_long.gif">
|
||
|
|
<img src="../../../src/widget/templates/images/TreeV3/document.gif">
|
||
|
|
<img src="../../../src/widget/templates/images/TreeV3/open.gif">
|
||
|
|
<img src="../../../src/widget/templates/images/TreeV3/closed.gif">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Prevent div from collapsing beyond table width. This ensures there's enough space for all
|
||
|
|
HTML elements in the tree -->
|
||
|
|
<!-- Use table because it collapses to the content width.
|
||
|
|
If use div it will be 100% width and CSS expression above will only make the width of
|
||
|
|
the above div constant, no matter what body width is. Only initial body width will be used to
|
||
|
|
set the width of the tree. After that it will remain the same.
|
||
|
|
Table changes it's width to allow content to fit inside, this fixes the problem -->
|
||
|
|
<!-- btw, there can be no comment between div and table, or firstChild is invalid -->
|
||
|
|
|
||
|
|
<div dojoType="TreeBasicControllerV3" widgetId="controller"></div>
|
||
|
|
|
||
|
|
<div dojoType="TreeDocIconExtension" widgetId="docIcons"></div>
|
||
|
|
<div dojoType="TreeDisableWrapExtension" widgetId="disableWrap"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<div dojoType="TreeV3" listeners="docIcons;controller;disableWrap" expandLevel="2">
|
||
|
|
<div dojoType="TreeNodeV3" title="Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong title">
|
||
|
|
<div dojoType="TreeNodeV3" title="Item 1.1<br/>multiline<br/>test">
|
||
|
|
<div dojoType="TreeNodeV3" title="Item 1.1.1<br/>blas"></div>
|
||
|
|
</div>
|
||
|
|
<div dojoType="TreeNodeV3"
|
||
|
|
title="<div style='border:1px red solid;width:700px;height:200px'><span>Rich HTML node</span><div style='border:1px blue solid'>Body Body</div></div>"
|
||
|
|
>
|
||
|
|
<div dojoType="TreeNodeV3" title="Item 1.2.1">
|
||
|
|
<div dojoType="TreeNodeV3" title="Item 1.2.1.1"></div>
|
||
|
|
</div>
|
||
|
|
<div dojoType="TreeNodeV3" title="Item 1.2.2"></div>
|
||
|
|
</div>
|
||
|
|
<div dojoType="TreeNodeV3" title="Item 1.3">
|
||
|
|
<div dojoType="TreeNodeV3" isFolder="true" title="Empty folder"></div>
|
||
|
|
<div dojoType="TreeNodeV3" title="Item 1.3.2"></div>
|
||
|
|
</div>
|
||
|
|
<div dojoType="TreeNodeV3" title="Item 1.4">
|
||
|
|
<div dojoType="TreeNodeV3" title="Item 1.4.1"></div>
|
||
|
|
</div>
|
||
|
|
<div dojoType="TreeNodeV3" title="Item 2"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<input type="button" value="Profile dump" onclick="dojo.profile.dump(true)">
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|