D-tune

2007-09-02

组织架构图（水平方向的树视图）的实现

关键字: 树

现在的YUI-EXT也好，DOJO也好，等等，已经提供了功能极其强大的基于tree的widget。但是类似于组织架构图或者说水平展开的树的UI还是比较少。正好前段时间因为工作的原因做了一个，现发布上来，给需要的朋友和有兴趣的朋友参考。原理说明：无序列表标签本身是含有结构信息的，所以我们要做的只是用css来改变的缺省的垂直布局而已。这个时候，css中float:left发挥了重要作用；另外：我们分别在div和a元素上使用2张不同的背景图片来达创建节点间连接线和掩盖连接线的多余部分。实际效果图：主要html代码： <div id="contain"> <ul i ...