JSFiddle - React, Tailwind, and code Playground
HTML
<p>
First paragraph, applied default plugin configuration
</p>
<p>
Second paragraph, applied custom <span class="italic">secondColor</span>
</p>
<div>
<span>Change color #1</span>
<span>Change color #2</span>
</div>
CSS
p {
margin: 10px;http://jsfiddle.net/x9hWk/67/#http://jsfiddle.net/x9hWk/68/#http://jsfiddle.net/x9hWk/69/#
padding: 10px;
cursor: pointer;http://jsfiddle.net/pioul/x9hWk/3/#
}
div span {
padding: 5px;
border: 1px solid black;
cursor: pointer;
}
.italic {
font-style: italic;
}
JavaScript
// plugin stuff
(function($){
$.fn.color = function(options){
options = $.extend({}, $.fn.color.defaultOptions, options);
$(this).each(function(){
// step 1
$(this).css('background-color', options.firstColor);
// step 2
var color = {
element: $(this),
firstColor: options.firstColor,
secondColor: options.secondColor,
// step 3
changeColor: function(){
this.element.css('background-color', this.secondColor);
}
};
$(this).data("color", color);
$(this).unbind(".color").bind("click.color", function(e){
var color = $(this).data("color");
alert('First color: '+ color.firstColor +' - Second color: '+ color.secondColor);
});
});
return $(this);
};
$.fn.color.defaultOptions = {
firstColor: '#0f0',
secondColor: '#f00'
};
})(jQuery)
// call the plugin on our 2 paragraphs
// default configuration on the first one
$("p:eq(0)").color();
// custom secondColor on the second one
$("p:eq(1)").color({
secondColor: '#555'
});
// call the changeColor() method of the paragraphs from the outside (when clicking the spans)
$("div span").each(function(i){
$(this).bind("click", function(){
$("p:eq("+ i +")").data("color").changeColor();
});
});