High imitation csdn community tree.

It has always been felt that the tree-shaped structure of csdn community is particularly humanized and intuitive. Recently do the system need to use this tree structure, so imitate CSDN tree structure to do a tree of their own structure, the implementation process is recorded as follows, hope to be useful to readers.

工欲善其事 its prerequisite, to imitate a classic tree structure should refer to others is how to achieve, where the use of the Firebug plug-ins, in Firefox to see the CSDN tree structure of the composition, found that the tree structure is a div with the help of IMG and background pictures pieced together, Sorting out the idea found that in fact, to achieve csdn effect is not very difficult.

Let's take a step-by-step analysis

1, the first use of the picture download down, a total of 15 pictures, the use of Firebug tools can be very easy to download the picture (save As) down.

2, the above pictures are in the CSS file as a background image, other places with blank pictures filled.

3, and then analyze the composition of the tree structure, first have a root directory, and then each root directory has its subdirectories, that is, each subdirectory at the beginning is hidden only when the mouse clicks on the expansion will be displayed, in this process, the Node icon and folder icon will change.

JavaScript code:

[JavaScript] View Plain copy print?         <script language= "JavaScript" >   function  display (ID)  {        eval ("Var div=div" +id);        eval ("var img=img" +id);        eval ("var  im=im "+id";        div.style.display=div.style.display== "block"? None ":" Block ";        img.src=div.style.display==" blocks "?" Http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_minus1.gif ":" Http://bbs.csdn.net/ui/scripts/System /_resource/mztreeview/_plus1.gif ";        im.src=div.style.display==" block "?" Http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/folderopen.gif ":" http://bbs.csdn.net/ui/scripts/ System/_resource/mztreeview/folder.gif ";        img.alt=div.style.display==" Block "?"Close ":" Expand ";  }   </script>  

		<script language= "JavaScript" >
function display (ID) {
	 eval ("var div=div" +id);
	 Eval ("var img=img" +id);
	 Eval ("var im=im" +id);
	 div.style.display=div.style.display== "Block"? None ": Block";
	 img.src=div.style.display== "Block"? Http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_minus1.gif ":" Http://bbs.csdn.net/ui/scripts/System /_resource/mztreeview/_plus1.gif ";
	 im.src=div.style.display== "Block"? Http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/folderopen.gif ":" http://bbs.csdn.net/ui/scripts/ System/_resource/mztreeview/folder.gif ";
	 img.alt=div.style.display== "Block"? Close ": expand";
</script>

4, when the click to expand the label to judge if the thumbnail image is turned to expand the picture and the hidden content display, so that the resource manager to achieve the effect.

Full implementation code:

[HTML] View Plain copy print?