将jquery转换为mootools的小脚本，平衡高度

converting jquery to mootools on small script that equalizes heights

本文关键字：脚本 平衡 高度 jquery 转换 mootools      更新时间：2023-09-26

我有这个小脚本，使盒子相等的高度，我在jQuery中使用的所有时间，我需要转换为mootools的网站。在这个例子中，盒子将在样式表的三分之一处左浮动。

<div id="box1" class="equals">content here</div>
<div id="box2" class="equals">content here</div>
<div id="box3" class="equals">content here</div>

       jQuery(document).ready(function(){
var highestCol = Math.max(jQuery('#box1').height(),jQuery('#box2').height(),jQuery('#box3').height());
 jQuery('.equals').height(highestCol);
                        });

最好是模块化和可重用:

var equalElements = function(els) {
    // make elements equal height to max height of the set.
    els.setStyle("height", Math.max.apply(Math, els.map(function(el) { return el.getSize().y })));
};
equalElements(document.getElements("div.equals"));
http://jsfiddle.net/dimitar/TxtBQ/

window.addEvent('domready', function(){
  var highestCol = Math.max($('box1').getSize().y, $('box2').getSize().y, $('box3').getSize().y);
  $$('.equals').setStyle('height', highestCol);
}

有一个插件可以平衡高度/宽度，设置它是否应该调整为最大/最小的元素:http://jsfiddle.net/oskar/5uQEP/

非常简单的用法:

document.getElements('li').equalize({
    dir: 'height',
    mode: 'max'
});

你也可以返回原始值并做一些动画:

var maxHeight = document.getElements('li').equalize({
    dir: 'height',
    mode: 'max',
    raw: true
});
document.getElements('li').tween('height', maxHeight);
相关文章：