你好,我正在寻找一个基于 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;
}
});
Usage :
var columnizer = new Equalizer('.sizeMe').equalize('height'); //call .equalize() as often as you want!
有人可以帮我在 jQuery 中转换这段代码吗?实际上,我的整个模板都是基于 jQuery 的,只是为了这个等高函数,我不想加载另一个 JavaScript 库。
请帮忙!
是的,我认为这可能有用,所以将其制作成 jQuery 插件供您使用。
Demo: http://jsfiddle.net/AXqBb/ http://jsfiddle.net/AXqBb/
均衡器.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 添加了基本的首字大写功能;如果已经定义,则需要将其删除。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)