怎样制作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火狐浏览器. 制作便携 ...

随机推荐

ajax知识整理
HTTP服务 1.服务器服务器类型服务类型:文件服务器.数据库服务器.邮件服务器.Web服务器等: 操作系统:Linux服务器.Windows服务器等: 应用软件:Apache服务器.Nginx ...
Third Day(上班第四天):Android开发环境配置问题相关
换公司新电脑了,重新安装Android开发环境,并配置,具体流程如下:1.百度JDK,访问Oracle官网:http://www.oracle.com/technetwork/java/javase/ ...
字符串混淆技术应用设计一个字符串混淆程序可混淆.NET程序集中的字符串
关于字符串的研究,目前已经有两篇. 原理篇:字符串混淆技术在.NET程序保护中的应用及如何解密被混淆的字符串实践篇:字符串反混淆实战 Dotfuscator 4.9 字符串加密技术应对策略今天来 ...
初试Office 365企业版E3
Microsoft Office 365 团队给了所有现任的MVP 12个月的微软 Office 365 企业 E3 订阅,今天激活账号并试用了一下,发现非常强大,本文简要介绍下Office 365 ...
七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理
系列文章七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递七天学会ASP.NET MVC (三)— ...
使用python拼接多张图片.二三事
前几日在博客上看到一篇“使用python拼接多张图片”的Blog[具体是能将的图片名字必须是形如xx_1.png ... xx_100.png或者xx_001.png ... xx_100.png,拼 ...
Atitit 软件开发中瓦哈比派的核心含义以及修行方法以及对我们生活与工作中的指导意义
Atitit 软件开发中瓦哈比派的核心含义以及修行方法以及对我们生活与工作中的指导意义首先我们指明,任何一种行动以及教派修行方法都有他的多元化,只看到某一方面,就不能很好的评估利弊,适不适合自己使 ...
[C#] Socket 通讯，一个简单的聊天窗口小程序
Socket,这玩意,当时不会的时候,抄别人的都用不好,简单的一句话形容就是“笨死了”:也是很多人写的太复杂,不容易理解造成的.最近在搞erlang和C的通讯,也想试试erlang是不是可以和C#简单 ...
Sql Server系列：日期和时间函数
1. 获取系统当前日期函数GETDATE() GETDATE()函数用于返回当前数据库系统的日期和时间,返回值的类型为datetime. SELECT GETDATE() 2. 返回UTC日期的函数G ...
LINQ系列：Linq to Object排序操作符
LINQ排序操作符包括:OrderBy.OrderByDescending.ThenBy.ThenByDescending及Reverse. 1. OrderBy 1>. 原型定义 public ...

怎样制作web版的folder treeview

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

随机推荐

热门专题