Урок - jFontSize - изменение размера шрифта (A- A A+)

Главная » Курсы » Курс jQuery, Быстрый старт. (jQuery 1.10.2 / jQuery 2.0.3) » Урок - jFontSize - изменение размера шрифта (A- A A+)
Группа вКонтакте
Лицензия: Лицензия Creative Commons.

Описание jFontSize.

Плагин jFontSize даёт возможность пользователю управлять размером шрифта на странице, если необходимо увеличить или уменьшить размер текст.

Чаще всего на сайте испобзуют три кнопки, которые кратко называны: A- A A+

Официальная страница плагина jFontSize: http://jfontsize.com/
Версия (на момент написания статьи урока): 1.0

Использования плагина jFontSize.

шаг 1. Подключаем jQuery и jFontSize:

<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jfontsize-1.0.js"></script>

шаг 2. Создаем кнопки:

    <a id="jfontsize-minus" href="#">A-</a>
    <a id="jfontsize-default" href="#">A</a>
    <a id="jfontsize-plus" href="#">A+</a>

шаг 3: определям блоки в которых необходимо изменять размер шрифта (будем использовать class="jFontSize":

<p class="jFontSize">Этот текст будет менять свой размер.</p>

шаг 4: инициируем плагин:

jQuery(function(){
    jQuery('.jFontSize').jfontsize();
});

пример целиком:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
    </style>
    <script src="http://code.jquery.com/jquery-1.10.1.js"></script>
    <script src="jquery.jfontsize-1.0.js"></script>
    <script>
        jQuery(function(){
            jQuery('.jFontSize').jfontsize();
        });
    </script>
</head>
<body>
    <a id="jfontsize-minus" href="#">A-</a>
    <a id="jfontsize-default" href="#">A</a>
    <a id="jfontsize-plus" href="#">A+</a>
     
    <p class="jFontSize">Этот текст будет менять свой размер.</p>
    <p>Этот текст будет без изменений.</p>
    <p class="jFontSize">Этот текст будет менять свой размер.</p>
</body>
</html>

Документация jFontSize.

Минимальное подключение jFontSize:

jQuery('.jFontSize').jfontsize();

!!! К сожалению версия полученная с официального сайта с ошибками. При изменении параметров по умолчанию плагин перестает работать. Приходится использовать значения по умолчанию.