열의 너비를 확인하고 그에 따라 조정하십시오.

특정 열을 유연하게 만들 수있는 브라우저와 CSS를 작성하여 브라우저의 크기가 원래 크기보다 얇아지면 (기본적으로) 유연한 기능이 제거됩니다 . 이 예제에서 잘 작동합니다 : http://dev.driz.co.uk/FlexGrid.html 브라우저의 크기를 조정할 때 빨간색 셀이 화면을 채우거나 고정 폭이되는 창을 볼 때 알 수 있습니다. 왜냐하면 적절한 테이블 레이아웃을 위해 적어도 하나의 100 % 셀이 필요하기 때문입니다.열의 너비를 확인하고 그에 따라 조정하십시오.

비록 내가 가지고있는 문제는 두 개의 유연한 열이 그 중 하나에서 실행되기 전에 다른 (적어도 나는 많은 것으로 생각한다)이며 그 중 하나의 열만이 플렉스 클래스에 다시 추가된다는 것을 의미합니다 . 셀을 제거하는 것이 좋지만 셀이 원본보다 커지면 유연한 상태를 다시 적용 할 수 없습니다. 예 : 여기를 참조하십시오. http://dev.driz.co.uk/FlexGrid2.html

아무도 도와 줄 수 있습니까? 유연한 두 열 모두에서 기능을 수행하도록 코드를 향상시키는 제안을 제시하십시오.

출처

2012-03-28 Cameron

코드가 거의 자리하고 있었지만 잘못된 순서로만 나타났습니다.

updateWidth() 함수 선언을 여러 번 선언하고이 경우 두 번인 클래스 flex을 가진 열의 크기 조정 이벤트를 바인딩하기 전에. 그 결과 이벤트가 하나씩 차례로 실행되었습니다. 그래서 나는 .each() 호출에서 그것을 옮겼습니다. 그 대신에 .each()을 넣으면 이제 작동하는 것 같습니다.

$(document).ready(function() { 

    // function declaration 
    function updateWidth() { 

     $('col.flex').each(function() { 

      var flex = $(this); 

      var original = flex.data('original'); 

      var flexIndex = flex.index() + 1; /* Add 1 because JS and CSS differ with indexes */ 

      var flexCell = $('.uiGrid table tbody td:nth-child(' + flexIndex + ')'); 

      flexCell.css({'background':'#ff0000'}); 

      ////////////////////////////////////////////////////////////// 
      if(flexCell.width() < original) { 
       $('col.flex').removeClass('flex-width'); 
      } 
      else if(flexCell.width() >= original) { 
       $('col.flex').addClass('flex-width'); 
      } 
     }); 

    } 

    // initial call 
    updateWidth(); 

    // subsequent call upon window resize 
    $(window).bind('resize', function() { 
     updateWidth(); 
    }); 

});

플렉스 기능이 작동하려면 다른 클래스를 추가해야했습니다. 열이 항상 유연하고 (flex) 열의 너비를 제어하는 다른 클래스 (flex-width)를 나타내는 하나의 클래스입니다. 즉, 열이 유연한 것으로 표시된다는 사실을 잃지 않고 유연한 너비를 추가/제거 할 수 있습니다.

내가 처음 만들었던 작업을 중단시키지 않았지만 중복 된 또 다른 사소한 코드를 수정하여 이중 jquery 개체를 제거했습니다. 한 예로이었다 http://jsfiddle.net/GoranMottram/TysFf/1/이
참조 데모에 : 다시 열이 많은시 http://jsfiddle.net/GoranMottram/TysFf/1/embedded/result/

출처

2012-03-28 09:46:09

그것은 플렉스 클래스를 다시 추가하지 않습니다

var flex = $(this); // flex is now a jquery object var original = $(flex).data('original'); // flex is turned into a jquery object again

var flex = $(this); // flex is now a jquery object var original = flex.data('original'); // flex is already a jquery object, so can reference it as a var

참조 코드에서

에 ... 클래스가 제거되었으므로 코드가 다시 실행되지 않습니다! 그 중간 열 **은 구부러져서는 안됩니다. 항상 300px 너비 여야합니다. – Cameron

아, 그렇습니다. 나는 그 문제를 해결하기 위해 해답, 코드 및 데모를 업데이트했다. –

환호성 친구가 작동하고있는 것 같습니다. – Cameron

클래스를 추가 및 제거하지 말고 대신 현재 너비로 필터링하고 너비가 최소 너비보다 큰 경우 이전과 같이 열 너비를 조정할 것을 제안합니다. 다음은 간단한 가짜 코드입니다.

if($(flexCell).width() >= original) { 
    adjust width accordingly 
}

희망이 있습니다.

출처

2012-03-28 09:45:49 unfrev

열의 너비를 확인하고 그에 따라 조정하십시오.

답변

관련 문제