Изучаем JQuery. Составные события

В сегодняшней статье мы рассмотрим два наиболее часто употребляемых обработчика событий, методы toggle() и hover(); они оба передают нам сложные обработчики событий, потому что они перехватывают комбинации пользовательских действий и отвчают на них, более чем одной функцией.

Отображение/скрытие дополнительных функций

Предположим, что нам необходимо иметь возможность скрывать наш переключатель стилей, когда это необходимо. Прятать и отображать его, мы будем посредством клика по заголовку книги, первый клик будет прятать кнопки переключения стилей, втрой клик, их отображать. Для этого нам необходимо прописать соответствующий CSS-стиль:

.hidden{
    display: none;
}

А реализуем мы это посредством специального метода JQeury toggle(). Метод toggle() принимает два аргумента, каждый из которых является функцией. Первый клик по элементу выполняет первую функцию, следующий клик — вторую. Эти две функции соответственно чередуются по каждому клику. С этим методом, мы легко можем реализовать «скрывающийся» переключатель стилей:

$(document).ready(function() {
      $('#switcher h3').toggle(function() {
           $('#switcher .button').addClass('hidden');
             }, function() {
           $('#switcher .button').removeClass('hidden');
        });
});

После первого клика, все кнопки исчезают, как показано на скриншоте:

И следующий клик по загловку, возвращает их в исходное, видимое состояние:

Есть и более элегантый способ решения нашей задачи, в JQuery присутствует метод под названием toggleClass(), который автоматически проверяет наличие у элемента заданного класса, перед тем как добавить или удалить его. Поэтому наш код можно записать еще проще, вот так:

$(document).ready(function() {
        $('#switcher h3').click(function() {
                 $('#switcher .button').toggleClass('hidden');
        });
});

Подсветка кликабельных элементов

Поскольку в нашем примере в качестве кнопок переключения стилей используются обычные div’ы, нам необходимо разработать интерфейс, подсказывающий пользователю, что кнопки «живые» и на них можно нажимать. Для этого мы назначим кнопкам специальный стиль, сообщающий о том, что они определенным образом могут взаимодействовать с мышью.

#switcher .hover {
	cursor: pointer;
	background-color: #6FFFFC;
}

CSS-спецификация включает в себя псевдо-класс :hover, позволяющий применять заданный стиль к элементу, пока курсор мыши находится внутри этого элемента. В IE6 этот метод можно применять только к элементам-ссылкам, но с помощью JQuery, мы можем обеспечить кросс-браузерность и выполнить любые действия с помощью одноименного метода hover().

Метод hover() так же как и toggle(), принимает в качестве аргументов две функции. В нашем случае, первая функция будет выполнятся при наведении курсора мыши к элементу, а вторая когда курсор покинет выбранный элемент. Таким образом мы можем изменить класс, применяемый к кнопкам, и добиться эффекта выделенной кнопки:

$(document).ready(function() {
        $('#switcher .button').hover(function() {
              $(this).addClass('hover');
          }, function() {
              $(this).removeClass('hover');
          });
});

Теперь при наведении курсора на любую кнопку, мы видим применяемый к ней класс .hover, как показано на скриншоте:

Вот так, на слегка поднадоевшем примере, мы рассмотрели два замечательных метода toggle() и hover(), возможности которых, при наличии воображения, абсолютно безграничны. Следующая статья этой рубрики будет представлять собой одну сухую теорию, но придется потерпеть, потому что без нее ну просто не обойтись.