使用 css 边框在 div 之间画线

Question

下面这个是"jQuery plugin that adds stylable connecting lines using CSS border among block elements of your page, which is good for web based mind map or project flow."

我试图使用它，但当我使用它时，它会将每个盒子连接到每个盒子。我不能将一个连接到另一个或将一个连接到另外两个吗？

这就是我得到的。请查看下面的 link。

http://www.jqueryscript.net/layout/Add-Connecting-Lines-Between-Block-Elements-Connections.html

我使用的代码：

    <table>
    <td/>
    <td/>
<th>example
    <tr>
    <td/>
    <th>example</th>
    <td/>
    <td/>
    <th>example</th>
    </tr>
<th>example</th>
    <td/>
    <td/>
    <td/>   
    <td/>
    <th>example</th>
<tr>
    <td/>
    <td/>
<th>example</th>
</tr>
</table>

我的完整代码是：

<!doctype html>

<style>
 th {
  width: 64px;
  height: 64px;
  background: white;
  border: 1px solid black;
  border-radius: 15px;
 }
 connection {
  border: 7px solid black;
  border-radius: 31px;
 }
</style>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="../jquery.connections.js"></script>
<script>
 $(document).ready(function() {
  $('th').connections();
 });
</script>

<table>
    <td/>
    <td/>
    <th>example
        <tr>
            <td/>
        <th>example</th>
<td/>
<td/>
<th>example</th>
</tr>
<th>example</th>
<td/>
<td/>
<td/>   
<td/>
<th class="class1">example</th>
<tr>
<td/>
<td/>
<th class="class1">example</th>
</tr>
</table>

<script language="javascript">
    window.location.href = "/index.html"
</script>

我不完全明白我应该添加什么？

解决方法：正如@Brian 建议的那样，我使用了 $('.class1').connections(); 并根据需要添加了 class2、class3、class4 等。然后在 class 中我放了 class="class1 class6" ，它会画一条线到任何其他 class1 和 class6.

Answer 1

根据文档，您应该可以这样做：

<table>
    <td/>
    <td/>
    <th>example
        <tr>
            <td/>
        <th>example</th>
<td/>
<td/>
<th>example</th>
</tr>
<th>example</th>
<td/>
<td/>
<td/>   
<td/>
<th class="class1">example</th>
<tr>
<td/>
<td/>
<th class="class1">example</th>
</tr>
</table>

然后是这个：

$('.class1').connections();

如果您使用他们列出的代码调用它，它会将 css 应用于所有标签，以便连接每个框。

Answer 2

您可以使用

指定连接应该转到哪个元素

$('th').connections({ to: '.class1' }); or 
$('.child').connections({ to: '.class1' });

然后您需要在 'th' 元素上使用类来构建父->子关系。

Answer 3

你有一个乱码。我相信这就是您要实现的目标：

<!doctype html>

<style>
    .block {
        width: 64px;
        height: 64px;
        background: white;
        border: 1px solid black;
        border-radius: 15px;
    }
    connection {
        border: 7px solid black;
        border-radius: 31px;
        z-index: -999;
    }
</style>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.connections.js"></script>
<script>
    $(document).ready(function() {
        $('#1').connections({
          to: '#5',
        });
        $('#4').connections({
          to: '#3',
        });
        $('#2').connections({
          to: '#6',
        });
    });
</script>

<table>
    <tr>
        <td></td>
        <td></td>
        <td id="1" class="block">example</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td id="2" class="block">example</td>
        <td></td>
        <td id="3" class="block">example</td>
        <td></td>       
    </tr>
    <tr>
        <td id="4" class="block">example</td>
        <td></td>
        <td></td>
        <td></td>   
        <td id="5" class="block">example</td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td id="6" class="block">example</td>
        <td></td>
        <td></td>
    </tr>
</table>

编辑：您的代码搞砸的原因是因为您触发了所有 'th' 元素的连接功能。您可以为每个元素分配 ID，并在调用 (element).connections({ }); 时附加选项如果您希望它单独连接。

使用 css 边框在 div 之间画线

Draw lines between divs using css border

css

connection

jquery

border

line