热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

高仿CSDN社区树形图.

一直感觉CSDN社区的树形结构特别的人性化,直观化。最近做系统的时候需要用到这个树形结构,于是模仿CSDN的树形结构做了一个自己的树形结构,

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

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

让我们一步一步的分析

1、首先把用到的图片下载下来,一共15个图片,利用firebug工具可以很轻松的把图片下载(另存为)下来。

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

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

Javascript代码:

[Javascript] view plaincopyprint?
  1.           



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

全部实现代码:

[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">

三级目录









实现效果如下:



推荐阅读
  • 在 Linux 环境下,多线程编程是实现高效并发处理的重要技术。本文通过具体的实战案例,详细分析了多线程编程的关键技术和常见问题。文章首先介绍了多线程的基本概念和创建方法,然后通过实例代码展示了如何使用 pthreads 库进行线程同步和通信。此外,还探讨了多线程程序中的性能优化技巧和调试方法,为开发者提供了宝贵的实践经验。 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • JavaScript XML操作实用工具类:XmlUtilsJS技巧与应用 ... [详细]
  • 2018年9月21日,Destoon官方发布了安全更新,修复了一个由用户“索马里的海贼”报告的前端GETShell漏洞。该漏洞存在于20180827版本的某CMS中,攻击者可以通过构造特定的HTTP请求,利用该漏洞在服务器上执行任意代码,从而获得对系统的控制权。此次更新建议所有用户尽快升级至最新版本,以确保系统的安全性。 ... [详细]
  • 本文详细探讨了Zebra路由软件中的线程机制及其实际应用。通过对Zebra线程模型的深入分析,揭示了其在高效处理网络路由任务中的关键作用。文章还介绍了线程同步与通信机制,以及如何通过优化线程管理提升系统性能。此外,结合具体应用场景,展示了Zebra线程机制在复杂网络环境下的优势和灵活性。 ... [详细]
  • 深入解析HTML5字符集属性:charset与defaultCharset
    本文将详细介绍HTML5中新增的字符集属性charset和defaultCharset,帮助开发者更好地理解和应用这些属性,以确保网页在不同环境下的正确显示。 ... [详细]
  • 开机自启动的几种方式
    0x01快速自启动目录快速启动目录自启动方式源于Windows中的一个目录,这个目录一般叫启动或者Startup。位于该目录下的PE文件会在开机后进行自启动 ... [详细]
  • 利用REM实现移动端布局的高效适配技巧
    在移动设备上实现高效布局适配时,使用rem单位已成为一种流行且有效的技术。本文将分享过去一年中使用rem进行布局适配的经验和心得。rem作为一种相对单位,能够根据根元素的字体大小动态调整,从而确保不同屏幕尺寸下的布局一致性。通过合理设置根元素的字体大小,开发者可以轻松实现响应式设计,提高用户体验。此外,文章还将探讨一些常见的问题和解决方案,帮助开发者更好地掌握这一技术。 ... [详细]
  • PHP预处理常量详解:如何定义与使用常量 ... [详细]
  • CTF竞赛中文件上传技巧与安全绕过方法深入解析
    CTF竞赛中文件上传技巧与安全绕过方法深入解析 ... [详细]
  • 本文探讨了如何通过检测浏览器类型来动态加载特定的npm包,从而优化前端性能。具体而言,仅在用户使用Edge浏览器时加载相关包,以提升页面加载速度和整体用户体验。此外,文章还介绍了实现这一目标的技术细节和最佳实践,包括使用User-Agent字符串进行浏览器识别、条件加载策略以及性能监控方法。 ... [详细]
  • 在使用 iframe 嵌入外部页面时,经常会遇到页面加载不同步的问题。当嵌入的页面响应较慢时,这种异步加载会导致用户体验不佳。本文介绍了如何通过监听 iframe 加载完成的事件来解决这一问题,并提出了针对双滚动条问题的有效解决方案,以提升整体的用户体验和页面加载效率。 ... [详细]
  • HTML5 Web存储技术是许多开发者青睐本地应用程序的重要原因之一,因为它能够实现在客户端本地存储数据。HTML5通过引入Web Storage API,使得Web应用程序能够在浏览器中高效地存储数据,从而提升了应用的性能和用户体验。相较于传统的Cookie机制,Web Storage不仅提供了更大的存储容量,还简化了数据管理和访问的方式。本文将从基础概念、关键技术到实际应用,全面解析HTML5 Web存储技术,帮助读者深入了解其工作原理和应用场景。 ... [详细]
  • 定义Function类型:1functionsum(num1,num2){return num1+num2;}2varsumfunction(num1,num2){returnn ... [详细]
  • 开发工具WebDeveloper1.1.8https:addons.mozilla.orgen-USfirefoxaddon60以工具栏的形式对网页的(X)HTML、脚本、多媒体、 ... [详细]
author-avatar
55525wio
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有