jQuery 中的等高列

Question

你好，我正在寻找一个基于 jQuery 的等高列。我知道有很多这样的东西，但我的要求有点不同。我想在超级菜单中使用它们，其中有大约 4-5 个下拉菜单，每个下拉菜单有 3-4 列。

我希望所有这些 3-4 列具有相同的高度，但不是在所有下拉菜单中，因为根据该部分的内容，其他下拉菜单中的列高度会有所不同。

我在 MooTools 中找到了一个非常适合我的要求的解决方案。下面的 MooTools 代码使特定 div 中的所有列等于其父 div 的高度

MooTools 代码：

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

我使代码尽可能与您发布的代码相似，这样您就可以看到更改，因此对任何不好的风格表示歉意 - 希望它可归因于原作者。 ;-)

注意。我在这段代码中向 String 添加了基本的首字大写功能；如果已经定义，则需要将其删除。