jQuery로 크기를 조정할 수있는 요소의 격자 - 이것을 지원하는 라이브러리가 있습니까?

Question

크기를 조정할 수있는 큰 부모 요소 내부에 고정 된 요소의 3x3 격자를 만들려고합니다. 캐치는 9 개의 자식 요소가 항상 부모 공간의 정확히 100 %를 차지하기를 원합니다. 따라서 왼쪽 위 모서리에서 요소의 너비를 늘리면 같은 행의 두 요소가 크기를 줄여야합니다. 예를 들어,

A B C 
D E F 
G H I 

위의 표에서 각 문자는 30x30 픽셀이라고 가정 해 보겠습니다. 드래그 크기를 조정하고 너비를 60px로 늘리면 B와 C가 각각 15px 감소 할 것으로 예상됩니다.

물론 이것은 기본 jQuery UI를 사용하여 수행 할 수 있습니다. resizable() 초기화에서 각 하위에 포함 매개 변수를 설정하면 부모 내에서 모두 바인딩됩니다. 요소가 변경 될 때마다 발생하는 크기 조정 이벤트를 검사하여 인접한 각 자식이 이동해야하는시기를 결정할 수도 있습니다. 것은 매우 복잡한 알고리즘입니다. 그것은 가능하지만 많은 일이 있습니다. 휠을 재발견하기 전에이 작업을 지원하는 라이브러리/플러그인이 존재하는지 또는 누구나 비슷한 오픈 소스 프로젝트에 대한 지식이 있는지 확인하고 싶었습니다.

감사합니다.

Answer 1

Havent는 이러한 프레임 워크를 보았지만 흥미로운 아이디어처럼 들립니다. 다른 문자가 어떻게 적절하게 작동해야하는지 등 고려해야 할 사항이 많이 있습니까?

조금 종료 :

$('.row div:odd').css('background','blue'); 

    $('div').click(function(){ 

     var orgWidth = $(this).width(); 
     $(this).width(orgWidth+100); 

     var gridwith = $(this).parent().width(); 
     var columns = 3; 
     var importantClass = '.'+$(this).attr('class'); 
     var resizeTo = $(this).width(); 

     var columnsWidth = (gridwith-resizeTo)/(columns-1); 

     $(this).parent().children().not(importantClass).width(columnsWidth); 

     return false; 
    }); 

그리고

<div class="row"> 
    <div class="col1"></div> 
    <div class="col2"></div> 
    <div class="col3"></div> 
</div> 
<div class="row"> 
    <div class="col4"></div> 
    <div class="col5"></div> 
    <div class="col6"></div> 
</div> 
<div class="row"> 
    <div class="col7"></div> 
    <div class="col8"></div> 
    <div class="col9"></div> 
</div> 

그리고

.row {width:600px; overflow:auto; divst-style:none;} 
    .row div {float:left; width:200px; height:200px; background:red;} 
    .row div.odd {background:blue;} 

어떻게 될지 통해 UR consindering에 그 함수?