2014-09-24 2 views
0

최근에 jsPlumb을 사용하여 클라이언트 용 UI를 만들기 시작했지만 해결할 수없는 두 가지 문제가 발생했습니다. 여기일부 jsPlumb 문제

jsFiddle : http://jsfiddle.net/ugxopksz/

내가 창 크기를 조정할 때 첫 번째는 내 엔드 포인트와 다시 칠하고 있지 연결합니다. 이 일이 진행되고있는 사이트에는 반응 형 디자인이 포함되어 있습니다. 나는 모든 일을 시도했다.

$(window).resize(function(){ 
    jsPlumb.repaintEverything(); 
}); 

그러나 그것은 헛소리를하지 않는다. 나는 그것으로부터 오류를 얻지 않지만 전혀 아무것도하지 않는다.

두 번째 문제점은 어쨌든 하나의 연결에 하나 이상의 소스를 지정할 수 없다는 것입니다. 나는 약간의 배열을 선언하고 배열의 각 요소에 대한 코드의 블록을 만들 것입니다 루프를 만들 수 있습니다하지 않는 한

instance.connect({ 
     source:"oneT", 
     target:"center", 
     anchor:[[1, 0.5, 0, 0, 0, 80], [0, 0.5, 0, 0, 7, -40]] 
}); 

:처럼 뭔가. 내가 찾고있는 이유는이 UI가 데이터베이스에서 당겨지고 각각의 바깥 쪽 요소를 만드는 것입니다. 데이터베이스 변경이 발생하면 처리 할 수 ​​있기를 바랄 수 있습니다. 이동하여 수동으로 추가 할 필요가 없습니다. 새로운 요소.

도움을 주시면 감사하겠습니다. 첫 번째 질문에 대한

답변

0

:

리스트 요소 (리튬 태그)의 사용을 만들기는 연결을 위해 바람직하지 않다. 대신 div 요소를 만들고 시도해 볼 수 있습니다. li 태그의 위치가 올바르지 않기 때문에 창 크기를 다시 그리는 데 실패합니다. Doc's에서 위치 절대 값을 갖는 요소는 모든 조건에서 정상적으로 작동합니다.

DIV 요소를 연결하고 크기 조정 창에서 다시 칠하기 옵션을 보려면 FIDDLE을보십시오. 당신 이후

var trg = 'center'; 
var src = ['oneT','twoT','threeT'];  

for(var i=0;i<src.length;i++) 
{ 
    jsPlumb.connect({ 
       source: src[i], 
       target: trg, 
       connector: [ "Flowchart", {cornerRadius:1} ], 
       paintStyle:{ lineWidth:5, strokeStyle:'#3E2522' }, 
       anchors: [[1.02, 0.5, 0, 1], 
        [-0.02, 0.5, 0, 0]], 
       endpointStyle: { radius:0.5 } 
    }) 
} 
+0

에 다음 줄

jsPlumb.repaintEverything(); 

변경 응답 주셔서 감사합니다. 이 콘텐츠가 추가되고 제거 될 것이라는 생각을 유지하면서 div가 작동하는 방식을 살펴 보겠습니다. 나는 jsPlumb을 상대로 일하는 것보다 더 나을 것이라고 생각합니다. – Shaazaam

+0

마침내 제안을 완전히 이행 할 시간이되었습니다. 모든 것이 훌륭하게 작동하지만 여전히 재 칠하지 않습니다. 나는 divs로 변경하고 그들에게 모든 절대 위치를 주었다. 그 (것)들을 배치하기 위하여 백분율을 사용하는 것은 저것에 대하여 작동하고 있습니까? – Shaazaam

+0

jsfiddle 링크의 업데이트. – MrNobody

2

: 당신이 루프 그들보다 다른 선택이 없다, 그래서 지금 jsPlumb이 같은 배열의 소스 매개 변수에 대해 여러 아이디의를 지원하지 않습니다에 대한

: 두 번째 질문에 대한

동일한 인스턴스를 사용하여 jsPlumb 구성 요소를 다시 그려야하는 별도의 jsPlumb 인스턴스를 사용하여 연결을 만들었습니다.

instance.repaintEverything(); 

Click here for updated jsFiddle link