Переключатель размера шрифта сайта на jQuery

Те мои постоянные читатели, кто заходят на блог, наверняка уже заметили, что его контентная часть несколько преобразилась: во-первых, фиксированная ширина этого блока изменена на динамическую (кстати, на эту тему скоро будет написан пост с целью выявления красивого решения), во-вторых, над сайдбаром появилась фича «Размер шрифта», с помощью которой можно выбрать один из 4-х предопределенных мною размеров шрифта для контентной части.

О реализации последней фичи я и хочу поведать в текущем посте.

Почему я вообще решил сделать подобное? Потому что, во-первых, устали глаза от 13-пиксельного размера шрифта, во-вторых, захотелось универсальности, чтобы посетители могли сами выбрать для себя наиболее удобный размер, в-третьих, к этому подтолкнул сайт alexking.org, на котором тоже реализована подобная вещица.

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

  1. Switch stylesheets with jQuery — здесь механизм следующий: для каждого состояния необходимо использовать отдельный файл стилей, и все это дело работает с использованием куков, чтобы после переключения страниц сайта или даже после закрытия браузера кука не удалялась, и при последующем заходе на сайт выбор пользователя сохранился.
  2. jQuery Simple Style Switcher — здесь интересно то, что все стили записываются в один файл и переключение между ними происходит за счет дополнительного родительского класса, применяемого к тегу <body>.

Мне очень нужен был второй вариант (стилей немного, поэтому нет смысла выносить их в отдельные файлы), однако в нем не было куков, которые есть в первом варианте. Поэтому стояла цель — скрестить оба решения.

Снова говорю «Спасибо!» моему знакомому программисту, благородному спасителю =), который быстро справился с поставленной задачей.

Дабы не увеличивать и без того получившийся длинным пост, сразу, без всякого кода, предлагаю вам скачать полностью рабочий пример. Ну а живой пример вы можете наблюдать прямо на блоге.

Скачать

Стили нужно будет задать только для 3-х переключателей (если говорить о моем примере), поскольку для 4-го используются стили по умолчанию. Переключателей можно сделать столько, сколько вам нужно, все дополнительные делаются по аналогии.

P.S. Прежде чем приделать к блогу «Размер шрифта», я проверял его работу в разных браузерах, как то: IE6, IE7, IE8b2, FF2, FF3, Opera 9.5+, Chrome. Safari. Поэтому, если в вашем браузере НЕ отключены куки (cookie) и JavaScript и переключение стилей все-таки не работает, то я не в силах что-либо изменить.

Комментарии (40)
  1. 1

    Есть предложение. Почему бы не сделать, чтобы по умолчанию шрифт был не самый большой (в нашем случае 16px), а, например, предпоследний, чтобы у посетителя был выбор: увеличить или уменьшить. Мне кажется, что кто если и захочет изменить шрифт, то скорее всего увеличить (крупный текст легче читается и меньше устают глаза), а мы предлагаем только уменьшить.

  2. 7

    И еще. Я нашел мелкий баг. Если нажать на «Изменить» в плагине «С возвращением …», то скрипт изменения шрифта перестает работать (пропадает выбранный квадрат и все квадраты не нажимаются). Помогает только перезагрузка страницы. Это скрипты конфликтуют или я чтото неправильно сделал? (у тебя всё ок)

  3. 9
    андрей

    Тебе нужно к тегу дописать класс style3:

    А есле нужен размер шрифта тот который уже был прописан в стилях, до подключения этого скрипта класс прописывать не нужно ? В примере стиль 4 отсутствует как клас.

    PS класс нужно добавлять не body а блоку с основным содержимым страницы.
    У вас это так и сделано, в примере нет.

  4. 10
    Леша

    Привет!
    Только начинаю учится писать на HTML,потому еще нет рабочих сайтов.
    Подскажите плз куда этот переключатель должен прописываться?
    Сори за такие вопросы.
    заранее спасибо!

  5. 12
    Unlock

    Что-то не нашел, где на это блоке фича используется. :(