Перейти к содержанию

.resize()

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

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

Синтаксис

Синтаксис 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>

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

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

Пример использования метода .resize()

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