怎样制作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火狐浏览器. 制作便携 ...
随机推荐
- DM 多路径存储
DM多路径存储 系统环境:RHEL5.4 small install selinux and iptables disabled主机规划:主机网卡软件station133eth0: 192.168. ...
- HDFS 与 GFS 的设计差异
后端分布式系列」前面关于 HDFS 的一些文章介绍了它的整体架构和一些关键部件的设计实现要点. 我们知道 HDFS 最早是根据 GFS(Google File System)的论文概念模型来设计实现的 ...
- CYQ.Data+EasyUI开发：几个相关的问题CheckBox、Tree、TreeGrid
前言: 话说到新的公司已经呆了三个星期了,从上班的第二天开始就一直在写项目文档和给开发人员培训,以至于我的QQ签名从"我不是来搞培训的“到最后直接换成”我是来搞培训的“. 虽然挂名开发经理, ...
- 介绍.NET 开发必备工具 .NET Portability Analyzer
随着.NET的原来越开放,不仅仅是开源这么简单了,也意味着.NET程序员要关注越来越多的平台,涵盖.NET Mic Framework, Xamarin,Mono,.NET等等,从windows到li ...
- Entity Framework扩展库
这个Entity Framework扩展完全支持EF 5.0/6.0,项目地址 https://github.com/loresoft/EntityFramework.Extended,这个库支持批量 ...
- 【数据结构】平衡二叉树—AVL树
(百度百科)在计算机科学中,AVL树是最先发明的自平衡二叉查找树.在AVL树中任何节点的两个子树的高度最大差别为一,所以它也被称为高度平衡树.查找.插入和删除在平均和最坏情况下都是O(log n).增 ...
- ASP.Net WebForm温故知新学习笔记：二、ViewState与UpdatePanel探秘
开篇:经历了上一篇<aspx与服务器控件探秘>后,我们了解了aspx和服务器控件背后的故事.这篇我们开始走进WebForm状态保持的一大法宝—ViewState,对其刨根究底一下.然后,再 ...
- MapReduce剖析笔记之二：Job提交的过程
上一节以WordCount分析了MapReduce的基本执行流程,但并没有从框架上进行分析,这一部分工作在后续慢慢补充.这一节,先剖析一下作业提交过程. 在分析之前,我们先进行一下粗略的思考,如果要我 ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- php的函数和数组
//php函数//1.简单函数//四要素:返回类型,函数名,参数列表,函数体/*function Show(){ echo "hello";}Show();*///2.有返回 ...