Pestañas jQuery plugin

15.04.19

Las pestañas son un elemento bastante común. Existen varias implementaciones de este elemento en internet. Pero a menudo las pestañas están sobrecargadas con un código lleno de efectos que probablemente no sean necesarios en las tareas ordinarias. Por lo tanto, se decidió escribir pestañas simples, por así decirlo, "para mí". Tal vez sean útiles para otra persona.

Las pestañas se pueden descargar desde GitHub. Las pestañas no tienen ningún efecto, pero cumplen directamente con su propósito: ocultar y mostrar.

HTML

<!--Installation-->
<head>
     <script src="/jquery.js"></script>
     <script src="/simpletabs.js"></script>   
</head>
<!-- //-->
<div class="tabsblock">
     <div class="headertabs">
          <div class="nametab actheadtab">Tab 1</div>
          <div class="nametab">Tab 2</div>
          <div class="nametab">Tab 3</div>
     </div>
     <div class="tabswr">
          <div class="contenttab activetab">
               Contents of the first tab
          </div>
          <div class="contenttab">
               Contents of the second tab
          </div>
          <div class="contenttab">
               Contents of the second tab
          </div>
     </div>
</div>

CSS

.contenttab{
     display: none; /* hide contents of the tabs*/
}
.contenttab.activetab{
     display: block; /*display contents of the active tab*/
}

Inicialización

$(function(){

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

También puede utilizar otros selectores en lugar de los predeterminados. Es posible llamar a una devolución de llamada al hacer clic.

Inicialización con opciones

$(function(){

   $('.tabsblock').simpleTabs({

     'title' : '.othernametab', // tab title selector
     'content': '.othercontenttab', // tab content selector
     'cb': callbackFunctionName // callback function

   });
     
});

Plugin

(function($){

    $.fn.simpleTabs = function (options) {

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

        var nametab = $(this).find(settings.title), // tab title selector
            contenttab = $(this).find(settings.content), // tab content selector
            callback = settings.cb,
            tabsBlock = this;
        nametab.on('click', function () {
            var activeClass = $(this).hasClass('actheadtab'); // is the tab title active?
            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 (callback) {
                    callback();
                }
            }
        });
    };

})(jQuery);

Demo

Tab 1
Tab 2
Tab 3
Contents of the first tab
Contents of the second tab
Contents of the third tab
blog comments powered by Disqus