jQuery плагин табов

Табы достаточно распространенный элемент верстки. На просторах интернета присутствуют различные реализации данного элемента. Но чаще всего готовые табы перегружены кодом, напичканы эффектами, которые вряд ли понадобятся в обычных задачах. Поэтому было принято решение написать простые табы, так сказать "для себя". Возможно они еще кому-то пригодятся

Табы можно скачать с GitHub. Табы не имеют никаких эффектов, а выполняют непосредственно свое предназначение - скрывают и отображают.

Демо:

Таб 1
Таб 2
Таб 3
Содержимое первого таба
Содержимое второго таба
Содержимое третьего таба

Понятно, что необязательно скрипт подключать отдельным файлом "simpletabs.js". Достаточно содержимое файла скопировать в свой файл скриптов. Библиотека jQuery должна быть подключена выше скрипта табов

HTML

<!--Подключаем скрипт-->
<head>
     <script src="jquery.js"></script>
     <script src="simpletabs.js"></script>   
</head>
<!-- //-->
<div class="tabsblock">
     <div class="headertabs">
          <div class="nametab actheadtab">Таб 1</div>
          <div class="nametab">Таб 2</div>
          <div class="nametab">Таб 3</div>
     </div>
     <div class="tabswr">
          <div class="contenttab activetab">
               Содержимое первого таба
          </div>
          <div class="contenttab">
               Содержимое второго таба
          </div>
          <div class="contenttab">
               Содержимое третьего таба
          </div>
     </div>
</div>

CSS


.contenttab{
     display: none; /*скрываем содержимое табов*/
}
.contenttab.activetab{
     display: block; /*отобразим содержимое активного таба*/
}

Инициализация скрипта

$(document).ready(function(){

   $('.tabsblock').simpleTabs();
     
});

Так же можно использвать другие селекторы вместо дефолтных. И имеется возможность вызывать callback при клике.

Инициализация с параметрами:

$(document).ready(function(){

   $('.tabsblock').simpleTabs({

     'title' : '.othernametab', //заголовок таба
     'content': '.othercontenttab', //содержимое таба
     'cb': callbackFunctioinName //имя функции колбека

   });
     
});

В качестве колбека можно вызывать анонимную функцию.

Код плагина

(function($){

    $.fn.simpleTabs = function (options) {

        var settings = $.extend({
            'title' : '.nametab', 
            'content': '.contenttab',
            'cb': ''
        }, options);

        var nametab = $(this).find(settings.title), /*селектор имен табов*/
            contenttab = $(this).find(settings.content),/*селектор содержимого табов*/
            tabsBlock = this;
        nametab.on('click', function () {
            var activeClass = $(this).hasClass('actheadtab');/*является ли имя таба активным?*/
            if (!activeClass) {
                var ind = $(this).index();
                $(tabsBlock).find('.actheadtab').removeClass('actheadtab');
                $(this).addClass('actheadtab');
                $(tabsBlock).find('.activetab').removeClass('activetab');
                contenttab.eq(ind).addClass('activetab');
                if (settings.cb) {
                    settings.cb();
                }
            }
        });
    };

})(jQuery);
Share: