Как сделать простые табы плагином на jQuery

Данная статья — это продолжение статьи о табах на jQuery и flexbox. Сегодня мы модифицируем наш скрипт, и реализуем его в виде jQuery плагина немного усовершенствовав.
И первое что мы сделаем, это разнесем логику скрипта на два файла:

1. Стили. Они останутся не измены, мы их просто перенесем из html документа в файл «jquery.tab-light.css».
2. JavaScript. Его код перенесем в файл «jquery.tab-light.js»

Так же, не забудьте подключить выше описанные файлы в ваш html документ.

Второе. Назовем наш плагин «tabLight» (т. е. простой). Данное название мы будет использовать в JS коде.

Третье. Изменим наш HTML код страницы на следующий, добавив в него еще одну группу табов (не забываем о JS/CSS скриптах):

<div class="h2">Табы 1</div>
<div class="tabs tab-light">
	<ul class="tab-items">
		<li class="tab__item active" data-tab-item="tab-item-1">
			Вкладка 1
		</li>
		<li class="tab__item" data-tab-item="tab-item-2">
			Вкладка 2
		</li>
		<li class="tab__item" data-tab-item="tab-item-3">
			Вкладка 3
		</li>
	</ul>

	<div class="tab-contents">
		<div class="tab__content active" data-tab-content="tab-item-1">
			Содержимое вкладки 1
		</div>
		<div class="tab__content" data-tab-content="tab-item-2">
			Содержимое вкладки 2
		</div>
		<div class="tab__content" data-tab-content="tab-item-3">
			Содержимое вкладки 3
		</div>
	</div>
</div>

<div class="h2">Табы 2</div>
<div class="tabs tab-light">
	<ul class="tab-items">
		<li class="tab__item active" data-tab-item="tab-item-1">
			Вкладка 2.1
		</li>
		<li class="tab__item" data-tab-item="tab-item-2">
			Вкладка 2.2
		</li>
		<li class="tab__item" data-tab-item="tab-item-3">
			Вкладка 2.3
		</li>
	</ul>

	<div class="tab-contents">
		<div class="tab__content active" data-tab-content="tab-item-1">
			Содержимое вкладки 2.1
		</div>
		<div class="tab__content" data-tab-content="tab-item-2">
			Содержимое вкладки 2.2
		</div>
		<div class="tab__content" data-tab-content="tab-item-3">
			Содержимое вкладки 2.3
		</div>
	</div>
</div>

Код практически идентичен. Из предыдущего урока, здесь мы заменили дата атрибут «data-tabs» с названием, на класс «tab-light». Это сделано для того, что бы мы могли одной инициализацией, включить в работу сразу две и более групп табов. А не два и более раз вызывать функцию (как раньше)

Четвертое. Инициализируем плагин:

<script>
	jQuery(document).ready(function($)
	{
		$('.tab-light').tabLight();
	});
</script>

«Навесив» табы на класс «tab-light». Таким образом, заработают сразу две группы табов.

Сам код плагина будет иметь следующий вид:

(function($) {
	$.fn.tabLight = function(options)
	{
		var settings = $.extend({
			active: 'active',
		}, options);
		
		this.each(function(i, o)
		{
			var $Tabs = $(o);
			
			$Tabs.find('[data-tab-item]').click(function(e)
			{
				e.preventDefault();

				$Tabs.find('[data-tab-item]').map(function(i, o)
				{
					jQuery(o).removeClass(settings.active);
				});
				jQuery(this).addClass(settings.active);

				$Tabs.find('[data-tab-content]').map(function(i, o)
				{
					jQuery(o).removeClass(settings.active);
				});
				$Tabs.find('[data-tab-content="' + jQuery(this).data('tab-item') + '"]').addClass(settings.active);
			});
		});
	};
}(jQuery));

Где:
tabLight — название нашего плагина
settings — переменная содержащая настройки плагина. В нашем примере там присутствует лишь один параметр «active». И он содержит название css класса, который используется у активной вкладки группы табов.

Данные параметры передаются в плагин следующим образом (это лишь пример, в нашем уроке другая реализация):

$('.tab-light').tabLight({
	active: 'my-class'
});

т. е. в виде объекта единственного параметра плагина tabLight.
Где:
active — это параметр объекта, содержащий класс помечающий табы активными (об этом написано выше).

Внутри плагина:

$.fn.tabLight = function(options)
{
	var settings = $.extend({
		active: 'active',
	}, options);
 /*...*/
};

мы можем считать опции плагина через переменную «options». А JQ функция «$.extend()», позволяет задать параметры «по умолчанию» для объекта опций переданного в плагин. Т.е. таким образом, мы можем не передавать в него ничего, если заданные по умолчанию параметры плагина нас вполне устраивают. В нашем случае, это класс активной вкладки «active» со значением «active».

Далее, чтобы одним «вызовом» плагина мы могли инициализировать сразу все группы табов, мы используем jQuery функцию «$.each()». Она в цилке проходится по всем элементам (в нашем примере «.tab-light») и «навешивает»на них табы:

this.each(function(i, o)
{
	var $Tabs = $(o);
	/* … */
});

Далее, код идентичен предыдущему уроку о табах. И разбирать его думаю нет смысла. Сам код урока, вы можете найти здесь.