В сегодняшней статье мы рассмотрим два наиболее часто употребляемых обработчика событий, методы toggle() и hover(); они оба передают нам сложные обработчики событий, потому что они перехватывают комбинации пользовательских действий и отвчают на них, более чем одной функцией.
Отображение/скрытие дополнительных функций
Предположим, что нам необходимо иметь возможность скрывать наш переключатель стилей, когда это необходимо. Прятать и отображать его, мы будем посредством клика по заголовку книги, первый клик будет прятать кнопки переключения стилей, втрой клик, их отображать. Для этого нам необходимо прописать соответствующий CSS-стиль:
[css]
.hidden{
display: none;
}
[/css]
А реализуем мы это посредством специального метода JQeury toggle(). Метод toggle() принимает два аргумента, каждый из которых является функцией. Первый клик по элементу выполняет первую функцию, следующий клик – вторую. Эти две функции соответственно чередуются по каждому клику. С этим методом, мы легко можем реализовать “скрывающийся” переключатель стилей:
[javascript]
$(document).ready(function() {
$(‘#switcher h3’).toggle(function() {
$(‘#switcher .button’).addClass(‘hidden’);
}, function() {
$(‘#switcher .button’).removeClass(‘hidden’);
});
});
[/javascript]
После первого клика, все кнопки исчезают, как показано на скриншоте:
И следующий клик по загловку, возвращает их в исходное, видимое состояние:
Есть и более элегантый способ решения нашей задачи, в JQuery присутствует метод под названием toggleClass(), который автоматически проверяет наличие у элемента заданного класса, перед тем как добавить или удалить его. Поэтому наш код можно записать еще проще, вот так:
[javascript]
$(document).ready(function() {
$(‘#switcher h3’).click(function() {
$(‘#switcher .button’).toggleClass(‘hidden’);
});
});
[/javascript]
Подсветка кликабельных элементов
Поскольку в нашем примере в качестве кнопок переключения стилей используются обычные div’ы, нам необходимо разработать интерфейс, подсказывающий пользователю, что кнопки “живые” и на них можно нажимать. Для этого мы назначим кнопкам специальный стиль, сообщающий о том, что они определенным образом могут взаимодействовать с мышью.
[css]
#switcher .hover {
cursor: pointer;
background-color: #6FFFFC;
}
[/css]
CSS-спецификация включает в себя псевдо-класс :hover, позволяющий применять заданный стиль к элементу, пока курсор мыши находится внутри этого элемента. В IE6 этот метод можно применять только к элементам-ссылкам, но с помощью JQuery, мы можем обеспечить кросс-браузерность и выполнить любые действия с помощью одноименного метода hover().
Метод hover() так же как и toggle(), принимает в качестве аргументов две функции. В нашем случае, первая функция будет выполнятся при наведении курсора мыши к элементу, а вторая когда курсор покинет выбранный элемент. Таким образом мы можем изменить класс, применяемый к кнопкам, и добиться эффекта выделенной кнопки:
[javascript]
$(document).ready(function() {
$(‘#switcher .button’).hover(function() {
$(this).addClass(‘hover’);
}, function() {
$(this).removeClass(‘hover’);
});
});
[/javascript]
Теперь при наведении курсора на любую кнопку, мы видим применяемый к ней класс .hover, как показано на скриншоте:
Вот так, на слегка поднадоевшем примере, мы рассмотрели два замечательных метода toggle() и hover(), возможности которых, при наличии воображения, абсолютно безграничны. Следующая статья этой рубрики будет представлять собой одну сухую теорию, но придется потерпеть, потому что без нее ну просто не обойтись.
Leave a Reply