JQuery Plugin - How to Add / Link Events

Question

Ok, this is my first hit on creating a jQuery plugin, so I'm currently teaching lessons.

Still i

(function($) { $.tippedOff = function(selector, settings) { var config = { 'top':0, 'left':0, 'wait':3000 }; if(settings){$.extend(config, settings);} var $elem = $(selector); if($elem.length > 0) { $elem.each(function() { $(this).css({"color":"#F00"}); }) } return this; }; })(jQuery); 

What works to change the text color of the provided elements. But. I want to add functionality to the elements that the plugin takes effect. For example, hover or click an event. But at the moment, I can’t deceive this idea, seeing that selector can be anything. Thus, it does not look like I can hard code something in one of them, for example, as usual, using the usual jQuery methods.

So, how to do this, how do I add the addition of this type of function to things after rendering it?

Answer 1

When creating plugins, it’s very easy to complicate things, so try to keep things beautiful and simple.

I have provided you with TWO strong> tippedOff plugin tippedOff . There is also a jsfiddle demo of both plugins here.

The first uses your source code as it is ( NO SIGNIFICANT CHANGE ):

 $.tippedOff = function(selector, settings) { var config = { 'top':0, 'left':0, 'wait':3000 }; if(settings){$.extend(config, settings);} var $elem = $(selector); if($elem.length > 0) { $elem.each(function() { //bind mouseenter, mouseleave, click event $(this).css({"color":"#F00"}) .mouseenter(function(){ $(this).css({"color":"green"}); }) .mouseleave(function(){ $(this).css({"color":"#F00"}); }) .click(function(){ $(this).html('clicked'); }); }) } return this; }; 

This one, however, is based on your source code. Basically, I restored the source code using these tips . This is how I personally take care of this. I also provided you with a breakdown below the changes made. ( SIGNIFICANT CHANGES MADE ):

 $.fn.tippedOff = function(settings) { var config = $.extend( { 'top':0, 'left':0, 'wait':3000, 'color': 'orange', 'hoverColor': 'blue' }, settings); return this.each(function() { $this = $(this); $this.css({ 'color': config.color}) .mouseenter(function(){ $this.css({ 'color': config.hoverColor }); }) .mouseleave(function(){ $this.css({ 'color': config.color }); }) .click(function(){ $this.html('clicked'); }); }); } 

----------------------------------------

Structure:

Original code:

 $.tippedOff = function(selector, settings) { 

Modified by:

 $.fn.tippedOff = function( settings ) { 

Comments:

The difference between $.tippedOff and $.fn.tippedOff is huge! Adding your plugin to the $.fn namespace rather than the $ namespace will not let you provide a selector and make life easier.

I personally like this answer , in which @Chad states:

My rule I adhere to is: use $. when it is not related to the DOM (e.g. ajax) and uses $ .fn. when it works with elements captured by a selector (e.g. DOM / XML elements).

---

Original code:

 if(settings){$.extend(config, settings);} 

Modified by:

 var config = $.extend( { 'top':0, 'left':0, 'wait':3000 }, settings); 

Comments:

Having an if is redundant. .extend() does all the work for you.

---

Original code:

 var $elem = $(selector); if($elem.length > 0) { $elem.each(function() { $(this).css({"color":"#F00"}); }) } return this; 

Modified by:

 return this.each(function() { $this = $(this); $this.css({ 'color': config.color}); }); 

Comments:

Using return this.each(function(){}) is good practice and supports binding. In addition, you no longer have to worry about the length of the selector .

---

* NOTE: If you want to add additional events, use another methods in your plugin: jQuery Doc Reference - Authoring Plugins .

I hope this helps, and please let me know if you have any questions!

Answer 2

I do not have enough reputation points for comments and I completely agree with House, which is very knowledgeable. I just wanted to add that in the modified code, it would be better to create a local variable using the var keyword:
var $this = $(this);
This will improve the plugin and allow you to apply the plugin to several elements on the same page, for example:
$('#testX').tippedOff2();
$('#testY').tippedOff2();
$('#testZ').tippedOff2();