📄 example2.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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>DynamicTree example 2</title>
<link rel="stylesheet" type="text/css" href="DynamicTree.css" />
<script type="text/javascript" src="../ie5.js"></script>
<script type="text/javascript" src="DynamicTreeBuilder.js"></script>
<script type="text/javascript" src="plugins.js"></script>
<style type="text/css">
body { background: #F1EFE2; }
body, table { font-family: georgia, sans-serif; font-size: 11px; }
form { margin: 0; }
input,select { font-size: 11px; font-family: georgia, tahoma, verdana; }
input[readonly] { border: 1px solid #7F9DB9; background: #ffffff; }
a { color: #0000ee; text-decoration: none; }
a:hover { color: #0000ee; text-decoration: underline; }
p { margin-top: 0; margin-bottom: 1em; }
#tree-plugin, #tree-plugin-button-import-html { display: none; }
#tree-plugin-textarea { white-space: nowrap; }
</style>
</head>
<body>
<div><b>Project:</b> <a href="http://gosu.pl/dhtml/mygosumenu.html">mygosuMenu</a></div>
<div><b>Menu type:</b> #1.5 DynamicTree example 2</div>
<div><b>Features:</b> <a href="javascript:void(document.getElementById('features').style.display = (document.getElementById('features').style.display == 'block' ? 'none' : 'block'))">View/Hide</a></div>
<div id="features" style="display: none;">
- Dynamically editable in browser (see example 2) <br />
- Export the structure of the tree to Html, Php or Sql <br />
- State of the menu is saved in cookie <br />
- Unlimited nesting <br />
- Links are visible to search engines <br />
- Accessible for user agents with javascript disabled (see /tests/test2.html) <br />
- Object Oriented code, so you can create many menus on the same page <br />
- Free for any use (BSD license)
</div>
<div><b>Compatibility:</b> Tested on: IE 5.0/5.5/6.0, Mozilla 1.4/1.7, Opera 7.11/7.23/7.52 Netscape 7.11, Firefox 0.7/0.8/0.9, Safari 1.2</div>
<table cellspacing="0" cellpadding="10" style="margin-top: 1em;">
<tr>
<td valign="top">
<div class="DynamicTree">
<div class="wrap1">
<div class="top">Tree Builder</div>
<div class="wrap2" id="tree">
<div class="folder">Node 1
<div class="folder">Node 1.1
<div class="folder">Node 1.1.1
<div class="doc"><a href="example1.html" title="Node 1.1.1.1" target="_self">Node 1.1.1.1</a></div>
</div>
</div>
<div class="doc"><a href="example2.html">Node 1.2</a></div>
</div>
<div class="doc"><a href="example3.html">Node 2</a></div>
<div class="doc"><a href="/test/example1.html">Node 3</a></div>
<div class="doc"><a href="example1.html">Node 4</a></div>
<div class="folder">Node 5
<div class="doc"><a href="example1.html">Node 5.1</a></div>
<div class="doc"><a href="example1.html">Node 5.2</a></div>
</div>
</div>
</div>
<div class="actions">
<a id="tree-moveUp" class="moveUp" href="javascript:void(0)"><img src="images/moveUp.gif" width="20" height="20" alt="" /></a>
<a id="tree-moveDown" class="moveDown" href="javascript:void(0)"><img src="images/moveDown.gif" width="20" height="20" alt="" /></a>
<a id="tree-moveLeft" class="moveLeft" href="javascript:void(0)"><img src="images/moveLeft.gif" width="20" height="20" alt="" /></a>
<a id="tree-moveRight" class="moveRight" href="javascript:void(0)"><img src="images/moveRight.gif" width="20" height="20" alt="" /></a>
<a id="tree-insert" class="insert" href="javascript:void(0)"><img src="images/insert.gif" width="20" height="20" alt="" /></a>
<a id="tree-info" class="info" href="javascript:void(0)"><img src="images/info.gif" width="20" height="20" alt="" /></a>
<a id="tree-remove" class="remove" href="javascript:void(0)"><img src="images/delete.gif" width="20" height="20" alt="" /></a>
<div class="tooltip" id="tree-tooltip"></div>
</div>
<div id="tree-insert-form">
<form action="javascript:void(0)" method="get">
<table cellspacing="0" cellpadding="0">
<tr id="tree-insert-where-div">
<td class="label">Where</td>
<td><select id="tree-insert-where" name="tree-insert-where" class="where"><option value="before">Before</option><option value="after">After</option></select></td>
</tr>
<tr>
<td class="label">Type</td>
<td><select id="tree-insert-type" name="tree-insert-type"><option value="doc">Document</option><option value="folder">Folder</option></select></td>
</tr>
<tr>
<td class="label">Name</td>
<td><input class="input" size="20" id="tree-insert-name" name="tree-insert-name" type="text" value="" /></td>
</tr>
<tr>
<td class="label">Href</td>
<td><input class="input" size="20" id="tree-insert-href" name="tree-insert-href" type="text" value="" /></td>
</tr>
<tr>
<td class="label">Title</td>
<td><input class="input" size="20" id="tree-insert-title" name="tree-insert-href" type="text" value="" /></td>
</tr>
<tr>
<td class="label">Target</td>
<td><input class="input" size="20" id="tree-insert-target" name="tree-insert-target" type="text" value="" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input id="tree-insert-button" class="button" type="button" value="Insert" />
<input id="tree-insert-cancel" type="button" value="Cancel" />
</td>
</tr>
</table>
</form>
</div>
<div id="tree-info-form">
<form action="javascript:void(0)" method="get">
<table cellspacing="0" cellpadding="0">
<tr>
<td class="label">Name</td>
<td><input class="input" size="20" id="tree-info-name" name="tree-info-name" type="text" value="" /></td>
</tr>
<tr>
<td class="label">Href</td>
<td><input class="input" size="20" id="tree-info-href" name="tree-info-href" type="text" value="" /></td>
</tr>
<tr>
<td class="label">Title</td>
<td><input class="input" size="20" id="tree-info-title" name="tree-info-href" type="text" value="" /></td>
</tr>
<tr>
<td class="label">Target</td>
<td><input class="input" size="20" id="tree-info-target" name="tree-info-target" type="text" value="" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input id="tree-info-button" class="button" type="button" value="Update" />
<input id="tree-info-cancel" type="button" value="Cancel" />
</td>
</tr>
</table>
</form>
</div>
</div>
</td>
<td valign="top">
<a href="javascript:void(window.open('help.html', 'Contents', 'width=400,height=400,scrollbars=yes'))">HELP</a> <br />
<br />
<a id="tree-plugin-import-html" href="javascript:void(0)">Import from Html</a> <br />
<a id="tree-plugin-export-html" href="javascript:void(0)">Export to Html</a> <br />
<a id="tree-plugin-export-php" href="javascript:void(0)">Export to Php</a> <br />
<a id="tree-plugin-export-sql" href="javascript:void(0)">Export to Sql</a> <br />
</td>
<td valign="top">
<div id="tree-plugin">
<b id="tree-plugin-header">Import from html</b> <br />
<textarea id="tree-plugin-textarea" cols="50" rows="10"></textarea><br />
<input id="tree-plugin-button-import-html" type="button" value="Import" />
</div>
</td>
</tr>
</table>
<script type="text/javascript">
var tree = new DynamicTreeBuilder("tree");
tree.init();
DynamicTreePlugins.call(tree);
</script>
<script type="text/javascript" src="actions.js"></script>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -