Tabs jQuery plugin

-

Tabs are a fairly common element. There are various implementations of this element on the Internet. But often the tabs are overloaded with code filled with effects that are unlikely to be needed in ordinary tasks. Therefore, it was decided to write simple tabs, so to speak, “for myself”. Maybe they will be useful to someone else.

Tabs can be downloaded from GitHub. Tabs do not have any effects, but directly fulfill their purpose - hide and display.

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*/
}

Initialization

$(function(){

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

You can also use other selectors instead of default ones. It is possible to call a callback when clicking.

Initialization with options

$(function(){

   $('.tabsblock').simpleTabs({
     'title' : '.othernametab', // tab title selector
     'content': '.othercontenttab', // tab content selector
     'cb': callbackFunction // callback function
   });
});

An anonymous function can be called as a callback.

Plugin

(function($){

    $.fn.simpleTabs = function (options) {

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

        let 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 () {
            let activeClass = $(this).hasClass('actheadtab'); // is the tab title active?
            if (!activeClass) {
                let 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);

Comments

Post a Comment

Popular posts from this blog

JavaScript Inheritance and Classes

-
In many programming languages implemented inheritance. And it also exists in JavaScript. First, consider prototype inheritance. We describe the function constructor function Animal(name, weight, color){ this.name = name || 'someAnimal'; this.weight = weight; this.color = color; //do some actions during initialization console.log(this.name + ' construct animal'); } // write the method to the prototype Animal.prototype.sayName = function(){ console.log(this.name); } We describe the constructor function that inherits the Animal class. And we will expand it, we will add in addition own properties and methods function Mammal(name, weight, color, limbs){ Animal.apply(this, arguments); this.limbs = limbs || 4; console.log(this.name + ' construct mammal'); } Mammal.prototype = Object.create(Animal.prototype); Mammal.prototype.constructor = Mammal; Mammal.prototype.run = function(){ console.log('run'); } Cre
Read more

Typical gulpfile.js

-
The file is written for Gulp 4 . The file is designed to work with styles ( SCSS ) and JavaScript . All minify and compile sourcemaps for debugging. Third-party scripts and styles are in separate files. const production = ( process.env.NODE_ENV == 'production' ); //base part let {src, dest, parallel, series, watch} = require('gulp'), rename = require('gulp-rename'), sourcemaps = require('gulp-sourcemaps'); //css part let sass = require('gulp-sass'), cleanCSS = require('gulp-clean-css'), autoprefixer = require('gulp-autoprefixer'); const babel = require('gulp-babel'), uglify = require('gulp-uglify-es').default, include = require("gulp-include"); let pathFiles = { build: { css: './css/', js: './js/' }, src: { css: './src/scss/**/*.scss', js: './src/js/**/*.js' } }; function swallowError(error){
Read more

Swipe events on touch devices

-
Every day sensory devices are being introduced into our lives. These devices have specific events, unlike the desktop. One of these events is the swipe . Especially often have to deal with it when developing a mobile version of the site. Code: (() => { let initialPoint; let finalPoint; document.addEventListener('touchstart', function(event) { initialPoint=event.changedTouches[0]; }, false); document.addEventListener('touchend', function(event) { finalPoint=event.changedTouches[0]; let xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX); let yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY); if (xAbs > 20 || yAbs > 20) { if (xAbs > yAbs) { if (finalPoint.pageX < initialPoint.pageX){ // to left } else{ // to right } } else { if (final
Read more