怎样制作web版的folder treeview_html/css_WEB-ITnose-html教學-PHP中文網

treeview

首頁

web前端

html教學

怎样制作web版的folder treeview_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:25 AM

文件夹treeview的效果

这样的treeview在实际项目中使用的场景较多。

既然用的多，那就DIY一遍，虽没有面面俱到，但也要将其基本实现完成一遍。

1.先准备图标素材

file.gif，文件图标

folder.gif，文件夹打开中的图标

folder-closed.gif，文件夹关闭着的图标

treeview-default.gif，折叠图标

treeview-default-line.gif，折叠线图标，实际分辨率是16*1776

treeview是基于ul li以及他们的嵌套，将文件夹树用列表搭出

html代码

<!DOCTYPE><html>    <head>        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>        <title>treeview</title>        <style type="text/css">        </style>    </head>    <body>            <h4 id="treeview">treeview</h4>    <ul id="browser" class="treeview">        <li>            <div class='foldarea foldarea-collapsable'></div>            <span class="folder folder-opened">文件夹1</span>            <ul>                <li class="last"><span class="file">文件1-1</span></li>            </ul>        </li>        <li>            <div class='foldarea foldarea-collapsable'></div>            <span class="folder folder-opened">文件夹2</span>            <ul>                <li>                    <div class='foldarea foldarea-collapsable'></div>                    <span class="folder folder-opened">文件夹2.1</span>                    <ul id="">                        <li><span class="file">文件2.1-1</span></li>                        <li class="last"><span class="file">文件2.1-2</span></li>                    </ul>                </li>                <li class="last"><span class="file">文件2-1</span></li>            </ul>        </li>        <li>            <div class='foldarea foldarea-collapsable'></div>            <span class="folder folder-opened">文件夹3</span>            <ul>                <li class="last"><span class="file">文件3-1</span></li>            </ul>        </li>        <li class="last"><span class="file">文件0-1</span></li>    </ul>    <script src="lib/jquery.js" type="text/javascript"></script>    <script type="text/javascript">        </script></body></html>

登入後複製

在代码中使用css的类名将各个元素的角色定义好，已备后续的css定义。

一个列表的样式出来后，为了将列表的样式改成文件夹树的样式，先得把列表ul样式清空，包括嵌套的ul，将他们的padding和margin都设成0px已备后续按照自己的要求定义。

            .treeview, .treeview ul{                list-style: none;                padding: 0px;                margin: 0px;            }

登入後複製

将列表的背景色设成白色，设置顶外边距保持与上面的元素一点距离。

为li设上自定义的内边距达到自定义缩进的目的。

            .treeview ul{                background-color: white;                margin-top: 4px;            }            .treeview li{                margin:0px;                padding:3px 0px 3px 16px;            }

登入後複製

列表模式是展开状态。

在文件夹span前，加上加号或减号图标，使用div作为图标显示元素，默认采用可折叠样式foldarea-collapsable，显示减号图标。

        <li>            <div class='foldarea foldarea-collapsable'></div>            <span class="folder folder-opened">文件夹1</span>            <ul>                <li class="last"><span class="file">文件1-1</span></li>            </ul>        </li>

登入後複製

将该div设成左浮动，这样就可以变成可设定宽度的内联元素，和文件夹span处于一行。

            .treeview .foldarea{                height: 16px;                width: 16px;                float: left;                margin-left: -16px;            }

登入後複製

定义可折叠样式和可展开样式。

可折叠样式表示，当前列表处于展开中，显示减号图标。

可展开样式表示，当前列表处于折叠中，显示加号图标。

            .treeview  .foldarea-expandable{                background: url(images/treeview-default.gif) -80px -3px no-repeat;            }            .treeview .foldarea-collapsable{                background: url(images/treeview-default.gif) -64px -25px no-repeat;            }

登入後複製

为文件夹文字前加上文件夹图标，默认采用文件夹已打开样式folder-opened，显示文件夹已打开图标。

        <li>            <div class='foldarea foldarea-collapsable'></div>            <span class="folder folder-opened">文件夹1</span>            <ul>                <li class="last"><span class="file">文件1-1</span></li>            </ul>        </li>

登入後複製

先设置文件夹文字缩进，让其向右缩进自定义的距离，为图标显示留下空间。

            .treeview .folder{                padding: 1px 0px 1px 16px;            }

登入後複製

定义文件夹已打开和已关闭样式，用来设置对应的图标。

            .treeview .folder-opened{                background: url(images/folder.gif) 0 0 no-repeat;            }            .treeview .folder-closed{                background: url(images/folder-closed.gif) 0 0 no-repeat;            }

登入後複製

定义文件样式，为文件文字前加上文件图标。

        <li>            <div class='foldarea foldarea-collapsable'></div>            <span class="folder folder-opened">文件夹1</span>            <ul>                <li class="last"><span class="file">文件1-1</span></li>            </ul>        </li>

登入後複製

将文件文字缩进，为图标露出显示空间，设置文件背景图标。

            .treeview .file{                background: url(images/file.gif) 0 0 no-repeat;                padding: 0px 0px 1px 16px;            }

登入後複製

为所有的li列表项设置折叠线背景

折叠线背景图的上部有个直角的小分叉。

            .treeview li {                background: url(images/treeview-default-line.gif) 0 0 no-repeat;            }

登入後複製

设置完折叠线后，每一个最后的列表项都会拖一个尾巴，为了去掉这个尾巴，折叠线背景图的最下部是一个直角的闭合样式。

并且将所有最后一个li列表项设置成last样式，表示这是最后一个列表项

        <li>            <div class='foldarea foldarea-collapsable'></div>            <span class="folder folder-opened">文件夹1</span>            <ul>                <li class="last"><span class="file">文件1-1</span></li>            </ul>        </li>                    
            文件夹2                                                
                    文件夹2.1                                            文件2.1-1
                        文件2.1-2
                    
                
                文件2-1
            
        
                    
            文件夹3                            文件3-1
            
        
        文件0-1

登入後複製

last样式的关键点就是把折叠线的可视部分通过background-position定位到下部的直角上，这样在效果上就把折叠线给关闭了。

            .treeview li.last {                background-position: 0 -1766px;            }

登入後複製

最后，我们要在鼠标移到文件夹上后改变文字色以及鼠标指针。

那么先定义hover样式。

            .hover{                cursor: pointer;                color: red;            }

登入後複製

找到所有的文件夹span，响应hover事件，动态的添加和删除鼠标进入样式，已达到动态效果。

并且响应文件夹span和加减号div的单击事件，在展开的时候单击就折叠其下的列表，在折叠的时候单击就展开，折叠和展开是通过控制display:none样式来实现。

然后就是根据折叠或展开的状态控制图标的显示。

       $(document).ready(function(){            var folders = $('.folder');            var foldareas = $('.foldarea');            //鼠标移入文件夹节点上，节点文字变色，鼠标指针改变            folders.hover(                    function(){                        $(this).addClass('hover');                    },                    function(){                        $(this).removeClass('hover');                    }            );            var doFold = function(){                var ul = $('ul',this.parentNode)[0];                var foldarea = $('.foldarea',this.parentNode)[0];                var folder = $('.folder',this.parentNode)[0];                if(!ul){                    return;                }                var ulDisplay =   $(ul).css('display');                if(ulDisplay==='none'){                    //展开列表                    $(ul).css('display','block');                    //显示展开时的文件夹图标                    $(folder).removeClass('folder-closed');                    $(folder).addClass('folder-opened');                    //展开时显示可折叠图标                    $(foldarea).removeClass('foldarea-expandable');                    $(foldarea).addClass('foldarea-collapsable');                }else{                    //通过隐藏来实现折叠列表                    $(ul).css('display','none');                    //显示折叠时的文件夹图标                    $(folder).removeClass('folder-opened');                    $(folder).addClass('folder-closed');                    //折叠时显示可展开图标                    $(foldarea).removeClass('foldarea-collapsable');                    $(foldarea).addClass('foldarea-expandable');                }            };            //将文件夹节点下的列表折叠或展开            folders.click(doFold);            foldareas.click(doFold);        });

登入後複製

至此，完成了treeview的基本实现。

如果需要完成整体功能，就要在此基础之上封装实现treeview的各个功能。

代码：戳

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1664

CakePHP 教程

1423

Laravel 教程

1321

PHP教程

1269

C# 教程

1249

Related knowledge

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML：結構，CSS：樣式，JavaScript：行為 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML，CSS和JavaScript的未來：網絡開發趨勢 Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML的未來：網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：建立網頁的結構 Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

HTML：是編程語言還是其他？ Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML與CSS和JavaScript：比較Web技術 Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

See all articles

怎样制作web版的folder treeview_html/css_WEB-ITnose

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題