test1.html

来自「javascript 写的动态树,里面有两个示例文件一看就会用。」· HTML 代码 · 共 51 行

HTML
51
字号
<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 + =
减小字号Ctrl + -
显示快捷键?