jQuery метод .resize()

Определение и применение

jQuery метод .resize() привязывает JavaScript обработчик событий "resize" (срабатывает при изменении размеров окна браузера), или запускает это событие на выбранный элемент.

Обратите внимание на то, что в зависимости от браузера пользователя, количество срабатываний события "resize" может отличаться, некоторые браузеры отправляют событие постоянно, когда изменение размера окна браузера происходит (типичное поведение в Internet Explorer и браузеров на основе WebKit, таких как Safari и Chrome), или только один раз в конце операции изменения размера окна (типичное поведение в некоторых других браузерах, таких как Opera). По этой причине код используемый в обработчике этого события не должен быть зависим от количества срабатываемых раз.

jQuery синтаксис:

Синтаксис 1.0:
$( selector ).resize() // метод используется без параметров

$( selector ).resize( handler ) 

handler - Function( Event eventObject )

Синтаксис 1.4.3:
$( selector ).resize( eventData, handler ) 

eventData - Anything
handler - Function( Event eventObject )

Обращаю Ваше внимание, что метод .resize(), используемый вместе с функцией, переданной в качестве параметра (handler) является, короткой записью метода .on(), а без параметра является короткой записью метода .trigger():

$( selector ).on( "resize", handler ) // снятие возможно с .off( "resize" )

$( selector ).trigger( "resize" )

Добавлен в версии jQuery

1.0 (синтаксис обновлен в версии 1.4.3)

Значения параметров

Параметр	Описание
eventData	Объект, содержащий данные, которые будут переданы в обработчик событий.
handler	Функция, которая будет выполнена каждый раз, когда событие срабатывает. Функция в качестве параметра может принимать объект Event.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .resize() (без параметров и с функцией)</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "button" ).click(function(){ // задаем функцию при нажатиии на элемент <button>
	    $( window ).resize(); // вызываем событие "resize" на объекте window
	  });
	  $( window ).resize(function(){ // задаем функцию при срабатывании события "resize" на объекте window
	    var width = $( window ).width();// ширина области просмотра браузера
	    $( "p" ).html( width ); // вставляем значение ширины области просмотра браузера
	  });
	});
		</script>
	</head>
	<body>
		<button>Клик</button>
		<p></p>
	</body>
</html>

В этом примере с использованием jQuery метода .resize() мы при нажатии на элемент <button> (кнопка) вызываем событие "resize" на объектe window, которому задали, что при срабатывании события "resize" необходимо получить значение ширины области просмотра браузера и вставить его в элемент <p>. При изменении размеров окна браузера значение в элементе <p> будет изменяться.

Результат нашего примера:

Пример использования jQuery метода .resize() (без параметров и с функцией). — Пример использования jQuery метода .resize() (без параметров и с функцией)

jQuery события