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

Posted

技术标签:

【中文标题】在层次结构中绘制连接器的非图像解决方案【英文标题】:Non-image solution to drawing connectors in hierarchical structure 【发布时间】:2011-03-02 03:07:17 【问题描述】:

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

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

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

环境:Rails、html/CSS、原型

【问题讨论】:

【参考方案1】:

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

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

类似这样的: http://jsfiddle.net/DmcEB/18/

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

【讨论】:

【参考方案2】:

使用:beforecontent:"" 可以获得纯CSS 解决方案。前提是客户端可以处理 unicode 字符:

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

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

【讨论】:

以上是关于在层次结构中绘制连接器的非图像解决方案的主要内容,如果未能解决你的问题,请参考以下文章