От автора: приветствую вас, друзья. В этой статье мы продолжим изучение событий в jQuery. Мы изучили практически весь набор необходимых событий, которые используются в повседневной работе: события мыши, клавиатуры и форм. В этой статье мы познакомимся с последним полезным набором событий — событиями браузера.
Итак, в статье мы с вами рассмотрим два события браузера: изменение размеров окна браузера и скроллинг страницы. Начнем с первого. За изменение размеров окна браузера отвечает событие resize. Поскольку нас интересует окно браузера, мы будем работать с объектом window — $(window). Пробуем:
|
1 2 3 4 5 |
$(function(){ $(window).resize(function(){ console.log('resize'); }); }); |
Теперь любое изменение размеров окна браузера вызовет вывод сообщения в консоль.
Попробуем сделать что-нибудь более полезное. Например, если ширина окна браузера станет меньше 800 пикселей, мы сообщим об этом пользователю. Кстати, для того чтобы измерить размеры мы используем пару новых методов: widht() для ширины и height() для высоты. Если методы вызываются без параметра, тогда мы получим текущее значение размера. Также мы можем передать параметром нужное значение ширины или высоты.
|
1 2 3 4 5 6 7 8 |
$(function(){ $(window).resize(function(){ var w = $(window).width(); if(w < 800){ alert('Ширина меньше 800 пикселей'); } }); }); |
Давайте также рассмотрим пример с изменением размеров программно. Возьмем тот же пример, только вместо alert изменим размеры блока на странице.
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .content{ margin-top: 50px; border: 1px solid red; } </style> <div class="container content"> <p>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.</p> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 |
$(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 пикселям или больше, тогда размеры блока вернуться к значению по умолчанию.
Еще одно событие, с которым мы познакомимся, это событие скролла — scroll. Искусственно увеличим высоту body и попробуем наблюдать событие в действии:
|
1 2 3 |
body{ height: 1000px; } |
|
1 2 3 4 5 |
$(function(){ $(window).scroll(function(){ console.log('scroll'); }); }); |
Теперь при скролле страницы мы увидим счетчик вывода соответствующего сообщения в консоли.
Пока что никакой пользы от этого нет, поэтому познакомимся еще с парой методов — scrollTop() и scrollLeft(). Первый метод получает или устанавливает вертикальный отступ, второй — работает с горизонтальным скроллом. Простейший скрипт, который будет возвращать нас к верху страницы при достижении определенного значения вертикального скролла:
|
1 2 3 4 5 6 7 |
$(function(){ $(window).scroll(function(){ if($(this).scrollTop() > 100){ $(this).scrollTop(0); } }); }); |
Теперь при прокрутке страницы и достижении значения вертикального скролла в 100 пикселей — скрипт вернет нас к самому верху страницы автоматически. Именно такой принцип положен в основу реализации кнопки вверх, которую часто можно увидеть на различных сайтах. Только там мы привязываемся к событию клика по соответствующей кнопке.
На этом мы завершим работу с событиями в jQuery. Больше и jQuerу вы можете узнать из наших уроков или курса. Удачи!
