Question

下面是一个＆＃34; jQuery插件，它在页面的块元素之间使用CSS边框添加可设置样式的连接线，这对于基于Web的思维导图或项目流非常有用。＆＃34;

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

这就是我得到的。请查看以下链接。

Image of my tree

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

代码I使用：

    <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>

我的完整代码是：

＆＃13;

<!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>

＆＃13;

我没有完全得到我应该添加的内容？

解决方案：正如@Brian建议我使用$('.class1').connections();并添加尽可能多的class2，class3，class4等。然后在课堂上我把class="class1 class6"放到任何其他class1和class6上。

example result

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>

然后这个：

$（＆＃39; .class1＆＃39）的连接（）;

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

Answer 2

您可以使用

指定连接应该使用哪个元素

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

然后，您需要使用“th”元素上的类来构建父级＆gt;子关系。

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>

example

编辑：您的代码混乱的原因是因为您触发了连接功能到所有第三个＆＃39;元素。您可以为每个元素指定id，并在调用（element）.connections（{}）时附加选项;如果你想让它单独连接。

使用css border

3 个答案: