Изменение размера текста при помощи jQuery

Ранее я уже реализовывал скрипт для изменения размера текста несколькими способами, но сейчас мне кажется, что я нашел самый удобный способ для этого. В предыдущих проектах я путался с определением текущего размера шрифта и необходимой его настройкой (подгонкой). Но, по-моему, упрощение повысило его возможности.

Перевод статьи Simple jQuery Text Resizer.

Демо

Отступление

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

Еще одно: у меня есть скрипт для изменения размера текста. По моему мнению, нет нужды повторять функции браузера. То же самое я думаю о ссылках НАЗАД и ПЕЧАТЬ, но иногда эти функции все-таки нужны, поэтому я написал это.

Концепция

Концепция очень простая: вы кликаете на размер шрифта по вашему выбору, и класс добавляется к основным параметрам для индикации размера шрифта, который выбрал пользователь. Затем, мы возьмем преимущество основного класса, когда мы пишем наш CSS для соответствующего изменения других элементов.

Код

Давайте начнем как обычно с создания пометки (markup):

<ul class="resizer">
    <li class="small"><a href="#">A</a></li>
    <li class="medium"><a href="#">A</a></li>
    <li class="large"><a href="#">A</a></li>
</ul> 

jQuery

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

$(document).ready(function() {
    $('.resizer a').click(function() {

    });
}); 

Затем, мы хотим получить класс родительской ссылки, которая была нажата, убрать все классы изменения размера шрифта из body (основного списка) и добавить новый:

$(document).ready(function() {
    $('.resizer a').click(function() {
        var textSize = $(this).parent().attr('class');
        $('body').removeClass('small medium large').addClass(textSize);
    });
}); 

Также мы не хотим того, чтобы выполнялось обычное действие по ссылке, поэтому ставим фальшивый возврат (обманка):

$(document).ready(function() {
    $('.resizer a').click(function() {
        var textSize = $(this).parent().attr('class');
        $('body').removeClass('small medium large').addClass(textSize);
        return false;
    });
}); 

Также я думаю важно помнить о том, какой именно размера шрифта пользователь выбрал, находясь на сайте, поэтому мы воспользуемся преимуществом плагина jQuery Cookie чтобы помочь нам с этим. Мы установим Cookie , который укажет нам, какой именно размер шрифта выбрал пользователь:

$(document).ready(function() {
    $('.resizer a').click(function() {
        var textSize = $(this).parent().attr('class');
        $('body').removeClass('small medium large').addClass(textSize);
        $.cookie('TEXT_SIZE',textSize, { path: '/', expires: 10000 });
        return false;
    });
}); 

И , наконец, нам осталось только добавить в начало скрипта проверку, так, чтобы если этот cookie был установлен, мы могли добавить этот размер как класс в тело (список ):

$(document).ready(function() {
    if($.cookie('TEXT_SIZE')) {
        $('body').addClass($.cookie('TEXT_SIZE'));
    }
    $('.resizer a').click(function() {
        var textSize = $(this).parent().attr('class');
        $('body').removeClass('small medium large').addClass(textSize);
        $.cookie('TEXT_SIZE',textSize, { path: '/', expires: 10000 });
        return false;
    });
}); 

CSS

Сейчас мы переходим к действительно мощной части производства изменителя размера шрифтов. И эта часть – CSS. Мы можем начать с простого определения размера шрифта, когда он находится в маленьком/по умолчанию состоянии:


body { font: 12px/18px Arial, sans-serif; }

затем, нам нужно сделать небольшую простую настройку (изменение) для среднего и большого размеров:

.medium { font-size: 16px; line-height: 22px; }
.large { font-size: 20px; line-height: 26px; } 

Таким же способом можно пройтись по оставшимся элементам, которые были назначены как размер шрифта:

h1 { font-size: 30px; line-height: 36px; }
.medium h1 { font-size: 34px; line-height: 40px; }
.large h1 { font-size: 38px; line-height: 44px; }
h2 { font-size: 24px; line-height: 30px; }
.medium h2 { font-size: 28px; line-height: 34px; }
.large h2 { font-size: 32px; line-height: 38px; }
h3 { font-size: 18px; line-height: 24px; }
.medium h3 { font-size: 22px; line-height: 28px; }
.large h3 { font-size: 26px; line-height: 32px; } 

Демо

Эта идея очень простая, и она действительно разделяет презентацию и поведенческие слои. Так что вы думаете? Есть ли другая техника, которая так бы вам понравилась?

Добавить к себе на страницу: