首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

高仿CSDN社区树形图.

作者：55525wio | 来源：互联网 | 2023-10-10 16:17
一直感觉CSDN社区的树形结构特别的人性化，直观化。最近做系统的时候需要用到这个树形结构，于是模仿CSDN的树形结构做了一个自己的树形结构，

一直感觉CSDN社区的树形结构特别的人性化&＃xff0c;直观化。最近做系统的时候需要用到这个树形结构&＃xff0c;于是模仿CSDN的树形结构做了一个自己的树形结构&＃xff0c;将实现过程记录如下&＃xff0c;希望对读者有用。

工欲善其事必先利其器&＃xff0c;要模仿一个经典的树形结构就应该参照人家是怎么实现的&＃xff0c;这里用到了firebug插件&＃xff0c;在firefox中查看了CSDN的树形结构的组成&＃xff0c;发现其实树形结构就是一个个的DIV借助img以及背景图片拼凑而成&＃xff0c;整理了一下思路发现其实要想达到CSDN的效果也不是很困难。

让我们一步一步的分析

1、首先把用到的图片下载下来&＃xff0c;一共15个图片&＃xff0c;利用firebug工具可以很轻松的把图片下载&＃xff08;另存为&＃xff09;下来。

2、以上这些图片都是在CSS文件中作为背景图片出现的&＃xff0c;其他地方以空白图片填充。

3、然后分析树形结构的组成&＃xff0c;首先有一个根目录&＃xff0c;然后每个根目录下面有其子目录&＃xff0c;也就是说每个子目录开始的时候是隐藏的只有当鼠标点击展开的时候才会显示&＃xff0c;在此过程中节点图标以及文件夹图标会变化。

Javascript代码&＃xff1a;

[Javascript] view plaincopyprint?
  1.           



4、当点击展开标签的时候进行判断如果为缩略图片则转变为展开图片并且将隐藏的内容显示&＃xff0c;以至于达到资源管理器的效果。

全部实现代码&＃xff1a;

[html] view plaincopyprint?
  1. <html>  
  2.     <head>  
  3.         <meta http-equiv&＃61;"Content-Type" content&＃61;"text/html; charset&＃61;GB18030">  
  4.       
  5.   
  6.   
  7.         <script language&＃61;"Javascript">  
  8. function display(id) {  
  9.      eval("var div&＃61;div"&＃43;id);  
  10.      eval("var img&＃61;img"&＃43;id);  
  11.      eval("var im&＃61;im"&＃43;id);  
  12.      div.style.display&＃61;div.style.display&＃61;&＃61;"block"?"none":"block";  
  13.      img.src&＃61;div.style.display&＃61;&＃61;"block"?"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_minus1.gif":"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif";  
  14.      im.src&＃61;div.style.display&＃61;&＃61;"block"?"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/folderopen.gif":"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/folder.gif";  
  15.      img.alt&＃61;div.style.display&＃61;&＃61;"block"?"关闭":"展开";  
  16. }  
  17. script>  
  18.     head>  
  19.     <body class&＃61;"body1" style&＃61;"background-color :#E5E5E5">  
  20.     <div id&＃61;"title" >div>  
  21.         <table>  
  22.             <tr>  
  23.                 <td valign&＃61;"top" nowrap&＃61;"nowrap">  
  24.                     <div>  
  25.                         <img alt&＃61;"展开" style&＃61;"cursor:hand;" onClick&＃61;"display(&＃39;1&＃39;);"  
  26.                             id&＃61;"img1" src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif">  
  27.                         <img id&＃61;"im1" src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/folder.gif">  
  28.                         <a> 根目录a>  
  29.                         <div style&＃61;"display:none;" id&＃61;"div1">  
  30.                             <div style&＃61;"background-image:http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line1.gif">  
  31.                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif" >  
  32.                                 <img alt&＃61;"展开" style&＃61;"cursor:hand;" onClick&＃61;"display(&＃39;2&＃39;);"  
  33.                                     id&＃61;"img2" src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif">  
  34.                                 <img id&＃61;"im2" src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/folder.gif">  
  35.                                 <a>二级目录a>   
  36.                                <div style&＃61;"display:none;" id&＃61;"div2">  
  37.                                     <div>  
  38.                                         <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  39.                                         <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  40.                                         <img alt&＃61;"展开" style&＃61;"cursor:hand;" onClick&＃61;"display(&＃39;3&＃39;);"  
  41.                                             id&＃61;"img3" src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif">  
  42.                                         <img id&＃61;"im3" src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/folder.gif">  
  43.                                         <a>三级目录a>  
  44.                                         <div style&＃61;"display:none;" id&＃61;"div3">  
  45.                                             <div>  
  46.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  47.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  48.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  49.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_minus1.gif">  
  50.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif">  
  51.                                                 <a>题目一a>  
  52.                                             <div>  
  53.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  54.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  55.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  56.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_minus1.gif">  
  57.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif">  
  58.                                                   
  59.                                                 <a>题目二a>  
  60.                                             div>  
  61.                                             <div>  
  62.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  63.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  64.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  65.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_minus1.gif">  
  66.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif">  
  67.                                                 <a>题目三a>  
  68.                                              div>  
  69.                                              <div>  
  70.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  71.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  72.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  73.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_minus2.gif">  
  74.                                                 <img src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif">  
  75.                                                 <a>题目四a>  
  76.                                              div>  
  77.                                             div>  
  78.                                         div>  
  79.                                     div>                     
  80.                                 div>                                  
  81.                             div>  
  82.                         div>  
  83.                     div>  
  84.                 td>  
  85.             tr>  
  86.         table>  
  87.     body>  
  88. html>  














id&＃61;"img1" src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif">

根目录



id&＃61;"img2" src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif">

二级目录




id&＃61;"img3" src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif">

三级目录


实现效果如下:



推荐阅读
  • java

    OC学习笔记之@property和@synthesize

    本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • java

    Nginx使用（server参数配置）

    Nginx使用（server参数配置）
    本文介绍了Nginx的使用，重点讲解了server参数配置，包括端口号、主机名、根目录等内容。同时，还介绍了Nginx的反向代理功能。 ... [详细]
  • java

    手机移动端HTML5和JavaScript如何实现视频上传和压缩视频质量？

    本文讨论了在手机移动端如何使用HTML5和JavaScript实现视频上传并压缩视频质量，或者降低手机摄像头拍摄质量的问题。作者指出HTML5和JavaScript无法直接压缩视频，只能通过将视频传送到服务器端由后端进行压缩。对于控制相机拍摄质量，只有使用JAVA编写Android客户端才能实现压缩。此外，作者还解释了在交作业时使用zip格式压缩包导致CSS文件和图片音乐丢失的原因，并提供了解决方法。最后，作者还介绍了一个用于处理图片的类，可以实现图片剪裁处理和生成缩略图的功能。 ... [详细]
  • java

    VScode格式化文档换行或不换行的设置方法

    VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细]
  • java

    Java实战之电影在线观看系统的实现

    Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述，然后展示了系统的效果图。接着介绍了系统的核心代码，包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明，包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • java

    实现下拉列表，点击其他位置自动隐藏效果的三种方式比较

    目录实现效果：实现环境实现方法一：基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • java

    android listview OnItemClickListener失效原因

    android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ... [详细]
  • java

    如何使用Java获取服务器硬件信息和磁盘负载率

    如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务，并获取服务器的磁盘信息，并将结果输出。然后在本地使用JS编写一个AJAX脚本，远程请求服务端的程序，得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • java

    Voicewo在线语音识别转换jQuery插件的特点和示例

    Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • java

    Java中vector的使用详解

    本文详细介绍了Java中vector的使用方法和相关知识，包括vector类的功能、构造方法和使用注意事项。通过使用vector类，可以方便地实现动态数组的功能，并且可以随意插入不同类型的对象，进行查找、插入和删除操作。这篇文章对于需要频繁进行查找、插入和删除操作的情况下，使用vector类是一个很好的选择。 ... [详细]
  • java

    从零学Java（10）之方法详解，喷打野你真的没我6！

    从零学Java（10）之方法详解，喷打野你真的没我6！
    本文介绍了从零学Java系列中的第10篇文章，详解了Java中的方法。同时讨论了打野过程中喷打野的影响，以及金色打野刀对经济的增加和线上队友经济的影响。指出喷打野会导致线上经济的消减和影响队伍的团结。 ... [详细]
  • java

    [大整数乘法] java代码实现

    [大整数乘法] java代码实现
    本文介绍了使用java代码实现大整数乘法的过程，同时也涉及到大整数加法和大整数减法的计算方法。通过分治算法来提高计算效率，并对算法的时间复杂度进行了研究。详细代码实现请参考文章链接。 ... [详细]
  • java

    Java中闭包的争论以及闭包的定义和特性

    闭包一直是Java社区中争论不断的话题，很多语言都支持闭包这个语言特性，闭包定义了一个依赖于外部环境的自由变量的函数，这个函数能够访问外部环境的变量。本文以JavaScript的一个闭包为例，介绍了闭包的定义和特性。 ... [详细]
  • js

    Day2列表、字典、集合操作详解

    Day2列表、字典、集合操作详解
    本文详细介绍了列表、字典、集合的操作方法，包括定义列表、访问列表元素、字符串操作、字典操作、集合操作、文件操作、字符编码与转码等内容。内容详实，适合初学者参考。 ... [详细]
  • java

    JavaScript与DOM（上）——也适用于新手 – 深入理解JavaScript系列 23

    JavaScript与DOM（上）——也适用于新手 – 深入理解JavaScript系列 23
    本文是《JavaScript深度解析》系列文章第23篇(共51篇）文档对象模 ... [详细]
author-avatar
55525wio
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有