JQuery - 슬라이더를 사용하여 여러 div 너비 조절하기

Question

저는 지난 몇 주 동안 커스텀 테이블 컨트롤 작업을 해왔고 이제는 JQuery Slider 함수를 통합하여 행의 크기를 늘리거나 줄일 수 있습니다 .

• 내가 $('.divClass').css({ 'transform': 'scale()' })를 사용했지만, 규모는 수평면의 양쪽 수직 평면의 양쪽에 크기가 증가하고, 따라서 뒤에에 오버 플로우 :

  은 내가 시도 무엇 표.

• 슬라이더의 ui.value에서 변경되는 변수에 너비의 값을 할당한다고 생각했지만 시도해 보았을 때 제대로 작동하는 것과 정반대로 작동했습니다.

$("#slider").slider({ 
    value: 50, 
    min: 50, 
    max: 100, 
    step: 1, 
    slide: function (event, ui) { 

     $('.divBodyView').find('.divRow').css('height', ui.value) 
     $('.divBodyView').find('.divRow').find('.divCell').css('height', ui.value/1.25) 
     $('.divBodyView').css('font-size', ui.value/3) 

     $('.divBodyView').find('.divRow').find('.divCellPicture').css('height', ui.value/1.5) 
     $('.divBodyView').find('.divRow').find('.divCellPicture').css('padding-top', ui.value/10) 

    } 
}); 

지금이 다소 잘 작동 : 그 실패 후

, 나는 다음이 거대한 혼란을했다. 어떤 의미에서. 그러나 나는이 표에 여러 개의 '열'이 있고 각 열은 사용자 정의 너비라는 사실로 고민하고 있습니다.

즉 : [PICTURE: 50px]---[ID: 100px]---[DESCRIPTION: 250px]---[ASSIGNED TO: 125px] 이제

, 나는 그들이 현재 보유 값을 기준으로 모든 의 값을 변경 가겠어요 어떻게? 기본적으로 행을 20px 늘리면 "Picture : 70px, ID : 120px, 설명 : 270px, 할당 대상 : 145px"가됩니다.

미리 도움을 주셔서 감사합니다.

Answer 1

에만이를 사용하여 첫 번째 열을 확장 시도 할 수 :

$('.divBodyView').find('.divRow').find('.divCell:first').css('width', ui.value) 

그렇지 않으면 당신이 도움 비율 변수와 함께