文件夾treeview的效果 這樣的treeview在實際項目中使用的場景較多。 既然用的多，那就DIY一遍，雖沒有面面俱到，但也要將其基本實現完成一遍。 1.先準備圖標素材 file.gif，文件圖標 folder.gif，文件夾打開中的圖標 folder-closed.gif，文件夾關閉著的圖標
文件夾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的各個功能。
代碼：戳
