참조 및 다운로드 : http://fordinteractive.com/tools/jquery/equalwidths/
플러그인 내용
==========================================================
실행 코드
==========================================================
부모의 사이즈 가 고정값이 아닌 100% 일때 마우스로 브라우저 사이즈를 조절 하면 꺠지는데 이것을 보안 하기위해 resize 이용한다.
플러그인 내용
==========================================================
(function($){ $.fn.equalWidths = function(options) { var opts = $.extend({ stripPadding: 'none' // options: 'child', 'grand-child', 'both' },options); return this.each(function(){ var child_count = $(this).children().size(); if (child_count > 0) { // only proceed if we've found any children var w_parent = $(this).width(); var w_child = Math.floor(w_parent / child_count); var w_child_last = w_parent - ( w_child * (child_count -1) ); $(this).children().css({ 'width' : w_child + 'px' }); $(this).children(':last-child').css({ 'width' : w_child_last + 'px' }); if((opts.stripPadding == 'child') || (opts.stripPadding == 'both')){ $(this).children().css({ 'padding-right': '0', 'padding-left': '0' }); } if((opts.stripPadding == 'grand-child') || (opts.stripPadding == 'both')){ $(this).children().children().css({ 'padding-right': '0', 'padding-left': '0' }); } } }); }; })(jQuery);==========================================================
실행 코드
==========================================================
$(function(){ $('#example-2').equalWidths(); $('#example-3').equalWidths({'stripPadding': 'both'}); });==========================================================
부모의 사이즈 가 고정값이 아닌 100% 일때 마우스로 브라우저 사이즈를 조절 하면 꺠지는데 이것을 보안 하기위해 resize 이용한다.
$(window).resize(function() { $('#example-2').equalWidths(); $('#example-3').equalWidths({'stripPadding': 'both'}); });
반응형
'WEB > Javascipt' 카테고리의 다른 글
[Open Case] jQuery VR (0) | 2011.07.27 |
---|---|
jquery 팝업 플러그인 (0) | 2011.02.18 |
nivo slider (0) | 2011.02.17 |