Мой первый jQuery плагин. Работа с размерами текста.
Фреймверк jQuery мне понравился с первых строк кода которые я на нём написал. Для одного проекта мне нужно было написать свой jQuery плагин для увеличения/уменьшения шрифта в статье, как и что делать я был не в курсе, помогли статьи на эту тему с разных источников.
Требования к jQuery плагину:
1 От начального значения шрифта текста уметь изменять высоту шрифта в заданом диапазоне и с заданым шагом.
2 запоминать измененное значение шрифта, дабы при следующем заходе на странице шрифт был выбранной ранее высоты.
Первый пункт подразумевает кол-во итераций в увеличение/уменьшение от основного значения, шаг — на какое число будет изменен начальный размер шрифта.
Пример, допустим изначальный размер шрифта равен 16px, если указать кол-во итераций равное 3-м, а шага 1, то это означает, что шрифт при увеличении будет изменяться 3 раза на 1 пиксель (17 18 19), при уменьшении будет иметь значения (15 14 13). Менять указанные переменные можно при настройке шрифта.
Для реализации второго пункта я привлек к работе возможность работы с куками, а именно плагин jquery.cookie.js, если данного плагина не будет, то основной палгин будет работать, но сохранять выбранный размер шрифта не сможет.
Ниже приведен тест самого плагина:
(function($) { /* * значени по умолчанию */ var defaults = { iteration : 5, step : 1 }; /* * глобальная переменная опций */ var options; /* * настройка кукисов */ var cookieSettings = { expires: 7, path : '/', name : 'zoomtext' }; /* * Создаем объект с методами */ var methods = { /* * Инициализация */ init:function(params) { var type, size; options = $.extend({}, defaults, params); if ($.cookie != undefined && $.cookie(cookieSettings.name) != null ) { if ($.cookie(cookieSettings.name) == $(this).css('font-size')) { type = options.type = 'px'; size = options.defaultSize = $.cookie(cookieSettings.name).split(options.type).join(''); } else { type = 'px'; size = $.cookie(cookieSettings.name).split(type).join(''); options.type = 'px'; options.defaultSize = $(this).css('font-size').split(options.type).join(''); } } else { type = options.type = 'px'; size = options.defaultSize = $(this).css('font-size').split(options.type).join(''); } $(this).css('font-size', size+type); return $(this).data(cookieSettings.name) ? this : $(this).data(cookieSettings.name, true); }, /* * Увеличение шрифта */ inc:function() { var maxSize = parseInt(options.defaultSize)+options.iteration; var currentSize = parseInt($(this).css('font-size').split(options.type).join('')); if (currentSize < maxSize) { var changedSize = (currentSize+options.step).toString()+options.type; $.cookie != undefined ? $.cookie(cookieSettings.name, changedSize, cookieSettings) : ''; $(this).css('font-size', changedSize); } }, /* * Уменьшение шрифта */ dec:function() { var minSize = parseInt(options.defaultSize)-options.iteration; var currentSize = parseInt($(this).css('font-size').split(options.type).join('')); if (currentSize > minSize) { var changedSize = (currentSize-options.step).toString()+options.type; $.cookie != undefined ? $.cookie(cookieSettings.name, changedSize, cookieSettings) : ''; $(this).css('font-size', changedSize); } }, /* * Сброс шрифта */ reset:function() { $.cookie != undefined ? $.cookie(cookieSettings.name, null, cookieSettings) : ''; $(this).removeAttr('style'); } }; /* * магические методы для работы плагина */ $.fn.zoomtext = function(method){ if (methods[method]) { // переброс на запрашиваемый метод + передача параметров метода return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || ! method) { // передача методу инициализации (init) параметров return methods.init.apply(this, arguments); } else { // просто инициализация, если что-то пошло не так return methods.init.apply(this); } }; })(jQuery);
В начале задаются дефольтные значения переменных (объекты) для работы:
/* * значени по умолчанию */ var defaults = { iteration : 5, step : 1 }; /* * глобальная переменная опций */ var options; /* * настройка кукисов */ var cookieSettings = { expires: 7, path : '/', name : 'zoomtext' };
в переменной defaults есть два ключа:
iteration, задает кол-во итераций в ту или другу сторону (описывал чуть выше в статье),
step, задает шаг шрифта, т.е. приращение к существующему.
Переменная options используется внутри массива, хранит в себе все нужные пары ключ-значения для дальнейшей работы.
Переменная cookieSettings необходима для работы с куками,
ключ expires задает кол-во дней жизни куки от начала её становки,
ключ path указывает на какую область сайта дейстует кука, в данном случае на весь сайт,
ключ name это название куки.
Для более полного описания параметров переменной cookieSettings лучше обратится к официальной документации
Далее я реализовал несколько методов для работы:
init — метод который определяет тукущий размер шрифта, применяет его к тексту с помощью инлайл-стилей (style=’font-size:размер_шрифта’) и сохраняет данные с помощью функции jQuery.data();
inc — метод который позволяет увеличить шрифт, если не превышен порог по увеличению (defaults.iteration), применяет к тексту и записывает данные в куку (если плагин кук подключен и работает);
dec — метод который позволяет уменьшить шрифт, если не превышен порог по уменьшению (defaults.iteration), применяет к тексту и записывает данные в куку (если плагин кук подключен и работает);
reset — позволяет сбросить шрифт к изначальному состоянию и убить куку.
Как видно из выше описанного ничего сложного тут нет, но где-же магия? Магия заключается в этих строках, повторное использование кода, цепочка вызовов:
/* * магические методы для работы плагина */ $.fn.zoomtext = function(method){ if (methods[method]) { // переброс на запрашиваемый метод + передача параметров метода return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || ! method) { // передача методу инициализации (init) параметров return methods.init.apply(this, arguments); } else { // просто инициализация, если что-то пошло не так return methods.init.apply(this); } };
Более подробно описано в статье jQuery для начинающих. Часть 7. Пишем плагины, на блоге Антона Шевчука, за что ему большое спасибо!
Как использовать этот плагин:
Подключаем jQuery, plugins
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> <script src="http://blog.nagaychenko.com/jquery/plugins/jquery.cookie.js" type="text/javascript"></script> <script src="http://blog.nagaychenko.com/jquery/plugins/jquery.zoomtext.js" type="text/javascript"></script>
Необходимо создать управления, т.е. теги которые будут отвечать за увеличение/сброс/уменьшение шрифта, в моём случае я исользовал конструкцию ul-li
<ul id="zoom"> <li><a href="#zoom" id="increase" title="увеличить шрифт">increase</a></li> <li><a href="#zoom" id="reset" title="сбросить шрифт">reset</a></li> <li><a href="#zoom" id="decrease" title="evtymibnm шрифт">decrease</a></li> </ul>
каждому элементу li я задал ИД, для отслеживания событий кликов по ним.
Далее сам текст я указал в параграфе с уникальным ИД
<p id="content">некий текст</p>
Вызываем плагин с нужными параметрами и создаем обработчики кликов на элементы управления
<script type="text/javascript"> $(function(){ // вызов плагина с передачей необходимых значений $('p#content').zoomtext({step:1, iteration:2}); // отслеживаем кликл для увеличения шрифта $('a#increase').unbind().bind('click', function(){ $('p#content').zoomtext('inc'); }); // отслеживаем кликл для сброса шрифта $('#reset').unbind().bind('click', function(){ $('p#content').zoomtext('reset'); }); // отслеживаем кликл для уменьшения шрифта $('a#decrease').unbind().bind('click', function(){ $('p#content').zoomtext('dec'); }); }); </script>
Теперь все это вместе на одной странице демо тут.
Текст который я использовал в статье был взят с сайта сонников, гороскопов, знаков зодиака. Здесь я всегда смотрю свой бесплатный гороскоп.
Буду рад услышать любые замечания и предложения через комментарии.
Статья просмотренна 694480 раз, зашло посетителей 65129