Як зробити прості таби плагіном на jQuery

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

Перше, що ми зробимо — це розділимо логіку скрипта на два файли:

1. CSS стилі. Ми просто перенесемо їх з 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'
});

Тобто як об’єкт, параметром якого є клас активного табу.

Всередині плагіна:

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

Ми можемо зчитати опції через змінну «options», а функція «$.extend()» дозволяє задати значення за замовчуванням.

Далі, щоб одним викликом активувати всі таби, ми використовуємо $.each():

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

Інша частина коду ідентична попередньому уроку. Тому немає сенсу розбирати її ще раз. Сам код уроку доступний за цим посиланням.