На этом шаге мы рассмотрим реализацию обработки щелчков на остальных двух кнопках.
Теперь у нас имеется работающая кнопка Увеличенный, но нам необходимо определить аналогичные обработчики еще для двух других кнопок: Обычный и Суженный, чтобы они выподняли свои функции. Сделать это очень просто - с помощью метода .bind() мы добавим к каждой кнопке обработчики события click, в которых удалим и добавим необходимые классы. Новый программный код приводится ниже:
$(document).ready(function() { $('#switcher-default').bind('click', function() { $('body').removeClass('narrow'); $('body').removeClass('large'); }); $('#switcher-narrow').bind('click', function() { $('body').addClass('narrow'); $('body').removeClass('large'); }); $('#switcher-large').bind('click', function() { $('body').removeClass('narrow'); $('body').addClass('large'); }); });
В дополнение к нему определим новый класс CSS narrow:
body.narrow .chapter { width: 400px; }
Теперь после щелчка на кнопке Суженный будет применяться соответствующее правило CSS, и текст будет отображаться по-другому, как показано на рисунке 1.
Рис.1. Вид страницы после щелчка на кнопке Суженный
Обработчик щелчка на кнопке Обычный будет удалять оба имени класса CSS из тега <body>, возвращая страницу к первоначальному варианту отображения.
На следующем шаге мы рассмотрим контекст обработчика события.