Плагін jQuery Tabs

Таби – досить поширений елемент. В Інтернеті є різні реалізації цього елемента. Але часто такі таби перевантажені кодом, наповнені ефектами, які навряд чи знадобляться в звичайних завданнях. Тому було вирішено написати прості таби, так би мовити, “для себе”.

Цей плагін був написаний давно і я використовував його в своїй роботі. jQuery на даний момент не вважається сучасним рішенням. Але є багато проектів, де ця бібліотека все ще використовується. Можливо цей плагін для табів комусь стане в нагоді. Зрозуміло, що для роботи плагіна в проекті має бути підключений jQuery.

В одній із попередніх статей ми розбиралися, як написати плагін jQuery загалом. Тепер розглянемо більш конкретний приклад.

HTML

<div class="tabs">
     <div class="tabs__head">
          <div class="tabs__name active">Tab 1</div>
          <div class="tabs__name">Tab 2</div>
          <div class="tabs__name">Tab 3</div>
     </div>
     <div class="tabs__body">
          <div class="tabs__cont active">
               1. Contents of the first tab
          </div>
          <div class="tabs__cont">
               2. Contents of the second tab
          </div>
          <div class="tabs__cont">
               3. Contents of the third tab
          </div>
     </div>
</div>

CSS

/* required styles */
.tabs__cont {
     display: none; /* hide contents of the tabs*/
}
.tabs__cont.active {
     display: block; /*display contents of the active tab*/
}

Зверніть увагу. Якщо ви змінюєте назву активного класу, то CSS також потрібно змінити.

Ініціалізація

//init plugin
$(() => {
  
  $('.tabs').simpleTabs();
  
});

Ви також можете використовувати інші селектори замість дефолтних. При перемиканні є можливість викликати callback.

Ініціалізація з параметрами

$(() => {
  
   $('.tabs').simpleTabs({
     title: '.othernametab', // tab title selector
     content: '.othercontenttab', // tab content selector
     cb: callbackFunction // callback function
     activeClass: 'show'
   });
  
});

Код плагіна

$.fn.simpleTabs = function (options) {

  const settings = $.extend({
    title : '.tabs__name', 
    content: '.tabs__cont',
    activeClass: 'active',
    cb: ''
  }, options);

  const tabName = $(this).find(settings.title), // tab title selector
        tabCont = $(this).find(settings.content), // tab content selector
        callback = settings.cb,
        tabsEl = this;

  tabName.on('click', function () {
    const active = $(this).hasClass(settings.activeClass); // is the tab title active?

    if (!active) {
      const i = $(this).index();
      const activeEls = $(tabsEl).find(`.${settings.activeClass}`);
      activeEls.each(function(){
        $(this).removeClass(settings.activeClass);
      });

      $(this).addClass(settings.activeClass);
      tabCont.eq(i).addClass(settings.activeClass);

      if (callback) {
        callback();
      }
    }
  });
};

Ви можете побачити приклад використання плагіна jQuery на Codepen: https://codepen.io/igorrybalko/pen/xbKVmOz