Метод .resize () | jQuery довідник
- Визначення та застосування
- jQuery синтаксис:
- Запроваджений у версії jQuery
- значення параметрів
- приклад використання
Визначення та застосування
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 події