How to create a plugin for jQuery

December 23rd, 2008

As you may notice we love jQuery over here because in addition to being one of the best javascript libraries on the web It can be extended so easily, from the basic to the advanced features.

In this case We will learn the basic theory about plugins in jQuery and how to create them with 2 real examples: a simple alert plugin & other plugin that will highlight all inputs in a page when them get the focus.

So get ready to learn guys!

Introduction

Sometimes we think that something is too hard to develop and we just avoid doing it and that’s what happened to me with jQuery plugins. Create a jQuery plugin its easier than I thought and I will show you that with a clear objetive We can develop a plugin in minutes as I said, We have a clear intention about what the plugin must do.

Understanding the Concept

There are 2 basic objects that we will extend:

jQuery: mainly handles the internal processing.
jQuery.fn: handles the interaction of elements.

So if We want to create a general function like $.post we must use jQuery object. But if We need to create a new kind of animation for our elements, using the power of the jQuery selectors (for DOM’s elements) we would extend the jQuery.fn object.

So now that we have differenciated these 2 type of objects We will see a real working example of these, but Before starting with the examples It’s important to remember that:

Our plugin file must be named like: jquery.plugin_name.js
We will test our examples in an HTML file in which We have included the jQuery library before include the plugins (as always you know)
By the way, remember that you must call all your functions / methods when the DOM object is ready ( $.ready… )

So let’s begin with real working examples guys!

Our first plugin

We will create our first plugin named jquery.first.js which will activate an alert in our browser in 2 ways, using both objects (jQuery & jQuery.fn).

Here you have the basic HTML code that We will use for our first plugin:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>yensdesign.com - First plugin with jQuery</title>
</head>
<body>
	<div id="one">
	</div>
	<div id="two">
	</div>
	<div id="three">
	</div>
	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
	<script type="text/javascript" src="js/jquery.first.js"></script>
	<script type="text/javascript" src="js/try_jquery.js"></script>
	<script type="text/javascript" src="js/try_jqueryfn.js"></script>
</body>
</html>

So now we must create our plugin named first in a file js named jquery.first.js:


// jQuery object
jQuery.first = function(message){
	alert(message);
}
// jQuery.fn object
jQuery.fn.first = function(message){
	this.each(function(){
		alert(message + " " + this.id);
	});
}

As you can see we have created the two possible plugins in the same file to avoid creating 2 files, nothing special. If you have read the previous javascript code We will show an alert custom message:

Using jQuery object in try_jquery.js We will get a simple alert when the DOM is ready:


$(document).ready(function(){
	$.first("hi there!");
});

In the other hand, using jQuery.fn object in try_jqueryfn.js We will get a simple alert for each element contained in a specific element, in our case divs contained in the body:


$(document).ready(function(){
	$("body > div").first("Hi division");
});

Simple but powerful & useful right? If you cann’t see the utility of that, maybe You will see It with a little bit more complex plugin that we will create in next step.

Remember that you can test the example over here.

One step further: Input highlighting plugin!

As in our first plugin, We will create a plugin called inputHighlight in jquery.inputHighlight.js file. Our plugin as you may suppose will highlight our inputs when They got the focus, changing their background color to be more visible.

Let’s create a little HTML case example to see it:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>yensdesign.com -inputHighlight plugin with jQuery</title>
</head>
<body>
	<form method="post" action="" name="test">
		<div>
			<label for="name">Name</label>
			<input id="name" type="text">
		</div>
		<br />
		<div>
			<label for="country">Country</label>
			<input id="country" type="text">
		</div>
		<br />
		<label for="password">Password</label>
		<input id="password" type="password">
	</form>
	</div>
	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
	<script type="text/javascript" src="js/jquery.inputHighlight.js"></script>
	<script type="text/javascript" src="js/try.js"></script>
</body>
</html>

Now we need to create the jquery.inputHighlight.js plugin that will be similar to the previous “for each element alert”.

We will manage the focus & blur events on inputs changing their background color defined by parameter in our plugin.

Let’s see the code:


// jQuery object
jQuery.inputHighlight = function(color){
	$("input").each(function(){
		$(this).focus(function(){
			$(this).css({"background" : color});
		});
		$(this).blur(function(){
			$(this).css({"background" : "white"});
		});
	});
}

So one more time we will get a list of all elements that matched the future selector, but this time we won’t need to specify a selector like $(”input”) because we will extend from jQuery object instead of jQuery.fn because we only want to highlight all inputs in our html. In try.js file, we will use a color parameter that we must specify when We call the plugin.

It’s important to know that if you want to create the plugin for specific kind of inputs you must extend from jQuery object to manage and specify elements in your future try.js file. Remember that jQuery object doesn’t manage specific elements.

Now we need to add the code to try.js to call and test the plugin:


$(document).ready(function(){
	$.inputHighlight("#a6cdec");
});

As you can see it’s easier than We expected, here you can try the live working demo.

Final thoughts & downloable files

And that’s all guys, as always I hope you can use it for your personal projects and to improve your own skills in jQuery. You can download the entire tutorial with the 2 examples over here.

Thanks for all those follow us on twitter, who help us to test the private beta of plusmusica.com (just comment or mail us if you want an invitation!) and who recommend yensdesign.com to others.

Thank you so much and see You on next tutorial!

One more thing…

We guarantee you that you will pass your EX0-101 exam in first attempt with help of 70-291 prep resources. Download the complete practice guide for PMI-001 and pass your certification on time.

Tags: beginners, create plugin, first plugin, how to, input plugin, inputHighlight, javascript, jquery, plugin
Category: Coding, Tutorials, Web Design

This entry was posted on Tuesday, December 23rd, 2008 at 12:18 pm and is filed under Coding, Tutorials, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Enjoy this post?

Your vote will help us to grow this website and write more entries like this one :)

Web 2.0 Announcer

December 24th, 2008

How to create a plugin for jQuery…

[...]As you may notice we love jQuery over here because in addition to being one of the best javascript libraries on the web It can be extended so easily, from the basic to the advanced features. In this case We will learn the basic theory about plugin…

ajpiano

December 25th, 2008

Nice job on the basics but you neglect to mention some crucial things like how to operate on an arbitrary set of elements, or how to continue the chain by doing

$.fn.foo = function() {}
return this.each(function() {
//plugin code
};
}

also, you should probably use a CSS class in that highlighting plugin. If you’re reading this article and want to know about more best practises, etc. head to…

http://www.learningjquery.com/2007/10/a-plugin-development-pattern

for a fine tutorial written by Mike Alsup.