2013-05-23 2 views
2

크기 조정이 가능한 중첩 된 div 두 개가 있습니다. 모든 것이 잘 동작 할 때까지 바깥 쪽 div (세로) 중 하나의 크기를 조정하려고 시도 할 때까지 멈추게됩니다.Jquery 크기 재조정 가능 자동 크기 조정 부모

여기는 fiddle입니다.

$(function() { 
$('.block').resizable(); 
$('.block').resize(resize_handler); 
}); 

function checkChildren(object) { 
$(object).children(".block").each(function (index, item) { 
    var itemH = $(item).position().top + $(item).height(); 
    var itemW = $(item).position().left + $(item).width(); 

    if ($(object).width() < itemW) { 
     $(item).width($(object).width()); 
     checkChildren($(item)); 
    } 
    if ($(object).height() < itemH) { 
     $(item).height($(object).height()); 
     checkChildren($(item)); 
    } 
}); 
} 

function checkParent(e) { 

var object = $(e); 
var par = object.parent(); 

var totalW = object.width() + object.position().left; 
var totalH = object.height() + object.position().top; 

if (totalH > par.height()) { 
    par.height(totalH); 
    checkParent(par); 
} 

if (totalW > par.width()) { 
    par.width(totalW); 
    checkParent(par); 
} 
} 

function resize_handler(e, ui) { 
e.stopPropagation(); 

var object = $(this); 
var par = object.parent(); 

if (par.hasClass("block")) { 
    checkParent(object); 
} 
if (object.children('.block').length > 0) { 
    checkChildren(object); 
} 

} 
+1

문제를보다 구체적으로 정의 할 수 있습니까? "붙어서"라는 뜻은 무엇입니까? –

+0

내가 말하길 바깥 쪽 세로 보드 중 하나가 자식 보드를 치면 크기가 계속됩니다. [link] http://jsfiddle.net/MuGjc/ – frosty

답변

0

물론 이미 생각한 바 있지만 높이가 자식 높이에 너무 가까우면 부모 div의 크기 조정을 제한 할 수 있습니까? 그것이 어린 아이의 가장자리에 닿으 려 할 때 의미하는 것은 더 가까이 오지 못하게하는 것입니다. 어쩌면 몇 픽셀의 자식 주위에 버퍼를 유지하면 사용자가 더 작은 부모를 조정하기 전에 먼저 자식을 조정해야합니다.

그냥 생각해보십시오.

관련 문제