JQuery自动等高插件

最新推荐文章于 2020-07-30 01:26:07 发布

原创最新推荐文章于 2020-07-30 01:26:07 发布 · 226 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #CSS #OpenSource #PHP #prototype #ViewUI

JQuery 专栏收录该内容

1 篇文章

订阅专栏

代码很简单：


<!-- 一个jQuery库文件 -->
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<!-- 一个jQuery.equalHeights插件（后面会给出）-->
<script type="text/javascript" src="jQuery.equalHeights.js"></script>

<script type="text/javascript">
$(function(){ $('#equalize').equalHeights(); });
</script>


	<div id="equalize">
		<div class="box"><p>A - Lorem ipsum dolor sit amet</p></div>
		<div class="box"><p>B - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
		<div class="box"><p>C</p></div>
		<div class="box"><p>D - Ut enim ad minim</p></div>
	</div>

[size=large][b]jQuery.equalHeights.js[/b][/size]


/*-------------------------------------------------------------------- 
 * JQuery Plugin: "EqualHeights"
 * by:	Scott Jehl, Todd Parker, Maggie Costello Wachs (http://www.filamentgroup.com)
 *
 * Copyright (c) 2008 Filament Group
 * Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
 *
 * Description: Compares the heights or widths of the top-level children of a provided element 
 		and sets their min-height to the tallest height (or width to widest width). Sets in em units 
 		by default if pxToEm() method is available.
 * Dependencies: jQuery library, pxToEm method	(article: 
		http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/)							  
 * Usage Example: $(element).equalHeights();
  		Optional: to set min-height in px, pass a true argument: $(element).equalHeights(true);
 * Version: 2.0, 08.01.2008
--------------------------------------------------------------------*/

$.fn.equalHeights = function(px) {
	$(this).each(function(){
		var currentTallest = 0;
		$(this).children().each(function(i){
			if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
		});
		if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
		// for ie6, set height since min-height isn't supported
		if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
		$(this).children().css({'min-height': currentTallest}); 
	});
	return this;
};