jQuery中的等高列 [英] Equal height columns in jQuery
问题描述
我正在寻找一个基于jQuery的等高列.我知道其中有很多人,但是我的要求有些不同.我想在Mega Menu中使用这些菜单,其中的下拉菜单约为4-5,每个下拉菜单都有3-4列.
Hi I am looking for a jQuery based equal height columns. I know there are a lot of them floating around but my requirement is a bit different. I want to use these in a Mega Menu where thee are about 4-5 drop-downs and each drop-down has 3-4 columns.
我希望所有这3-4个等高的列都相等,但不要在所有下拉列表中都用,因为在另一个下拉列表中,列的高度会有所不同,具体取决于该部分的内容.
I want all these 3-4 columns of equal height but not in all drop-downs, because the columns height will be different in the other drop-down depending on the content of that section.
我在MooTools中找到了一个解决方案,非常适合我的需求.下面的MooTools代码使特定div中的所有列都等于其父div的高度
I found a solution in MooTools which works perfect for my requirement. The MooTools code below makes all the columns in a particular div equal to it's parent div's height
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库.
Can somebody help me converting this code in jQuery please. Actually my entire template is jQuery based and just for this equal-height function I do not want to load another JavaScript library.
请帮助!
推荐答案
对,认为可能有用,因此可以将其插入jQuery插件中.
Right, thought that might be useful so made it in to a jQuery plugin for you.
演示: 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');
我将代码与您发布的代码保持尽可能相似,以便您可以看到所做的更改,因此对任何不好的样式表示歉意-希望它可归因于原始作者. ;-)
I have kept the code as similar to what you posted as possible, so you can see the changes, so apologise for any bad style - hopefully it is attributable towards the original author. ;-)
NB.我在这段代码中为String添加了一个基本的首字母大写功能;如果已经定义,则需要将其删除.
NB. I added a basic first-word capitalisation function to String within this code; if already defined that would need to be removed.
这篇关于jQuery中的等高列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!