Make customizable jQuery plug-ins and be more awesome

October 22nd, 2010

The great thing about making you’re own plug-ins is that once you’ve built something, you can easily use it again. But most of the time you’ll want to change some of the settings on your plug-in and it can be annoying to have to edit it every time you use it. With a jQuery plug-in, we can set up the plug-in to accept variables so that we can customize it every time we use it. This is perfect for plug-ins that create pop-up windows or image sliders.

We are going to take the totally usefull plug-in we made last time and change it so we can pick the new background color and also so we can set a new width of the div. The HTML and CSS are the same:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Plug-in</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<style>
#blue {
  width:200px;
  height:200px;
  background:#00f;
  float:left;
  margin-right:20px;
}
#red {
  width:200px;
  height:200px;
  background:#f00;
  float:left;
}
</style>
</head>

<body>
  <div id="blue"></div>
  <div id="red"></div>
</body>
</html>

Same as last time, nothing major here. Next we’ll modify our plug-in to allow us to pass in some variables:

1
2
3
4
5
6
7
8
9
10
11
12
13
(function($){
  $.fn.our_plugin = function(vars) {  
    var element = this;
    var color = (vars.color != undefined) ? vars.color : '#0f0';
    var width = (vars.width != undefined) ? vars.width : 400;
    element.click(function() {
      element.css({
      'background-color' : color,
      'width' : width + 'px'
      });
    });
  }
})(jQuery);

Ok, so what’s going on here? Well, the first change from our early plug-in is in the second line:

1
$.fn.our_plugin = function(vars) {

We are passing in our variables from the HTML file through vars. With this we can pass through as many variables as we want to. This time we’re passing two plus the element in the HTML document that we want to affect, this will give us these three variables:

1
2
3
var element = this;
var color = (vars.color != undefined) ? vars.color : '#0f0';
var width = (vars.width != undefined) ? vars.width : 400;

The first one, clicked, is the same as last time, but the other two look a lot different and might be a bit confusing to some one that’s not familiar with JavaScript shorthand. What we are doing here is setting the variable color to what we set color to in the HTML file or else to #0f0. This is the same as an if statement.

1
2
3
4
5
if (vars.color != undefined) {
  color = vars.color;
} else {
  color = ‘#0f0’;
}

So we are saying if vars.color isn’t undefined, color equals vars.color or else color equals green. We do this so that if we don’t set a color then the plug-in will default to green. And we’re doing the same with width, if we don’t set it, then the default with is 400 pixels. We could also set this to null and then run an if statement later, but this is simpler. Next is the actual meat of the plug-in:

1
2
3
4
5
6
element.click(function() {
  element.css({
    'background-color' : color,
    'width' : width + 'px'
  });
});

Here we’re saying when element is clicked then change the CSS properties for element. Now we have to set up how we call the plug-in in our HTML file:

1
2
3
4
5
6
7
8
$(function() {
  $('#blue').our_plugin({
    width: 100
  });
  $('#red').our_plugin({
    color: 'yellow'
  });
});

We’re calling our plug-in for both the #blue and #red divs and we are setting the width for the #blue div to 100 pixels and the background color of the #red div is being changed to yellow. So now when the #blue div is clicked it changes to a width of 100 pixels and changes to a green background whereas the #red div will become 400 pixels wide and get a yellow background.

And that’s all there is to setting up a jQuery plug-in that has custom values. Building your plug-ins this way makes them even more useful and enables you to use them over and over without having to edit the actual JavaScript file.

Leave a Reply

Your email address will not be published. Required fields are marked *