Cómo crear un plugin de jQuery

07.04.19

La conveniencia del complemento jQuery es que puede usar el mismo código varias veces para diferentes objetos. En este caso, no es necesario copiar y pegar el código. Además, puede cambiar el comportamiento del complemento con diferentes parámetros. Para escribir su complemento jQuery, necesita expandir el objeto $.fn

En general, se ve así:

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

Escribiremos un complemento que agregará un párrafo con la clase "paragraph" después del objeto seleccionado haciendo clic en él. Por defecto estableceremos el color rojo del texto de nuestro párrafo.

($ => {
    $.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);

La convocatoria de dos elementos diferentes se ve así:

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

Ejemplo:

Párrafo con la clase "firstsel"

Párrafo con la clase "secondsel"

blog comments powered by Disqus