D-tune

现在的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;
}