CSS 테두리를 사용하여 div 사이에 선 그리기

새미 7

아래는 "웹 기반 마인드 맵이나 프로젝트 흐름에 좋은 페이지의 블록 요소 사이에 CSS 테두리를 사용하여 스타일링 가능한 연결선을 추가하는 jQuery 플러그인"입니다.

사용하려고했지만 사용하면 모든 상자를 모든 상자에 연결합니다. 그냥 서로 연결하거나 다른 하나를 연결할 수는 없습니다.

이것이 내가 얻는 것입니다. 아래 링크를 확인하세요.

내 나무의 이미지

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>

내가 추가해야 할 것을 정확히 얻지 못합니까?

솔루션 : $('.class1').connections();@Brian이 제안했듯이 class2, class3, class4 등 필요한만큼 사용 하고 추가했습니다. 그런 다음 th 클래스에서 class="class1 class6"다른 class1과 class6에 선을 그을 것입니다.

예시 결과

브라이언

문서에서 다음을 수행 할 수 있어야합니다.

<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를 적용하여 모든 상자를 연결합니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

CSS에서 클립 경로를 사용하는 곡선 테두리

분류에서Dev

Vue-Split-Panel 및 선택 테두리를 사용하여 Vuetify의 응답성에 대한 CSS 문제

분류에서Dev

ggplot에서 그룹을 사용하여 점 사이에 선 그리기

분류에서Dev

PIL을 사용하여 사각형 내부에 선 그리기

분류에서Dev

CSS를 사용하여 요소에 대한 테두리 높이 조정

분류에서Dev

CSS를 사용하여 더 많은 div 테두리를 선명하게하는 방법은 무엇입니까?

분류에서Dev

계수를 사용하여 ggplot에서 곡선 그리기

분류에서Dev

CSS 그리드를 사용하여 이미지를 기준선에 정렬

분류에서Dev

lineplot을 사용하여 seaborn으로 두 개의 선 그리기

분류에서Dev

팬더를 사용하여 그룹별로 선 그리기

분류에서Dev

마스크를 사용하여 div의 사용자 정의 하단 테두리

분류에서Dev

CSS 선택기를 사용하여 div (괄호를 나타냄)에 수직 및 수평선 추가

분류에서Dev

두 점 사이에 직선 그리기

분류에서Dev

SKShapeNode 및 CGPath를 사용하여 Sprite Kit에 파선 그리기

분류에서Dev

UIPinchGeustureRecognizer를 사용하여 선 그리기

분류에서Dev

CSS에서 선형 그래디언트를 사용하여 div를 두 가지 색상으로 분할하지만 동일한 절반이 아닙니다.

분류에서Dev

jquery를 사용하여 나선형 그리기-스폿 거리

분류에서Dev

jquery를 사용하여 나선형 그리기-스폿 거리

분류에서Dev

CSS 의사 선택기를 사용하여 리본 모양 만들기

분류에서Dev

CSS를 사용하여 오른쪽 테두리 회전

분류에서Dev

CSS를 사용하여 오른쪽 테두리 회전

분류에서Dev

CSS 선택기를 사용하여 div에서 태그없이 텍스트를 선택하는 방법은 무엇입니까?

분류에서Dev

CSS를 사용하여 선택한 요소 그룹에 위쪽 및 아래쪽 테두리 추가

분류에서Dev

for 루프를 사용하여 테두리 그리기

분류에서Dev

CSS를 사용하여 div의 대각선 상단 만들기

분류에서Dev

캔버스를 사용하여 PlotGrid에서 Delphi 그리기 선

분류에서Dev

CSS 테두리에서 여러 그라디언트 광선

분류에서Dev

HTML에서 두 div 사이에 선을 그리는 방법

분류에서Dev

HTML 테이블에서 행 사이의 테두리를 숨기고 CSS를 사용하여 열 사이의 테두리 만 표시하는 방법

Related 관련 기사

  1. 1

    CSS에서 클립 경로를 사용하는 곡선 테두리

  2. 2

    Vue-Split-Panel 및 선택 테두리를 사용하여 Vuetify의 응답성에 대한 CSS 문제

  3. 3

    ggplot에서 그룹을 사용하여 점 사이에 선 그리기

  4. 4

    PIL을 사용하여 사각형 내부에 선 그리기

  5. 5

    CSS를 사용하여 요소에 대한 테두리 높이 조정

  6. 6

    CSS를 사용하여 더 많은 div 테두리를 선명하게하는 방법은 무엇입니까?

  7. 7

    계수를 사용하여 ggplot에서 곡선 그리기

  8. 8

    CSS 그리드를 사용하여 이미지를 기준선에 정렬

  9. 9

    lineplot을 사용하여 seaborn으로 두 개의 선 그리기

  10. 10

    팬더를 사용하여 그룹별로 선 그리기

  11. 11

    마스크를 사용하여 div의 사용자 정의 하단 테두리

  12. 12

    CSS 선택기를 사용하여 div (괄호를 나타냄)에 수직 및 수평선 추가

  13. 13

    두 점 사이에 직선 그리기

  14. 14

    SKShapeNode 및 CGPath를 사용하여 Sprite Kit에 파선 그리기

  15. 15

    UIPinchGeustureRecognizer를 사용하여 선 그리기

  16. 16

    CSS에서 선형 그래디언트를 사용하여 div를 두 가지 색상으로 분할하지만 동일한 절반이 아닙니다.

  17. 17

    jquery를 사용하여 나선형 그리기-스폿 거리

  18. 18

    jquery를 사용하여 나선형 그리기-스폿 거리

  19. 19

    CSS 의사 선택기를 사용하여 리본 모양 만들기

  20. 20

    CSS를 사용하여 오른쪽 테두리 회전

  21. 21

    CSS를 사용하여 오른쪽 테두리 회전

  22. 22

    CSS 선택기를 사용하여 div에서 태그없이 텍스트를 선택하는 방법은 무엇입니까?

  23. 23

    CSS를 사용하여 선택한 요소 그룹에 위쪽 및 아래쪽 테두리 추가

  24. 24

    for 루프를 사용하여 테두리 그리기

  25. 25

    CSS를 사용하여 div의 대각선 상단 만들기

  26. 26

    캔버스를 사용하여 PlotGrid에서 Delphi 그리기 선

  27. 27

    CSS 테두리에서 여러 그라디언트 광선

  28. 28

    HTML에서 두 div 사이에 선을 그리는 방법

  29. 29

    HTML 테이블에서 행 사이의 테두리를 숨기고 CSS를 사용하여 열 사이의 테두리 만 표시하는 방법

뜨겁다태그

보관