Изменение размера шрифта с куками

Изменение размера шрифта с куками

Здравствуйте!

Шаг 1. Основа

Для начала подключим сам jQ и плагин jq. cookie.

<script type="text/javascript" src="jQuery. js"></script>

<script type="text/javascript" src="jquery. cookie. js"></script>

Этот плагин очень даже и не плох. Он улучшает работу с куками.

Шаг 2. Html

Сам html код довольно прост. Он состоит из кнопок-регулировок и самого индификтора.

<div id="fontplus" title="Увеличить"></div>

<div id="fontreset" title="Сбросить"></div>

<div id="fontminus" title="Уменьшить"></div>

<div class="font">Ваш текст </div>

Любой текст в котором надо изменять шрифт заключите в класс «font».

Шаг 3. Css

Теперь добавим немного изюминки :D

#fontplus { float:left; background:url(img/plus. png) no-repeat; width:12px; height:12px; margin:2px; cursor:pointer;

}

#fontminus { float:left; background:url(img/minus. png) no-repeat; width:12px; height:12px; margin:2px; cursor:pointer;

}

#fontreset { float:left; background:url(img/reset. png) no-repeat; width:12px; height:12px; margin:2px; cursor:pointer;

}

Шаг 4. jQuery

И вот настал наш знаменательный момент — jQuery-код.

<script language="javascript">

$(document).ready(function(){ var max = 20 //Максимальный размер шрифта var min = 10 //Минимальный размер шрифта var resets = $('.font').css('fontSize');// Размер шрифта изначале var cook = $.cookie('font')

$('.font').css("fontSize",cook+"px");

$('#fontplus').click(function(){ var reset = parseInt($('.font').css('fontSize')); //Узнаём размер шрифта и преобразуем его в число(т. к в размере присудствует ещё и "px") var font = reset+1; //Увеличиваем размер на 1px

$.cookie('font', ''+font, { expires: 365,path: '/'}) if (font<=max) { //Если размер шрифта меньше значения переменной max...

$('.font').css("fontSize",font+"px") //То устанавливаем новый размер шрифта

} return false; //Прерываем передачу события далее по дереву DOM

});

$('#fontminus').click(function(){ var reset = parseInt($('.font').css('fontSize')); var font = reset-1; //Уменьшаем размер шрифта на 1px

$.cookie('font', ''+font, { expires: 365,path: '/'}) if (font>=min) { //Если размер шрифта больше значения переменной min...

$('.font').css("fontSize",font+"px") //То устанавливаем новый размер шрифта

} return false;

});

$('#fontreset').click(function(){

$('.font').css("fontSize",resets+"")

$.cookie('font', ''+resets, { expires: 365,path: '/'})

});

});

</script>

Я Вам даже откомментировал часть кода =). В итоге у Нас получились не плохие кнопки увеличения/уменьшения шрифта.

Дайте волю вашим пользователям, пусть меняют шрифт так, как им захочется.

Кстати

В этом скрипте есть кое-какой интересный метод var intValue = parseInt(string[, radix])

Вкратце расскажу что он делает.

Эта функция преобразует первый аргумент в число, а если такого невозможно то возвращает NaN. Как это понять?

Возьмём наш пример. Мы узнаём размер шрифта, например пусть будет 10px. Как нам увеличить шрифт на 1px? Просто если взять и прибавить то получится что-то вроде 10px1 хотя нам надо 11px. Далее если мы уберём другим методом слово px и увеличим на 1, то это ничего не меняет, будет 101. И тут нам приходит на помощь метод parseInt, он берёт и преобразует 10px в число — 10. Как будто у Нас в переменной уже было изначала число — 10. А далее мы можем этим число манипулировать как захотим:умножать, делить, прибавлять, вычитать.

Ну вот вроде бы и всё. Думаю я Вам подробно расписал что да как.

До следующих статей!


Карта сайта


Информационный сайт Webavtocat.ru