JSFiddle - React, Tailwind, and code Playground

by Mingtao Sun

HTML

<h1>Plugin and callback</h1>

<button class="button">Click me 1</button>
<button class="button">Click me 2</button>

JavaScript

(function ($) {
    $.extend($.fn, {
        changeButtonStyle: function (options) {

            var settings = $.extend({
                // These are the defaults.
                color: "#556b2f",
                backgroundColor: "white",
                onButtonShow: function () {}
            }, options);

            return this.each(function () {
                var button = $(this);
                button.css({
                    color: settings.color,
                    backgroundColor: settings.backgroundColor
                });
                button.on("click", clickButton);
            });

            function clickButton() {
                var button = $(this);
                settings.onButtonShow.call(button);
            }
        }
    });
})(jQuery);

$(function () {
    var button = $('.button');
    button.changeButtonStyle({
        color: "orange",
        onButtonShow: function () {
            $(this).after("<span>hahaha</span>");
        },
    });
});