將jquery轉換爲均衡高度的小腳本中的mootools

Question

我有這個小小的腳本，它使得我在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); 
         }); 

Answer 1

可能會更好，使其模塊化和可重用：

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/

Answer 2

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

Answer 3

有能平衡高度/寬度，設置它是否應該調整到最大的一個插件/最小元素：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);