Write your own jQuery plug-ins because it will make your life a lot easier

October 19th, 2010

jQuery has made my life so much easier and in fact I think it’s one of those things that’s just made the web a better experience for everyone because it works the same in every browser. It’s one of those things where it’s easy to learn and most of the effects or events you want to add to a site have already been built by someone else and they’ve put it out there for you to use. And one of the best things about it is how easy it is to build your own plug-in so you don’t have to worry about rewriting code for the same effect.

We’ll write a quick plug-in here just to show you how simple it is. Here’s the HTML and CSS:

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>

We’re just making two boxes, one red and one blue. And we’ve linked to directly to Google’s CDN of jQuery. Now we’re going to make it so when you click either one of the boxes, they turn green. Pretty much useless but I think it’s a good way for a beginner to see how to set this up. Now for our jQuery file. Open a blank file, I’ve called mine our_plugin.js and start off with this:

1
2
3
(function($){

})(jQuery);

That’s how every plug-in is going to start, we’re assigning the $ to jQuery so the browser knows what to do when it loads the file. Next, we need to set up and name our function:

1
2
3
4
5
(function($){
  $.fn.our_plugin = function() {
   
  }
})(jQuery);

The standard is to name your plug-in the same as the file name. Honestly, I don’t know if this would still work if you didn’t. Now for the actually meat and bones of this thing:

1
2
3
4
5
6
7
8
(function($){
  $.fn.our_plugin = function() {
    var clicked = this;
    clicked.click(function() {
      clicked.css('background-color', '#0f0');
    });
  }
})(jQuery);

What’s going on here is that we are assigning whatever we’ve passed to our plug-in from our HTML file to the variable name clicked. And then we are saying when clicked is clicked run this function where we are changing the background color of whatever we passed into the function.

And that’s it. It’s pretty quick when you’re just doing something simple. Remember, this is just to show the basics of how you going about setting up a jQuery plug-in. But we aren’t done yet. Even if you linked to the our_plugin.js file, nothing would happen. We just need to add a little bit more to the HTML file:

1
2
3
4
5
6
7
<script src="our_plugin.js"></script>
<script>
$(function() {
  $('#blue').our_plugin();
  $('#red').our_plugin();
});
</script>

The usual place to add this is at the top in between the head tags or at the end, just before the closing body tag. Remember to have it after the script tag that loads jQuery though, or else it won’t work.

So what’s happening here? Well, first, we’re passing the #blue div to our plug-in and then next we’re passing the #red div. And now when you click on either div they’ll change to green. Yes, it’s really that easy to set up.

Next time, I’m going to show you how to build one that’s a bit more complicated, where you’ll set up some variables that you can control when calling the plug-in in your HTML file.

Leave a Reply

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