jQuery의 등호 열

Question

안녕하세요 저는 동등한 높이의 열을 기반으로하는 jQuery를 찾고 있습니다. 나는 그들 주위에 떠 다니는 많은 것들을 알고 있지만, 나의 요구 사항은 약간 다르다. 나는 당신이 약 4-5 드롭 다운이고 각 드롭 다운이 3-4 컬럼 인 메가 메뉴에서 이것을 사용하고 싶습니다.

이러한 높이의 모든 3-4 열을 원하지만 모든 드롭 다운에는 필요하지 않습니다. 왜냐하면 해당 높이의 열 높이는 해당 구역의 내용에 따라 다른 드롭 다운에서 달라지기 때문입니다.

내 요구 사항에 완벽하게 부합되는 MooTools의 솔루션을 발견했습니다. Mootools의 코드는 아래에 동일한 특정 사업부의 모든 열이

Mootools의 코드 부모 DIV의 높이의 수 :

var Equalizer = new Class({ 
initialize: function(elements) { 
    this.elements = $$(elements); 
}, 
equalize: function(hw) { 
    if(!hw) { hw = 'height'; } 
    var max = 0, 
    prop = (typeof document.body.style.maxHeight != 'undefined' ? 'min-' : '') + hw; //ie6 ftl 
    offset = 'offset' + hw.capitalize(); 
    this.elements.each(function(element,i) { 
    var calc = element[offset]; 
    if(calc > max) { max = calc; } 
    },this); 
    this.elements.each(function(element,i) { 
    element.setStyle(prop,max - (element[offset] - element.getStyle(hw).toInt())); 
    }); 
    return max; 
} 
}); 

사용법 :

var columnizer = new Equalizer('.sizeMe').equalize('height'); //call .equalize() as often as you want! 

누군가가 나를 도울 수 jQuery에서이 코드를 변환하십시오. 실제로 내 전체 템플릿은 jQuery를 기반으로하며이 같은 높이 함수에 대해서만 다른 JavaScript 라이브러리를로드하고 싶지 않습니다.

친절히 도움!

Answer 1

유용 할 것 같아서 jQuery 플러그인으로 작성했다.

데모 : http://jsfiddle.net/AXqBb/

equalizer.js :

(function($) { 
    String.prototype.capitalize = function() { 
     return this.replace(/^(.)/, function (c) { return c.toUpperCase(); }) 
    }; 

    $.fn.equalize = function(hw) { 
     if (!hw) { 
      hw = 'height'; 
     } 

     var max = 0; 
     var prop = (typeof document.body.style.maxHeight != 'undefined' ? 'min' + hw.capitalize() : hw); 
     var offset = 'offset' + hw.capitalize(); 

     this.each(function() { 
      var calc = parseInt(this[offset]); 
      if (calc > max) { 
       max = calc; 
      } 
     }); 

     this.each(function() { 
      $(this).css(prop, max - (parseInt(this[offset]) - $(this)[hw]())); 
     }); 

     return max; 
    }; 
})(jQuery); 

과 같이 호출 : 당신이 가능한 게시 된 것과 유사한 코드를 유지 한

var maxHeight = $('.sizeMe').equalize('height'); 

, 그래서 변경 사항을 볼 수 있기 때문에 나쁜 스타일에 사과드립니다. 원래 작성자에게 귀속되기를 바랍니다. ;-)

NB. 이 코드 내에서 String에 기본 첫 단어 대문자 표시 기능을 추가했습니다. 이미 정의 된 경우 제거해야합니다.