怎样制作web版的folder treeview

文件夹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>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样式，表示这是最后一个列表项

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

            }

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

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

代码：戳

怎样制作web版的folder treeview的更多相关文章

Jquery.Treeview+Jquery UI制作Web文件预览
效果图: 前台Html: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="D ...
Web版RSS阅读器（五）——初步完成阅读功能
上一篇博文<Web版RSS阅读器(四)——定制自己的Rss解析库myrsslib4j>中,已经分享给大家制作自己的rss解析库.稍微有点遗憾的是,它仅仅支持rss格式的博客.现在给大家分享 ...
Node学习笔记（三）：基于socket.io web版你画我猜（一）
经过惨淡的面试,也是知道了自己的不足,刚好最近在学习node,心中便有了做一个web版的你画我猜的想法首先说下思路,在做准备工作的时候,有两个大概的思路: 1.规定一块div,捕捉鼠标事件,动态生成 ...
网站压力负载测试工具：Web版已逝，只好送大伙单机版
前言: 最近老板资金周转出了点问题,工资好久没发了,于是暂闲置在家,静待老板弄到钱东山再起的消息: QQ群里,偶尔不时的会有人问,原来的分布式网站负载工具怎么下载不了啦?或者不能用啦?之类的问题. 我 ...
挖掘微信Web版通信的全过程 [转]
昨天是周末,在家闲得无聊,于是去weiphone.com逛了一圈,偶然发现有人发了一帖叫<微信 for Mac>, 这勾起了我的好奇心,国内做Mac开发的人确实很少,对于那些能够独自开发一 ...
@font-face制作Web Icon
@font-face是CSS3中有关于字体设置的属性,通过@font-face可以将本地字体设置为Web页面字体,并能兼容所有浏览器,使用这个属性就不必担心用户本地不具备这样的字体.因为我们把字体都上 ...
RDIFramework.NET Web版介绍
RDIFramework.NET Web版介绍 B/S结构(Browser/Server,浏览器/服务器模式),是WEB兴起后的一种网络结构模式,WEB浏览器是客户端最主要的应用软件.这种模式统一了 ...
RDIFramework.NET V2.5（.NET快速信息化系统开发框架） Web版界面样例（可参考）
RDIFramework.NET V2.5(.NET快速信息化系统开发框架) Web版介绍现已升级到V2.8,点击查看 B/S结构(Browser/Server,浏览器/服务器模式),是WEB兴起 ...
制作便携版 FireFox 火狐浏览器
Firefox是一款可高度自定义的开源浏览器: 你可以访问火狐DIY 定制自己的Firefox安装包, 此外,你还可以自己动手定制一款可以放在U盘随身携带的便携版Firefox火狐浏览器. 制作便携 ...

随机推荐

Javascript设置对象属性为"只读"
有时为了保护某些属性,让其无法被更改,我们会把他们设置为常量. 在某些语言里面,也许会用const来实现这样的功能.本文讲述如何在Javascript中实现这样的功能. 方法一: var myObje ...
剑指Offer面试题：29.丑数
一.题目:丑数题目:我们把只包含因子2.3和5的数称作丑数(Ugly Number).求按从小到大的顺序的第1500个丑数.例如6.8都是丑数,但14不是,因为它包含因子7.习惯上我们把1当做第一个 ...
C++的性能C#的产能?! - .Net Native 系列向导
之前一文<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATIVE初窥> 获得很多朋友支持和鼓励,也更让我坚定做这项技术的推广者,希望能让更多的朋友了解这项技术,于是先从官方 ...
[异常解决] ubuntu上安装JLink驱动遇到的坑及给后来者的建议
一.前言最近将整个电脑格式化,改成了linux操作系统希望这样能让自己在一个新的世界探索技术.提升自己吧- win上的工具用多了,就不想变化了- 继上一篇<ubuntu上安装虚拟机遇到的问题 ...
Node.js + Web Socket 打造即时聊天程序嗨聊
前端一直是一块充满惊喜的土地,不仅是那些富有创造性的页面,还有那些惊赞的效果及不断推出的新技术.像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端.瞬间就有了一统天下的感觉,来往穿梭于前 ...
JavaScript面试时候的坑洼沟洄——数据类型
前些日子写了篇关于最近找工作的一些感受的博客找工作的一些感悟--前端小菜的成长,没想到得到了很多园友的共鸣,得到了很多鼓励,也有园友希望我分享一些笔试.面试的经验.我觉得分享一些笔试题没太多价值,对 ...
C语言 · 十六进制转十进制
问题描述从键盘输入一个不超过8位的正的十六进制数字符串,将它转换为正的十进制数后输出. 注:十六进制数中的10~15分别用大写的英文字母A.B.C.D.E.F表示. 样例输入 FFFF 样例输出 6 ...
AngularJS 源码分析2
上一篇地址本文主要分析RootScopeProvider和ParseProvider RootScopeProvider简介今天这个rootscope可是angularjs里面比较活跃的一个pro ...
Ajax_02之XHR发起异步请求
1.Ajax: AJAX:Asynchronous Javascript And Xml,异步的JS和XML: 同步请求:地址栏输入URL.链接跳转.表单提交-- 异步请求:使用Ajax发起,底层使用 ...
如何变相的绕过QQ邮箱订阅的繁琐核审
先看看正常流程:http://open.mail.qq.com/ 点击“接入订阅”==>申请接入==>登录一下选择接入完全免费大概流程就是这样: 下面我们说说快速接入的方法: 1.登录 ...

怎样制作web版的folder treeview

怎样制作web版的folder treeview的更多相关文章

随机推荐

热门专题