元素等高或等宽的插件,基于MooTools

保持同一容器中的所有元素之间具有相等的高度或相等宽度,可以使一个页面变的美观和整洁。遗憾的是,有的时候想保持同一高度或同一宽度的列或行是用CSS很难做到的。

我们就不得不借助JavaScript来实现此功能了。我这儿就给大家提供一个 ”元素等高或等宽的插件“,它的灵感来自 David Walsh (http://davidwalsh.name/mootools-equal-heights) 。

Elements.equalize

 

View Demo »

 

Download Files »

 

The MooTools JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Elements.implement({
	'equalize': function(axis)
	{
		var max = 0,
			axis = axis ? axis.toLowerCase() : 'height',
			offset = 'offset' + axis.capitalize(),
			prop = (typeof document.body.style.maxHeight != 'undefined' ? 'min-' : '') + axis;
 
		if (['height', 'width'].indexOf(axis.toLowerCase()) == -1)
		{
			axis = 'height';
		}
 
		this.each(function(element, i) {
			var calc = element[offset];
			if (calc > max) max = calc;
		}, this).each(function(element, i) {
			element.setStyle(prop, max - (element[offset] - element.getStyle(axis).toInt()));
		}, this);
	}
});

如何使用:

1
2
3
document.getElements('.height').equalize();
 ...
document.getElements('.width').equalize('width');

具体的用法,请看示例演示中源码。

 

View Demo »

 

Download Files »

站点统计