一直感觉CSDN社区的树形结构特别的人性化,直观化。最近做系统的时候需要用到这个树形结构,于是模仿CSDN的树形结构做了一个自己的树形结构,将实现过程记录如下,希望对读者有用。
工欲善其事必先利其器,要模仿一个经典的树形结构就应该参照人家是怎么实现的,这里用到了firebug插件,在firefox中查看了CSDN的树形结构的组成,发现其实树形结构就是一个个的DIV借助img以及背景图片拼凑而成,整理了一下思路发现其实要想达到CSDN的效果也不是很困难。
让我们一步一步的分析
1、首先把用到的图片下载下来,一共15个图片,利用firebug工具可以很轻松的把图片下载(另存为)下来。
2、以上这些图片都是在CSS文件中作为背景图片出现的,其他地方以空白图片填充。
3、然后分析树形结构的组成,首先有一个根目录,然后每个根目录下面有其子目录,也就是说每个子目录开始的时候是隐藏的只有当鼠标点击展开的时候才会显示,在此过程中节点图标以及文件夹图标会变化。
javascript代码:
<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"?"关闭":"展开";
}
</script>
4、当点击展开标签的时候进行判断如果为缩略图片则转变为展开图片并且将隐藏的内容显示,以至于达到资源管理器的效果。
全部实现代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<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"?"关闭":"展开";
}
</script>
</head>
<body class="body1" style="background-color :#E5E5E5">
<div id="title" ></div>
<table>
<tr>
<td valign="top" nowrap="nowrap">
<div>
<img alt="展开" style="cursor:hand;" onClick="display('1');"
id="img1" src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif">
<img id="im1" src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/folder.gif">
<a> 根目录</a>
<div style="display:none;" id="div1">
<div style="background-image:http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line1.gif">
<img src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif" >
<img alt="展开" style="cursor:hand;" onClick="display('2');"
id="img2" src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif">
<img id="im2" src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/folder.gif">
<a>二级目录</a>
<div style="display:none;" id="div2">
<div>
<img src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">
<img src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">
<img alt="展开" style="cursor:hand;" onClick="display('3');"
id="img3" src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif">
<img id="im3" src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/folder.gif">
<a>三级目录</a>
<div style="display:none;" id="div3">
<div>
<img src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">
<img src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">
<img src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">
<img src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_minus1.gif">
<img src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif">
<a>题目一</a>
<div>
<img src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">
<img src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">
<img src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">
<img src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_minus1.gif">
<img src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif">
<a>题目二</a>
</div>
<div>
<img src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">
<img src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">
<img src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">
<img src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_minus1.gif">
<img src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif">
<a>题目三</a>
</div>
<div>
<img src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">
<img src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">
<img src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_line4.gif">
<img src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_minus2.gif">
<img src="http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif">
<a>题目四</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
实现效果如下:
分享到:
相关推荐
android 高仿csdn客户端源码 非常有价值。值得大家学习借鉴。
Java SpringBoot 前后端分离项目高仿CSDN项目源代码(前端Vue+Element UI 后端Java的SpringBoot+Myabtis,数据库Mysql)
导入数据库后 修改表 sq_fz 中的 localhost 为自己的域名, sq_user,为后台用户表 主站后台 /admin ...分站后台 /login_admin ...2016年初学的时候练手的程序,对于小白的初学者可以学习,请勿实际运营!...
仿淘宝安卓客户端的demo源码,主要实现了:商品的基本展示、宝贝详情,图片展示的放大缩小功能、界面之间切换的动画、购物车多项删除、弹窗的动画效果、首页广告的轮播效果、获得本机具有传感器的列表、listView的上...
微信小程序——高仿苹果计算器(截图+源码).zip 微信小程序——高仿苹果计算器(截图+源码).zip 微信小程序——高仿苹果计算器(截图+源码).zip 微信小程序——高仿苹果计算器(截图+源码).zip 微信小程序——...
android实现超高仿微信终极图片选择器,可以实现单选、多选、剪切等功能。网上看到的,觉得不错,就分享出来供大家一起共同分享学习。
高仿小红书轮播图
微信小程序 高仿苹果计算器 (源码)微信小程序 高仿苹果计算器 (源码)微信小程序 高仿苹果计算器 (源码)微信小程序 高仿苹果计算器 (源码)微信小程序 高仿苹果计算器 (源码)微信小程序 高仿苹果计算器 (源码)微信小...
高仿QQ2020 超强模仿能力 真实可以登录qq 墨子谚制作
高仿微信多图选择,相似度达90%
高仿IOS加载数据时圆形的进度条
代码打包后大小是15.3 MB,论坛文件限制大小只有4MB,没办法我只有传到CSDN上,设置下载分5分的原因是设置点障碍,防止新手乱下载,乱转载不注明出处,Android版当时就出现了这样的情况,我是支持大家相互交流的,...
Android 超高仿微信图片选择器完整实例Android 超高仿微信图片选择器完整实例Android 超高仿微信图片选择器完整实例Android 超高仿微信图片选择器完整实例Android 超高仿微信图片选择器完整实例Android 超高仿微信...
Qt QML高仿微信
很适合学习的高仿淘宝Android客户端
高仿我图网源码,精品源码高仿我图网源码,
高仿阴阳师官网轮播图效果的jQuery插件
打造炫目的圆形菜单 秒秒钟高仿建行圆形菜单
仿微信图片选择功能,包括图片选择、编辑、和图片的显示等功能。
2022高仿twitter社区源码推特PHP源码修复版搭建教程 安装环境: Nginx + PHP7.2 + MYSQL 安装配置: 1.上传源码到网站根目录 2.导入数据库文件 sql.sql 3.修改数据库配置文件 4.修改根目录/core/settings.php ...