📄 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 + -