На этом шаге мы рассмотрим оформление кода в виде функции.
В качестве альтернативы использованию метода .trigger() для имитации щелчка мышью рассмотрим способ, как можно выделить программный код в функцию, чтобы его можно было вызывать из нескольких обработчиков, в данном случае - из обработчиков событий click и keyup. Хотя в рассматриваемой ситуации в этом нет необходимости, такой прием может пригодиться для уменьшения объема программного кода.
$(document).ready(function() {
// Активировать реакцию кнопок переключателя стилей на событие
// наведения указателя мыши
$('#switcher .button').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
// Разрешить разворачивание и сворачивание переключателя стилей
var toggleStyleSwitcher = function(event) {
if (!$(event.target).is('.button')) {
$('#switcher .button').toggleClass('hidden');
}
};
$('#switcher').click(toggleStyleSwitcher);
// Имитировать щелчок мышью, чтобы изначально переключатель
// находился в свернутом состоянии.
$('#switcher').click();
// Функция setBodyClass() изменяет стиль страницы.
// Она изменяет также состояние переключателя стилей.
var setBodyClass = function(className) {
$('body').removeClass();
$('body').addClass(className);
$('#switcher .button').removeClass('selected');
$('#switcher-' + className).addClass('selected');
if (className == 'default') {
$('#switcher').click(toggleStyleSwitcher);
}
else {
$('#switcher').unbind('click', toggleStyleSwitcher);
$('#switcher .button').removeClass('hidden');
}
};
// Вызвать setBodyClass() в случае щелчка на кнопке
$('#switcher').click(function(event) {
if ($(event.target).is('.button')) {
if (event.target.id == 'switcher-default') {
setBodyClass('default');
}
if (event.target.id == 'switcher-narrow') {
setBodyClass('narrow');
}
else if (event.target.id == 'switcher-large') {
setBodyClass('large');
}
}
});
// Вызвать setBodyClass() в случае нажатия на клавишу.
$(document).keyup(function(event) {
switch (String.fromCharCode(event.keyCode)) {
case 'D':
case 'J': //Обычный
$('#switcher-default').click();
break;
case 'C': //Суженный
$('#switcher-narrow').click();
break;
case 'E': //Увеличенный
$('#switcher-large').click();
break;
}
});
});
Рис.1. Конечный результат
Текст этого примера можно взять здесь.Со следующего шага мы начнем рассматривать эффекты.
