jQueryの等しい高さの列

Question

こんにちは、私はjQueryベースの等しい高さの列を探しています。私は周りに浮かんでいる多くがあることを知っているが、私の要件は少し異なるです。私はあなたが約4-5のドロップダウンで、それぞれのドロップダウンが3-4の列を持つメガメニューでこれらを使用したいと思います。

これらの3〜4列のすべてが同じ高さになりますが、すべてのドロップダウンでは表示されません。その列の高さは、他のドロップダウンではそのセクションの内容によって異なります。

私の要件に合ったMooToolsのソリューションが見つかりました。誰かが私を助けることができる

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

：

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; 
} 
}); 

使用方法：以下のMooToolsのコードは、それが親のdivの高さだ

MooToolsのコードに特定のdivのすべての列が等しくなります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に追加しました。すでに定義されている場合は削除する必要があります。