怎样制作web版的foldertreeview_html/css_WEB-ITnose

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

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

1.先准备图标素材

file.gif，文件图标

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

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

treeview-default.gif，折叠图标

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

2.

treeview是基于ul li以及他们的嵌套，将文件夹树用列表搭出

html代码

       
treeview
 
 文件夹1 
文件1-1
  
 文件夹2 
 文件夹2.1 
文件2.1-1
 
文件2.1-2
  
文件2-1
  
 文件夹3 
文件3-1
  
文件0-1
  

在代码中使用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，显示减号图标。

 
 文件夹1 
文件1-1
 

将该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) -px -25px no-repeat; }

6.

为文件夹文字前加上文件夹图标，默认采用文件夹已打开样式folder-opened，显示文件夹已打开图标。

 
 文件夹1 
文件1-1
 

先设置文件夹文字缩进，让其向右缩进自定义的距离，为图标显示留下空间。

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

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

 
 文件夹1 
文件1-1
 

将文件文字缩进，为图标露出显示空间，设置文件背景图标。

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

 
 文件夹1 
文件1-1
  
 文件夹2 
 文件夹2.1 
文件2.1-1
 
文件2.1-2
  
文件2-1
  
 文件夹3 
文件3-1
  
文件0-1
 

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的各个功能。

代码：戳