За чистый и ясный код!

Статьи на тему программирования под веб, используя PHP, MySQL, Jquery и многое другое
Просмотр категории - jQuery

Мой первый jQuery плагин. Работа с размерами текста.

Август8

Фреймверк 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>

Теперь все это вместе на одной странице демо тут.

Текст который я использовал в статье был взят с сайта сонников, гороскопов, знаков зодиака. Здесь я всегда смотрю свой бесплатный гороскоп.

Буду рад услышать любые замечания и предложения через комментарии.

Статья просмотренна 446468 раз, зашло посетителей 32644

  

Облако тегов

cli csv dump events form Kohana locale models MySQL mysqldump orm PHP tools trigger validate газ газовый счетчик итоги кеширование переменные

Облако тегов плагина WP Cumulus для WordPress требует для просмотра Flash Player 9 или выше.

Я на твиттере!

  • у твиттера тоже бывают перерывы...

Календарь

Июль 2017
Пн Вт Ср Чт Пт Сб Вс
« Июл    
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Сейчас на сайте