JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<ul><li>Test</li></ul>
<button id="go">GO</button>

CSS

ul { background-color: 'yellow' }

JavaScript

(function($) {
    var settings = {
        bg: 'white'
    };
    
    var methods = {
        init: function(options) {
            options = $.extend({}, options, settings);
            return this.each(function () {
                $(this).data("test", options);
            });
        },
        whiten: function() {
            var options = this.data("test");
            this.css('background-color', options.bg);
        }
    };

    $.fn.test = function(method) {
        if(method == "umut") {
         
        }
        else if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist');
        }        
        
       
    }
      
          $.fn.testlog = function () { console.log(methods); };   
      
      
})(jQuery);

// var methods = { umut : function() { alert('umut'); } }; 

 var methods = {     
        umut: function(){
            alert('umut');   
      }
};


$.fn.extend(true,$.fn.test, methods );
//$newx = $.extend( { var methods = { umut : function() { alert('umut'); } } } , test ); 

$(document).ready(function() {

    $('ul').test().css('background-color', 'wheat');
    $('#go').click(function() {
        $('ul').test("whiten");
  //      $('ul').test("umut");
          $('ul').testlog();
       
     
    });
});