На этом шаге мы рассмотрим оформление кода в виде функции.
В качестве альтернативы использованию метода .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. Конечный результат
Текст этого примера можно взять здесь.Со следующего шага мы начнем рассматривать эффекты.