Урок - Событие resize в jQuery - изменение размера окна.

Главная » Курсы » Курс jQuery, Быстрый старт. (jQuery 1.10.2 / jQuery 2.0.3) » Урок - Событие resize в jQuery - изменение размера окна.
Группа вКонтакте
Лицензия: Лицензия Creative Commons.

Метод jQuery.resize() привязывает обработчик к JavaScript-событию "resize" или вызывает его для элемента.

Синтаксис метода jQuery.resize().

  • jQuery(<selector>).resize( handler(eventObject) )
  • jQuery(<selector>).resize( [eventData ], handler(eventObject) )
  • jQuery(<selector>).resize()

jQuery(<selector>).resize( handler(eventObject) )

где

  • handler(eventObject) - функция, обработчки события, будет выполняться каждый раз при возникновении события "resize".

Метод jQuery.resize() (в данном синтаксисе) - является псевдонимом для jQuery.on('resize', handler).

jQuery(<selector>).resize( [eventData ], handler(eventObject) )

где

  • eventData - объект содержащий данные, для передачи в обработчик.
  • handler(eventObject) - функция, обработчки события, будет выполняться каждый раз при возникновении события "resize".

Метод jQuery.resize() (в данном синтаксисе) - является псевдонимом для jQuery.on('resize', handler).

jQuery(<selector>).resize()

В этом случае метод jQuery.resize() не принимает аргументов.

Метод jQuery.resize() (в данном синтаксисе) - является псевдонимом для jQuery.trigger('resize').

Описание метода jQuery.resize().

Событие 'resize' генерируется в случае изменения размеров окна браузера.

jQuery(window).resize(function() {
    console.log('Event: resize.');
});

Нельзя пологаться на количество запусков обработчика события 'resize'. В зависимости от реализации события изменения размера могут идти не прерывно, при перетягивании (например в Internet Explorer, Chrome, Safari), так и единожды при завершении перетягивания (например в Opera).

jQuery(window).resize(function() {
    jQuery('#example').html(jQuery(window).width() + 'x' + jQuery(window).height());
});

Что бы передать в обработчик дополнительные внешние данные, необходимо их указать в ервом аргументе, а обработчик во втором:

jQuery(window).resize({id:100, title:'This is title'}, function(eventObject) {
    jQuery('#size').html(
        eventObject.data.title + '(' + eventObject.data.id + '): ' + 
        jQuery(window).width() + 'x' + jQuery(window).height()
    );
});

В этом примере в обработчик передаем дополнительный JavaScript-объект (массив). Переданные данные будут доступны в Объекте-события под именем data.

Для вызова всех обработчиков события 'resize' используйте метод jQuery.resize() без аргументов:

//	назначаем обработчки		
jQuery(window).resize(function() {
	jQuery('#size').html(jQuery(window).width() + 'x' + jQuery(window).height());
});
//	при клике по кнопке вызываем все обработчики
jQuery('#button1').click(function() {
    jQuery(window).resize();
});
//	первоначальный вызов всех обработчиков
jQuery(window).resize();