91 lines
2.5 KiB
HTML
91 lines
2.5 KiB
HTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||
|
|
<title>Spacetree - SpaceTree with on-demand nodes</title>
|
||
|
|
|
||
|
|
<!-- CSS Files -->
|
||
|
|
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
||
|
|
<link type="text/css" href="../css/Spacetree.css" rel="stylesheet" />
|
||
|
|
|
||
|
|
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
||
|
|
|
||
|
|
<!-- JIT Library File -->
|
||
|
|
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
||
|
|
|
||
|
|
<!-- Example File -->
|
||
|
|
<script language="javascript" type="text/javascript" src="example2.js"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body onload="init();">
|
||
|
|
<div id="container">
|
||
|
|
|
||
|
|
<div id="left-container">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="text">
|
||
|
|
<h4>
|
||
|
|
SpaceTree with on-demand nodes
|
||
|
|
</h4>
|
||
|
|
|
||
|
|
This example shows how you can use the <b>request</b> controller method to create a SpaceTree with <b>on demand</b> nodes<br /><br />
|
||
|
|
The basic JSON Tree structure is cloned and appended on demand on each node to create an <b>infinite large SpaceTree</b><br /><br />
|
||
|
|
You can select the <b>tree orientation</b> by changing the select box in the right column.
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="id-list"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<div style="text-align:center;"><a href="example2.js">See the Example Code</a></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="center-container">
|
||
|
|
<div id="infovis"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="right-container">
|
||
|
|
|
||
|
|
<h4>Change Tree Orientation</h4>
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<label for="r-left">left </label>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<input type="radio" id="r-left" name="orientation" checked="checked" value="left" />
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<label for="r-top">top </label>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<input type="radio" id="r-top" name="orientation" value="top" />
|
||
|
|
</td>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<label for="r-bottom">bottom </label>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<input type="radio" id="r-bottom" name="orientation" value="bottom" />
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<label for="r-right">right </label>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<input type="radio" id="r-right" name="orientation" value="right" />
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="log"></div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|