• Шаблоны для вашего сайта
  • Сделать сайт
  • Реклама
  • Berry CSS
  • Albireo Framework
  • Бесплатный HTML-курс
  • Telegram-канал
  • Обратная связь
MaxSite.org
О создании сайтов и не только
Создание сайтов под ключ (Украина) →
Вход
×
или зарегистрироваться

Как написать плагин jQuery

jQuery и JavaScriptПросмотров: 10847Комментарии: 526 апреля 2018 г.

Недавно, в процессе создания лендинга, столкнулся с проблемой — нужно было разместить «аккордион». Это даже не плагин, а просто набор функций jQuery. Постепенно код усложнялся и в какой-то момент я понял, что нужно его оформить отдельным плагином. Это упрощает его поддержку и можно дорабатывать по необходимости.

Я никогда не писал jQuery-плагины, поэтому пришлось немного погуглить и найти примеры и туториалы. По какой-то неведомой причине, практически все руководства содержат невероятное количество лишней информации, где уже на 2-минуте прочтения возникает путаница, поскольку подразумевают, что читающий прекрасно разбирается и в js, и тонкостях jQuery, что в корне неверно. :)

Поэтому я решил написать своё руководство, рассчитанное на неподготовленного читателя.

Начнём с постановки задачи. Пусть у нас есть некий jQuery-код, который нужно оформить в виде плагина. Не будем усложнять задачу, возьмём что-то совсем простое, например преключение класса элемента по клику (назовём это «первоначальным кодом»).

JS-код:
 
$(".click").click(function(){ 
	$(this).toggleClass('t-red') 
});
 
HTML-код:
 
<div class="click">какой-то текст для переключения</div>

К классу .click мы цепляем обработчик «click», который меняет его css-класс на t-red. Метод toggleClass включает/выключает класс по каждому клику.

После преобразования этого кода в плагин, вызывать его можно будет так:

$(".click").myClick(); 

Это уже типовой вызов jQuery-плагина. Его желательно будет снабдить опциями, чтобы можно было бы задавать произвольный css-класс. Пусть это будет параметр to:

$(".click").myClick({
	to: "t-green"
});

Ну и, кроме этого, было бы здорово задавать css-класс в html-атрибуте data-, что позволит указывать его прямо в html-разметке:

<div class="click" data-to="bg-yellow t-red">какой-то текст для переключения</div>

Почти все jQuery-плагины сейчас строятся по единому шаблону-каркасу. Для сложных плагинов этот каркас дорабатывается для подключения методов и прочих «фишек», но в нашем случае всё очень просто — у нас одна основная функция.

(function($) {
	// функция вызова jQuery-плагина
	$.fn.myClick = function(options) {
		// опции 
		var config = $.extend({}, {
			op1: '',
			op2: ''
		}, options);
		
		function main(e) {
			// это основная функция
		}
		this.each(function() { main($(this)); });
		return this;
	};
})(jQuery);

Строчка $.fn.myClick задаёт то, как будет вызываться плагин извне (myClick). Желательно использовать такое имя, чтобы оно не конфликтовало с другими плагинами.

Опции задаются таким образом, чтобы в случае их отсутствия, им присвоилось какое-то значение по умолчанию.

Функция main() собственно и выполняет основную работу плагина. При вызове плагина, она автоматически будет выполнена в строчке this.each(function() { main($(this)); });. Если вы решите поменять её имя, то не забудьте внести изменения и в этом коде.

Теперь рассмотрим main(). Её парамер e не что иное, как используемый элемент. Наш исходный код переместится в эту функцию в таком виде:

function main(e) {
	e.click(function(){ 
		$(this).toggleClass('t-red') 
	});
}

Этот тот же самый «первоначальный» код, только мы использовали переменную e вместо $(".click").

Теперь добавим опции. Тут всё очень просто:

var config = $.extend({}, {
	to: 't-red'
}, options);

У нас одна опция. Получить её в функции main() можно так: config.to. В данном случае переменная config содержит все опции, а config.to конкретно выбранную. CSS-класс по умолчанию вы можете задать произвольно. Функция main() теперь будет такой:

function main(e) {
	e.click(function(){ 
		$(this).toggleClass(config.to) 
	});
}

Теперь можно задавать опции при вызове плагина, но нам нужно еще добавить возможность их менять/задавать через data-атрибуты. Мы будем использовать штатную возможность jQuery — функцию data(). Она возвращает значение указанного атрибута (без префикса «data-»).

function main(e) {
	
	var to = e.data('to');
	
	if (!to) { to = config.to }
 
	e.click(function(){ 
	 	$(this).toggleClass(to) 
	});
}

Вначале мы получаем data-атрибут «to» в одноименную переменную. Проверяем: если атрибута нет (он не задан), то переменной присваиваем значение из опции.

Получился вот такой плагин:

(function($) {
	$.fn.myClick = function(options) {
		var config = $.extend({}, {
			to: 't-red'
		}, options);
		
		function main(e) {
			var to = e.data('to');
			if (!to) { to = config.to }
			e.click(function(){ 
			 	$(this).toggleClass(to) 
			});
		}
		
		this.each(function() { main($(this)); });
		return this;
	};
})(jQuery);

Подобные простые плагины удобно использовать там, где нужно менять параметры для нескольких блоков на странице.


Создание сайтов (Украина) →
Как получить 100 баллов в Google PageSpeed Insights
Самая сложная задача в лендинге
twitter.com facebook.com
Другие записи сайта
Блого-сайт или не мусорим в своём блоге
Блого-сайт или не мусорим в своём блоге
Berry - библиотека утилитарных CSS-классов
Berry - библиотека утилитарных CSS-классов
Учимся работать с MF. Подвал. Дизайн
Учимся работать с MF. Подвал. Дизайн
Упрощение html-кода в Alpine.js
Упрощение html-кода в Alpine.js
Адаптивная сетка. Верстка по-новому
Адаптивная сетка. Верстка по-новому
Как быстро определить «правильные» шрифты?
Как быстро определить «правильные» шрифты?

Комментариев: 5 RSS

1Сергей23-09-2018 12:54

Спасибо

2вадим17-10-2018 15:04

Очень помог разобраться с нуля.

3Дмитрий31-12-2018 09:41

Спасибо!

4Александр Соловей15-08-2019 17:46

Спасибо!

5Павел14-02-2020 07:15

Кратко, просто и, главное, понятно с первого прочтения. Автору большое спасибо. Жаль, что редко встречаешь людей, владеющих искусством доходчивой подачи материала.

Оставьте комментарий!

Комментарий будет опубликован после проверки. Вы соглашаетесь с правилами сайта.

(обязательно)

Навигация
  • Шаблоны для MaxSite CMS 22
  • jQuery и JavaScript 6
  • Java и Android 5
  • PHP/ООП 25
  • SQL 17
  • Albireo Framework 11
  • Berry CSS 7
  • CSS, HTML, LESS, SASS 23
  • PHP 37
  • Тайм-менеджмент 9
  • Софт 37
  • SEO 13
  • Git. GitHub 3
  • CodeIgniter 5
  • Landing Page 3
  • Alpine.js 14
  • Фильмы 2
  • Дневник 55

Здесь можно заказать создание сайта (только Украина), шаблона или лендинга. Также вы можете выбрать готовые шаблоны для MaxSite CMS по небольшой цене. Также можно купить отдельные модули, компоненты для вашего сайта.

MaxSite.org
Как создать свой сайт

Услуги по созданию сайтов, блогов, лендингов
Обратная связь • Реклама на сайте
Карта сайта
Мои проекты
  • Шаблоны для вашего сайта
  • Заказать создание сайта
  • MaxSite CMS
  • Berry CSS (CSS Utilities)
  • Albireo Framework
  • UniCSS (Universal Atomic CSS)
  • Landing Page Framework
  • Бесплатные НТML-курсы
Ссылки
  • Telegram-канал
  • Github
  • Twitter
  • Telegram-бот
  • RSS
© MaxSite.org, 2006-2022. Работает на MaxSite CMS | Время: 0.2765 | SQL: 20 | Память: 4.62MB | Вход