Мой первый 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>
Теперь все это вместе на одной странице демо тут.
Текст который я использовал в статье был взят с сайта сонников, гороскопов, знаков зодиака. Здесь я всегда смотрю свой бесплатный гороскоп.
Буду рад услышать любые замечания и предложения через комментарии.
Статья просмотренна 695655 раз, зашло посетителей 65454