resize(), 사이즈 바꾸기

resize

원문 링크 http://api.jquery.com/resize/

.resize( handler(eventObject) )Returns : jQuery

개요 : "resize" JavaScript 이벤트를 이벤트 핸들러에 바인딩 하거나 요소에 이벤트를 적용시킵니다.

• .resize( handler(eventObject) )
• handler(eventObject) 이벤트가 실행될 때 동시에 수행될 기능
• .resize( [eventData], handler(eventObject) )
• eventData 이벤트 핸들러에 전달될 데이터 맵
• handler(eventObject) 이벤트가 실행될 때 동시에 수행될 기능
• .resize()

이 함수의 첫번째 두번째 용법은 .bind('resize', handler) 의 줄임 표현입니다. 세번째 용법은 .trigger('resize') 의 줄임 표현입니다.

resize 이벤트는 브라우져 윈도우 사이즈의 변화가 있을 때 window 요소에 보내집니다.

$(window).resize(function() {
  $('#log').append('<div>Handler for .resize() called.</div>');
});

브라우저의 윈도우 사이즈를 변화시키면 <div id="log"> 이 나타나는 알림창이 브라우져의 종류에 따라 1번 또는 그 이상 나타나게 됩니다.

resize 핸들러 안의 코드는 핸들러가 호출될 때마다 실행되지는 않습니다. 구현 방법에 따라, resize 이벤트는 사이즈가 변화하는 동안 연속적으로 발생할 수 있습니다. (전통적인 방식인 Internet Explorer 와 WebKit-based 브라우져인 Safari 와 Chrome 같은 브라우져에서) 또는 단 한번만 실행되는 경우도 있습니다. (Opera 브라우져 같은).

예 제  
창의 크기가 변하는 동안 창의 넓이값을 보여줍니다. 실행시켜 보세요.

$(window).resize(function() { $('body').prepend('<div>' + $(window).width() + '</div>'); });

음, 이건 직접 실행해 보셔야 겠네요. 예제를 구현할 수가 없네요. ^^

 

창의 크기가 변할때 무언가를 처리하고 싶으시면 사용하실 수 있는 함수입니다.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.