Як створити власний плагін jQuery

Зручність плагіна jQuery полягає в тому, що ви можете використовувати один і той же код кілька разів для різних об’єктів. У цьому випадку копіювати та вставляти код не потрібно. Крім того, ви можете змінити поведінку плагіна за допомогою різних параметрів. Щоб написати плагін jQuery, потрібно розшитити об’єкт $.fn

Загалом це виглядає так:

$.fn.MyPlugin = function() {
    //plugin code
}

Ми пишемо плагін, який додасть абзац із класом «paragraph» після вибраного елементу, клацнувши на ньому. За замовчуванням ми встановимо червоний колір тексту нашого абзацу.

(($) => {
    $.fn.myPlugin = function(options) {
        const settings = $.extend({ //set default parameters
            color: 'red'
        }, options);

        //write the logic of our plugin
        $(this).on('click', function() {

            const par = '<p class="paragraph">An added paragraph</p>';
            $(this).after(par);
            $(this).next('.paragraph').css('color', settings.color);

        });

        return this; //for call chains
    }
})(jQuery);

Виклик для двох різних елементів виглядає так:

$(() => {
 
    $('.firstsel').myPlugin({
        color: 'green'
    });
     
    $('.secondsel').myPlugin();
     
});

Ви можете побачити приклад того, як це працює на Codepen: https://codepen.io/igorrybalko/pen/WberZOY