怎样制作web版的folder treeview
文件夹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的各个功能。
代码：戳
怎样制作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火狐浏览器. 制作便携 ...
随机推荐
- [学习笔记] Inten
- 使用jQuery Uploadify在ASP.NET 上传附件
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.Uploadify官方网址:http://www.uploadify.com/,在MVC中使用的方法可以参考 jQuer ...
- 梦想还需有，因它必实现——发现最新版iOS漏洞，OverSky团队专访
梦想还需有,因它必实现——发现最新版iOS漏洞,OverSky团队专访 “成功了!”,随着一句欢呼声在阿里巴巴西溪园区传出,Cydia的图标出现在一部iOS9.3.4的iPhone6上并成功运行 ...
- 简单的jQuery幻灯片实现
一.一些抱怨 自从国庆放假上班以来,又是忙碌的工作直到现在,但是说忙好像也没有加几天班,只是上班的时候工作排的挺满.但是别人貌似一直都不太忙(也是我自己觉得),感觉就很不爽. 我喜欢快速做完一件事,然 ...
- QParserGenerator的文法文件介绍
在沉默了数月之后,博主心血来潮想继续介绍QParserGenerator,在这里我们将不再继续介绍任何有关于LALR(1)的算法(那东西只会把你的脑子变成一团浆糊),让我们来看一下QParserGen ...
- Android学习——windows下搭建NDK_r9环境
1. NDK(Native Development Kit) 1.1 NDK简介 Android NDK是一套允许开发人员使用本地代码(如C/C++)进行Android APP功能开发的工具,通过这个 ...
- ubuntu升级内核后vmware-player启动失败
在虚拟机软件中,vmware player是对硬件支持很好的,通过它可以很方便的使用网银.单片机开发等等工作.但是最近ubuntu每次升级内核后,vmware都会启动失败,提示:Before you ...
- PHP类的封装和做投票和用进度条显示
三处理传过来的数据1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...
- Atitit 补充说明 sql知识图谱与线路图attilax总结补充说明
Atitit 补充说明 sql知识图谱与线路图attilax总结补充说明 1. 常见编程语言的分类 :命令式语言.函数式语言.逻辑语言1 1.1. 按照编程语言的代际划分,又2gl,3gl,4gl ...
- iOS----自定义UIView，绘制一个UIView
绘制一个UIVIew最灵活的方式就是由它自己完成绘制.实际上你不是绘制一个UIView,你只是子类化了UIView并赋予子类绘制自己的能力.当一个UIVIew需要执行绘图操作的时,drawRect:方 ...