Робота з подіями в jQuery. Частина 6

28

Від автора: вітаю вас, друзі. У цій статті ми продовжимо вивчення подій у jQuery. Ми вивчили практично весь набір необхідних подій, які використовуються в повсякденній роботі: події миші, клавіатури і форм. У цій статті ми познайомимося з останнім корисним набором подій — подіями браузера.

Отже, у статті ми з вами розглянемо дві події браузера: зміна розмірів вікна браузера і скролінг сторінок. Почнемо з першого. За зміну розмірів вікна браузера відповідає подія resize. Оскільки нас цікавить вікно браузера, ми будемо працювати з об’єктом window — $(window). Пробуємо:

$(function(){
$(window).resize(function(){
console.log(‘resize’);
});
});

Тепер будь-яка зміна розмірів вікна браузера викличе висновок повідомлення в консоль.

Работа с событиями в jQuery

Спробуємо зробити що-небудь більш корисне. Наприклад, якщо ширина вікна браузера стане менше 800 пікселей, ми повідомимо про це користувачеві. До речі, для того щоб виміряти розміри ми використовуємо пару нових методів: widht() для ширини і height() для висоти. Якщо методи викликаються без параметра, тоді ми отримаємо поточне значення розміру. Також ми можемо передати параметром потрібне значення ширини або висоти.

$(function(){
$(window).resize(function(){
var w = $(window).width();
if(w < 800){
alert(‘Ширина менше 800 пікселей’);
}
});
});

Работа с событиями в jQuery

Давайте також розглянемо приклад із зміною розмірів програмно. Візьмемо той же приклад, тільки замість alert змінимо розміри блоку на сторінці.

.content{
margin-top: 50px;
border: 1px solid red;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, blanditiis
fugiat exercitationem cupiditate illum suscipit quaerat voluptate commodi delectus
nemo voluptatum culpa, porro qui rem vitae, nostrum officia enim dolorum.

$(function(){
$(window).resize(function(){
var w = $(window).width(),
block = $(‘.content’);
if(w < 800){
block.width(200).height(200);
}else{
block.width(‘auto’).height(‘auto’);
}
});
});

Тепер при зменшенні вікна браузера до ширини менше 800 пікселей — будуть змінені і розміри блоку на сторінці. Якщо ж ширина вікна стане дорівнює 800 пікселях або більше, тоді розміри блоку повернутися до значення за замовчуванням.

Работа с событиями в jQuery

Ще одна подія, з яким ми познайомимося, — це подія скролла — scroll. Штучно збільшимо висоту body і спробуємо спостерігати подія в дії:

body{
height: 1000px;
}
$(function(){
$(window).scroll(function(){
console.log(‘scroll’);
});
});

Тепер при скролле сторінки ми побачимо лічильник виводу відповідного повідомлення в консолі.

Работа с событиями в jQuery

Поки що ніякої користі від цього немає, тому познайомимося ще з парою методів — scrollTop() і scrollLeft(). Перший метод отримує або встановлює вертикальний відступ, другий — працює з горизонтальним скроллом. Простий скрипт, який буде повертати нас до верху сторінки при досягненні певного значення вертикального скролла:

$(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 100){
$(this).scrollTop(0);
}
});
});

Тепер при прокручуванні сторінки і досягненні значення вертикального скролла в 100 пікселів — скрипт поверне нас до самого верху сторінки автоматично. Саме такий принцип покладений в основу реалізації кнопки вгору, яку часто можна побачити на різних сайтах. Тільки там ми прив’язуємося до події кліка по відповідній кнопці.

На цьому ми завершимо роботу з подіями в jQuery. Більше і jQuerу ви можете дізнатися з наших уроків або курсу. Удачі!