现在的YUI-EXT也好,DOJO也好,等等,已经提供了功能极其强大的基于tree的widget。
但是类似于组织架构图或者说水平展开的树的UI还是比较少。正好前段时间因为工作的原因做了一个,现发布上来,给需要的朋友和有兴趣的朋友参考。
原理说明:无序列表标签本身是含有结构信息的,所以我们要做的只是用css来改变的缺省的垂直布局而已。这个时候,css中float:left发挥了重要作用;另外:我们分别在div和a元素上使用2张不同的背景图片来达创建节点间连接线和掩盖连接线的多余部分。
实际效果图:
主要html代码:
<div id="contain">
<ul id="map" class="solo">
<li><div class="root section"><a href="#">XXXCompany</a></div>
<ul>
<li><div class="first"><a href="#">HR</a></div></li>
<li><div class="section"><a href="#">Development</a></div>
<ul>
<li><div class="first"><a href="#">Department1</a></div></li>
<li><div class="section"><a href="#">Department2</a></div>
<ul>
<li><div class="first"><a href="#">Group1</a></div></li>
<li><div class="last"><a href="#">Group2</a></div></li>
</ul>
</li>
<li><div class="section"><a href="#">Department3</a></div></li>
<li><div class="last"><a href="#">Department4</a></div></li>
</ul>
</li>
<li><div class="last"><a href="#">Administrator</a></div></li>
</ul>
</li>
</ul>
</div>
css代码:
div#contain {
width: 1000em;
background: none;
}
ul#map {
float: none;
margin: 0 auto;
}
ul {
clear: left;
margin: 2em 0 0 0;
padding: 0;
background: #fff;
}
ul ul {
border-top: 1px solid #000;
width: auto;
}
ul.solo {
border-top: 0;
}
li {
float: left;
list-style: none;
position: relative;
}
li li {
margin: -1px 0 0 0;
}
div {
background: url(../images/vLine.gif) 50% repeat-y;
padding: 2em 5px 0 5px;
margin: 0 .3em -2em .3em;
}
div.section {
padding: 2em 5px 2em 5px;
}
div.first {
background: url(../images/first.gif) 50% repeat-y;
margin-left: 0;
}
div.last {
background: url(../images/last.gif) 50% repeat-y;
margin-right: 0;
}
div.root {
padding-top: 0;
}
a {
display: block;
background: #fff;
border: 1px solid #000;
padding: .25em .5em .5em .5em;
color: #222;
text-decoration: none;
margin: 0 auto;
width: 10em;
line-height: 2em;
text-align: center;
font-size: 1.2em;
}
a:hover {
background: #eee;
}
- orgMap.rar (10.6 KB)
- 描述: organization map source(html+css+images)
- 下载次数: 1220
分享到:
相关推荐
数据的精确计算、积分换礼、信息更新和发布、会员之间交流、报表的自动化生成、人 性化的友好界面操作以及牢固的系统架构和安全的数据交换等方向发展,使企业员工提 高工作效率以及规范企业的多层次全方位管理,在...
数据的精确计算、积分换礼、信息更新和发布、会员之间交流、报表的自动化生成、人 性化的友好界面操作以及牢固的系统架构和安全的数据交换等方向发展,使企业员工提 高工作效率以及规范企业的多层次全方位管理,在...
数据的精确计算、积分换礼、信息更新和发布、会员之间交流、报表的自动化生成、人 性化的友好界面操作以及牢固的系统架构和安全的数据交换等方向发展,使企业员工提 高工作效率以及规范企业的多层次全方位管理,在...
数据的精确计算、积分换礼、信息更新和发布、会员之间交流、报表的自动化生成、人 性化的友好界面操作以及牢固的系统架构和安全的数据交换等方向发展,使企业员工提 高工作效率以及规范企业的多层次全方位管理,在...
并且在改变传统的网络和社会结构:网络信息不再是虚假不可验证的,交流和沟通更有明确的选择和方向性,单一的思想和群体的智慧结合变的更加有效,个人出版变成人人都可以实现的梦想—— Blog 正在影响和改变着我们的...
可以依靠数据流图来实现从用户需求到系统需求的过渡。结构化分析就是基于数据流的细化实现的,它是结构化分析方法的关键。 (3)数据关系模型。也称为ER图,是应用最广泛的数据库建模工具。需要通过数据实体、数据...
作为Oracle SQL经典著作之一,本书为SQL开发人员指明了前行的方向,赋予了他们不断开拓的动力。 作者简介 KAREN MORTON 研究人员、教育家及顾问,Fidelity信息服务公司的资深数据库管理员和性能调优专家。她...
� 源代码完全开放,便于开发人员更清楚的把握实现细节,便于提高开发人员的技术水平,有利于开发 出 更具差异性的应用。 � 采用了对有限内存、电池和 CPU 优化过的虚拟机 Dalvik , Android 的运行速度比想象的要...
趋势报告确定缺陷率并提供了一个出色的测试状态视图。在测试生命周期中,缺陷趋势遵循着一种比较好预测的模式。在生命周期的初期,缺陷率增长很快。在达到顶峰后,就随时间以较慢的速率下降。 要发现问题,...