Работа с событиями в jQuery. Часть 6

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

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

Итак, в статье мы с вами рассмотрим два события браузера: изменение размеров окна браузера и скроллинг страницы. Начнем с первого. За изменение размеров окна браузера отвечает событие resize. Поскольку нас интересует окно браузера, мы будем работать с объектом window — $(window). Пробуем:

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

Теперь любое изменение размеров окна браузера вызовет вывод сообщения в консоль.

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

Попробуем сделать что-нибудь более полезное. Например, если ширина окна браузера станет меньше 800 пикселей, мы сообщим об этом пользователю. Кстати, для того чтобы измерить размеры мы используем пару новых методов: widht() для ширины и height() для высоты. Если методы вызываются без параметра, тогда мы получим текущее значение размера. Также мы можем передать параметром нужное значение ширины или высоты.

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
$(function(){
 $(window).resize(function(){
  var w = $(window).width();
  if(w < 800){
 alert('Ширина меньше 800 пикселей');
  }
 });
});

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

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

<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>
$(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у вы можете узнать из наших уроков или курса. Удачи!

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree