⭐ 欢迎来到虫虫下载站! | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站

📄 test1.html

📁 javascript 写的动态树,里面有两个示例文件一看就会用。
💻 HTML
字号:
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>DynamicTree Test</title>
    <style type="text/css">
    .DynamicTree {
        font-family: georgia, tahoma;
        font-size: 11px;
        white-space: nowrap;
        cursor: default;
    }
    .DynamicTree .doc img,
    .DynamicTree .folder img { border: 0; vertical-align: -3px; }
    * html .DynamicTree .doc img,
    * html .DynamicTree .folder img { border: 0; vertical-align: middle; vertical-align: -4px; }
    .DynamicTree .section { background: url(../images/tree-branch.gif) repeat-y; }
    .DynamicTree .last { background: none; }
    .DynamicTree .folder .folder { margin-left: 18px; }
    .DynamicTree .doc .doc, .DynamicTree .folder .doc { margin-left: 18px; }
    </style>
</head>
<body>

    <div class="DynamicTree">
        <div class="folder"><img src="../images/tree-node-open.gif" width="18" height="18" alt="" /><img src="../images/tree-folder-open.gif" width="18" height="18" alt="" />Node 1
            <div class="section">
                <div class="folder"><img src="../images/tree-node-open.gif" width="18" height="18" alt="" /><img src="../images/tree-folder-open.gif" width="18" height="18" alt="" />Node 1.1
                    <div class="section">
                        <div class="folder"><img src="../images/tree-node-open-end.gif" width="18" height="18" alt="" /><img src="../images/tree-folder-open.gif" width="18" height="18" alt="" />Node 1.1.1
                            <div class="section last">
                                <div class="doc"><img src="../images/tree-leaf-end.gif" width="18" height="18" alt="" /><img src="../images/tree-doc.gif" width="18" height="18" alt="" />Node 1.1.1.1</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="doc"><img src="../images/tree-leaf-end.gif" width="18" height="18" alt="" /><img src="../images/tree-doc.gif" width="18" height="18" alt="" />Node 1.2</div>
            </div>
        </div>
        <div class="doc"><img src="../images/tree-leaf.gif" width="18" height="18" alt="" /><img src="../images/tree-doc.gif" width="18" height="18" alt="" />Node 2</div>
        <div class="doc"><img src="../images/tree-leaf.gif" width="18" height="18" alt="" /><img src="../images/tree-doc.gif" width="18" height="18" alt="" />Node 3</div>
        <div class="doc"><img src="../images/tree-leaf.gif" width="18" height="18" alt="" /><img src="../images/tree-doc.gif" width="18" height="18" alt="" />Node 4</div>
        <div class="folder"><img src="../images/tree-node-open-end.gif" width="18" height="18" alt="" /><img src="../images/tree-folder-open.gif" width="18" height="18" alt="" />Node 5
            <div class="section last">
                <div class="doc"><img src="../images/tree-leaf.gif" width="18" height="18" alt="" /><img src="../images/tree-doc.gif" width="18" height="18" alt="" />Node 5.1</div>
                <div class="doc"><img src="../images/tree-leaf-end.gif" width="18" height="18" alt="" /><img src="../images/tree-doc.gif" width="18" height="18" alt="" />Node 5.2</div>
            </div>
        </div>
    </div>

</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -