分层结构中绘制连接器的非图像解决方案

时间:2011-03-02 03:07:18

标签: html ruby-on-rails css view treeview

我想要做的是创建一个从第二个tr到下面所有tr的连接器,除了最后一个。这是我目前基于图像的解决方案:

http://jsfiddle.net/DmcEB/13/

但是,我不想依赖图像。例如,使用Unicode字符(unicode-search.net/unicode-namesearch.pl?term=bracket)。

环境:Rails,HTML / CSS,原型

2 个答案:

答案 0 :(得分:1)

您可以使用unicode box drawing element添加每个单元格。我更像是一个jQuery人,但我认为Prototype的插入或替换方法可以做到这一点。

此解决方案的唯一问题是,如果您的用户需要选择文本。但是对于大多数浏览器,您可以使用span包装字符并使用CSS来防止选择unicode char。

这样的事情: http://jsfiddle.net/DmcEB/18/

(最后一个元素需要一些修复)

答案 1 :(得分:1)

使用:beforecontent:"",您可以获得纯CSS解决方案。如果客户端可以处理unicode字符:

http://jsfiddle.net/ctrlfrk/DmcEB/19/

以下是框图绘制unicode字符的列表供参考: http://en.wikipedia.org/wiki/Box_drawing_characters