Как создать собственный плагин jQuery

07.04.19

Удобство плагина jQuery заключается в том, что можно использовать один и тот же код несколько раз для разных объектов. При этом код копипастить не нужно. К тому же можно изменять поведение плагина различными параметрами. Чтобы написать свой jQuery плагин, необходимо расширить объект $.fn

В общих чертах все выглядит так:

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

Напишем плагин, который будет добавлять по клику параграф с классом "paragraph" после выбранного объекта. По умолчанию зададим красный цвет текста нашего параграфа.

($ => {
    $.fn.myPlugin = function(options){
        let settings = $.extend({ //set default parameters
                color: 'red'
            }, options);
 
        //write the logic of our plugin
        $(this).on('click', function(){
 
            let 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();
     
});

Пример:

Параграф с классом "firstsel"

Параграф с классом "secondsel"

blog comments powered by Disqus