📄 demo.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<!-- The xtree script file -->
<script src="xtree.js"></script>
<!-- Modify this file to change the way the tree looks -->
<link type="text/css" rel="stylesheet" href="xtree.css">
<style>
body { background: white; color: black; }
input { width: 120px; }
</style>
</head>
<body>
<div style="position: absolute; width: 200px; top: 0px; left: 0px; height: 100%; padding: 5px; overflow: auto;">
<!-- js file containing the tree content, edit this file to alter the menu,
the menu will be inserted where this tag is located in the document -->
<script src="tree.js"></script>
</div>
<div style="position: absolute; left: 205px; top: 10px;">
<p>
This tree works just as the one found in the Microsoft Windows Explorer,
expand/collapse a tree item by double click on the icon or by single click
on the plus/minus symbol.<br/>Buttons below bound to the tree root.
</p>
<p>
This is the method thats called when you click on a tree item.<br/>
<input type="button" value="toggle()" onclick="tree.toggle();">
</p>
<p>
Pretty self explaining, expands or collapses the current item.<br/>
<input type="button" value="expand()" onclick="tree.expand();">
<input type="button" value="collapse()" onclick="tree.collapse();">
</p>
<p>
Expands or collapses the current item and all child items (recursive).<br/>
<input type="button" value="expandAll()" onclick="tree.expandAll();">
<input type="button" value="collapseAll()" onclick="tree.collapseAll();">
</p>
<p>
Expands or collapses all child items (recursive) but not the item itself.<br/>
<input type="button" value="expandChildren()" onclick="tree.expandChildren();">
<input type="button" value="collapseChildren()" onclick="tree.collapseChildren();">
</p>
<p>
Returns the id of the selected item (if any)<br/>
<input type="button" value="alert(tree.getSelected().id);" onclick="if (tree.getSelected()) { alert(tree.getSelected().id); }" style="width: 245px;">
</p>
<p>
Add node(s) below selected, or remove the selected node.<br/>
<input type="button" onclick="addNode();" style="width: 80px;" value="Add one" />
<input type="button" onclick="addNodes();" style="width: 80px;" value="Add multiple" />
<input type="button" onclick="delNode();" style="width: 80px;" value="Remove" />
</p>
</div>
</body>
<script>
function addNode() {
if (tree.getSelected()) {
tree.getSelected().add(new WebFXTreeItem('New'));
}
}
function addNodes() {
if (tree.getSelected()) {
var foo = tree.getSelected().add(new WebFXTreeItem('New'));
var bar = foo.add(new WebFXTreeItem('Sub 1'));
var fbr = foo.add(new WebFXTreeItem('Sub 2'));
}
}
function delNode() {
if (tree.getSelected()) {
tree.getSelected().remove();
}
}
</script>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -