高仿CSDN社区树形图 - 一个2年工作经验的程序测试员 - ITeye博客

`

lilai

浏览: 308600 次

最近访客更多访客>>

xuhuanfeng

所思在远道

jimmy_ji

tly_123

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

2012-08 ( 45)
2012-07 ( 60)
2012-06 ( 52)
更多存档...

最新评论

finallygo： Sorted Set 实现的有点问题吧,怎么没有传入score ...
Java版的Redis
laoqian9527：楼主你的客户群都淘汰了2003吗？
poi3.8操作word,动态添加文字
w156445045：这是用的浏览器右键的那个导出的功能嘛？
jsp页面导出成word文件
youc3576：来个完整版的么哥们
hibernate - 多对多关联关系
lilai： ...
Ajax原理

高仿CSDN社区树形图

阅读更多

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

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

让我们一步一步的分析

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

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

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

javascript代码：

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>

实现效果如下:

分享到：

哲理故事与管理之道(17)-将目标进行细化 | 哲理故事与管理之道(16)-目标明确才有足够 ...

2012-03-14 00:45
浏览 731
评论(0)
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

高仿 csdn客户端源码: 【描述】"android 高仿csdn客户端源码非常有价值。值得大家学习借鉴。"这部分描述强调了该源码的实用性和教育意义。对于Android开发者来说，通过研究这个源码，可以学习到如何实现用户界面的布局设计、网络请求处理...

Java SpringBoot 前后端分离项目高仿CSDN项目源代码（前端Vue+Element UI 后端Java的Sprin: 本项目是一个基于Java SpringBoot框架和前端Vue.js的前后端分离实战项目，旨在高仿知名的开发者社区CSDN。这个项目对于学习者来说是一个理想的结课作业，因为它涵盖了多个技术栈，提供了完整的开发流程体验。首先...

高仿亿乐社区源码: 导入数据库后修改表 sq_fz 中的 localhost 为自己的域名， sq_user,为后台用户表主站后台 /admin ...分站后台 /login_admin ...2016年初学的时候练手的程序，对于小白的初学者可以学习，请勿实际运营！...

高仿淘宝客户端: 仿淘宝安卓客户端的demo源码，主要实现了：商品的基本展示、宝贝详情，图片展示的放大缩小功能、界面之间切换的动画、购物车多项删除、弹窗的动画效果、首页广告的轮播效果、获得本机具有传感器的列表、listView的上...

微信小程序——高仿苹果计算器（截图+源码）.zip: 微信小程序——高仿苹果计算器（截图+源码）.zip 微信小程序——高仿苹果计算器（截图+源码）.zip 微信小程序——高仿苹果计算器（截图+源码）.zip 微信小程序——高仿苹果计算器（截图+源码）.zip 微信小程序——...

PHP亿乐社区源码一比一高仿全开源源码.zip: PHP亿乐社区源码一比一高仿全开源源码.zip

高仿QQ2020: 【标题】"高仿QQ2020"是一款模拟腾讯QQ功能的应用程序，它具有高度模仿腾讯QQ的设计和功能，旨在提供与官方QQ相似的用户体验。这个应用由开发者墨子谚精心制作，力求在视觉效果和操作体验上尽可能接近原版QQ。 ...

android实现超高仿微信终极图片选择器: "android实现超高仿微信终极图片选择器"项目就是一个致力于满足这一需求的开源解决方案。下面我们将深入探讨这个项目的各个关键知识点。 1. **图片选择器的设计** - **多模式选择**：该选择器支持单选和多选两种...

微信小程序高仿苹果计算器 (源码): 微信小程序高仿苹果计算器 (源码)微信小程序高仿苹果计算器 (源码)微信小程序高仿苹果计算器 (源码)微信小程序高仿苹果计算器 (源码)微信小程序高仿苹果计算器 (源码)微信小程序高仿苹果计算器 (源码)微信小...

Android应用源码之高仿微信.zip: "Android应用源码之高仿微信"是一个关于Android开发的项目，旨在模仿微信这款流行的社交应用程序的功能和界面。这个标题表明我们将会深入到Android应用的开发细节中，学习如何构建一个类似微信的用户界面和交互逻辑...

android 高仿微信图片选择: 在Android开发中，实现“高仿微信图片选择”功能是一项常见的需求，这涉及到用户界面设计、多媒体处理以及图片加载优化等多个技术领域。以下是对这个功能的详细解释： 1. **图片选择器**： - 用户界面（UI）设计：...

高仿版百度地图基于iOS SDK v2.5.0，功能完善！: 代码打包后大小是15.3 MB，论坛文件限制大小只有4MB，没办法我只有传到CSDN上，设置下载分5分的原因是设置点障碍，防止新手乱下载，乱转载不注明出处，Android版当时就出现了这样的情况，我是支持大家相互交流的，...

高仿微信多图选择: "高仿微信多图选择"是一个专为Android或iOS平台设计的功能模块，旨在提供与微信相似的多张图片选择体验，其相似度高达90%。这个功能允许用户在相册中快速、方便地选取多张图片，以便分享到朋友圈、发送给朋友或用于...

2022高仿twitter社区推特PHP源码修复版: 2022高仿twitter社区源码推特PHP源码修复版搭建教程安装环境： Nginx + PHP7.2 + MYSQL 安装配置： 1.上传源码到网站根目录 2.导入数据库文件 sql.sql 3.修改数据库配置文件 4.修改根目录/core/settings.php ...

ios-高仿小红书轮播图.zip: 在iOS开发中，"高仿小红书轮播图"是一个常见的需求，它涉及到滚动视图（UIScrollView）的使用和自定义。小红书作为一款流行的社交媒体应用，其轮播图设计独特，不仅包含了图片的滑动展示，还可能包括文字、按钮等...

Android 超高仿微信图片选择器完整实例源码下载（源码+文档）.zip: Android 超高仿微信图片选择器完整实例Android 超高仿微信图片选择器完整实例Android 超高仿微信图片选择器完整实例Android 超高仿微信图片选择器完整实例Android 超高仿微信图片选择器完整实例Android 超高仿微信...

Qt QML高仿微信: 【Qt QML高仿微信】 Qt QML是一种用于构建用户界面的技术，它是Qt框架的一部分，专为快速开发、高效性能和跨平台应用设计。在"Qt QML高仿微信"项目中，开发者利用Qt QML的灵活性和强大的图形功能来创建类似微信的...

高仿cnode社区版小程序源码.zip: 【标题】"高仿cnode社区版小程序源码.zip" 提供的是一个针对cnode社区的高仿微信小程序的源代码。cnode社区是中国最大的Node.js技术讨论区，而这个项目则是开发者为了学习和理解微信小程序开发，以及模仿cnode社区的...

PHP亿乐社区源码高仿全开源: 1.打开system/data.php配置自己的数据库，下面还有一个域名要改这个的，这个域名就是总控域名 2.导入我打包的数据库 3.清除自己的浏览器缓存就可以打开了后台/admin 账号3301200869 密码123456

ios-高仿小红书的图片选择器.zip: 高仿小红书的图片选择器可进行放缩拖动裁剪、而且可以设置获取图片的比例范围使用简单代码简洁易懂。最新版请访问github：https://github.com/wuningAlen/WNImagePicker

Global site tag (gtag.js) - Google Analytics