Собственный плагин jQuery

Удобство плагина jQuery заключается в том, что можно использовать один и тот же код несколько раз для разных объектов. При этом код копипастить не нужно. К тому же можно изменять поведение плагина различными параметрами. Чтобы написать свой jQuery плагин, необходимо расширить объект $.fn.

В общих чертах все выглядит так:

 	$.fn.MyPlugin = function(){
 		//пишем логику плагина
 	}

Напишем плагин, который будет добавлять по клику параграф с классом "par" после выбранного объекта. По умолчанию зададим красный цвет текста нашего параграфа.

	(function($){
		$.fn.myPlugin = function(options){
			var settings = $.extend({ //задаем параметры по умолчанию
					color: 'red'
				}, options);

			//пишем логику нашего плагина
			$(this).on('click', function(){

				var par = '<p class="par">Добавленный параграф</p>';
				$(this).after(par);
				$(this).next('.par').css('color', settings.color);

			});

			return this; //для цепочек вызовов
		}
	})(jQuery);

Вызов для двух разных элементов выглядит так:

	$(document).ready(function(){

		$('.firstsel').myPlugin({
			color: 'green'
		});
		

		$('.secondsel').myPlugin();
		
	});

Пример:

Параграф с классом "firstsel"

Параграф с классом "secondsel"

Share: