We available for hire! — Need help with a web or mobile project?
From yensdesign we develop technology projects based on web apps, mobile apps, consulting and databases. We are young and hard workers, passionate about innovation and focused in new technologies.If you want to ask for a budget, we hare available for hire!.
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:
[code language="html"][/code]
So now we must create our plugin named first in a file js named jquery.first.js:
[code language="javascript"]
// jQuery object
jQuery.first = function(message){
alert(message);
}
// jQuery.fn object
jQuery.fn.first = function(message){
this.each(function(){
alert(message + " " + this.id);
});
}
[/code]
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:
[code language="javascript"]
$(document).ready(function(){
$.first("hi there!");
});
[/code]
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:
[code language="javascript"]
$(document).ready(function(){
$("body > div").first("Hi division");
});
[/code]
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:
[code language="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:
[code language="javascript"]
// jQuery object
jQuery.inputHighlight = function(color){
$("input").each(function(){
$(this).focus(function(){
$(this).css({"background" : color});
});
$(this).blur(function(){
$(this).css({"background" : "white"});
});
});
}
[/code]
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:
[code language="javascript"]
$(document).ready(function(){
$.inputHighlight("#a6cdec");
});
[/code]
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.
Totally awesome silver rings is available at LusterForever jewelers stores.
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…
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.
download zip link is broken.
Sorry! It’s fixed now
[...] How to create a plugin for jQuery [...]
[...] How To Create A Plugin For jQuery [...]
[...] How To Create A Plugin For jQuery [...]
[...] How To Create A Plugin For jQuery [...]
Hey, nice tips. I’ll buy a glass of beer to that man from that forum who told me to go to your site
thx for great basic jquery plugins tutorial
Good post.Perfect!
This is in all probability the most effective article that ever cross my reference. I do not see why anybody should disagree. It may be too simple #for them# to comprehend…anyway nice work i am coming back right here for Extra Great Stuff!!
This is probably the best article that ever cross my reference. I don’t see why anyone ought to disagree. It may be too easy #for them# to comprehend…anyway nice work i am coming again right here for Extra Great Stuff!!
a href=http://watchlatestmovies123.com>watch movies online
you must watch it
cool stuffs are there
all are >>>>>>>>>>>freeeee<<<<<<<
if it looks like spam delete it
wish u happy xmas
[...] How To Create A Plugin For jQuery [...]
i really like that. thanks for sharing
Posts like this are whatt keep me coming back for more. Thank you!
Cool Blog, where did you get the cool design? I will follow you
Wow, this is really nice post.
And I really like your post and web design.
[...]below you’ll see my links page http://logprosoft.com/2011/01/legit-online-jobs/ with some good websites that I think you should definitely visit[...]…
great post, thanks for the share
cool thanks im gonna try this!!
Database for webmasters SQL – (done, just download and install)
Buy MySQL databases for your website now!
Check our databases for sell.
http://stores.lulu.com/store.php?fAcctID=9699
very informative thank you…
I really liked this post. This is about the best things I have seen, you take the time to really write good stuff!
Hi, dear sir. What an interesting article, would you mind reading my blog to?
From this tutorial i get some idea about write my own jQuery.
Thanks
Die erchste, intresting post! Thank you very much!
Nice post, check my blog at: http://www.fritids-kläder.se/
Great thanks
enjoy thanks youuuuu???
good post very interesting to gras the contribution to knowledge
Nice article, very interesting!! Write more about this please.
Wow, never new this before! Keep writing articles on your blog
Check these links for good music
great sharing! thanks.
[...] Visit Tutorial → [...]
[...] Visit Tutorial → [...]
Hey that looks awesome
Thanks for sharing..
Cool article!!
Hey, Great content. I just love this site so much new stuff….I have included some links that I think your readers would like check out. Thank for the great content!
thank for sharing. i found on page like this
Thanks for posting !
Seen mypage when u have free time: http://thichlamdep.com