IT技术互动交流平台

怎样制作web版的folder treeview

作者:白色的海  发布日期:2016-03-04 21:00:54

文件夹treeview的效果

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

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

1.先准备图标素材

 file.gif,文件图标

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

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

 treeview-default.gif,折叠图标

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

2.

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>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定义。

3.

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

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

 

4.

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

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

            .treeview ul{
                background-color: white;
                margin-top: 4px;
            }

            .treeview li{
                margin:0px;
                padding:3px 0px 3px 16px;
            }

5.

列表模式是展开状态。

在文件夹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;
            }

6.

为文件夹文字前加上文件夹图标,默认采用文件夹已打开样式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;
            }

7.

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

        <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;
            }

8.

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

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

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

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

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

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

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

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

9.

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

那么先定义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的各个功能。

代码:http://www.it165.net/uploadfile/files/2015/0304/demo.folder.treeview.zip

延伸阅读:

Tag标签: 怎样制作web版的folder   treeview  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规