I avoided learning how to create a jQuery plugin for quite a while because I thought it would be too difficult and/or too complicated to learn since I'm not a 'hardcore' programmer. Contrary to what I thought, it is actually pretty easy to create a plugin as long as you know the jQuery basics.
jQuery plugins are great because they allow you to quickly implement something relatively complicated with, normally, a single line of jQuery. They also normally allow you to change a few options very easily. Have you ever needed a plugin to do something (that it should be able to do easily) but it wasn't able to? I've had this a few times and it would be quite convenient to edit the plugin to my liking, which is possible once you know what is actually going on.
Let's get started.
The basics
This is what the basic structure of a plugin looks like.
// Place the plugin within an anonymous function to avoid outside problems
(function($) {
// Attatch the new method
$.fn.extend({
// Plugin Name
pluginName: function(options) {
return this.each(function() {
// Here is where you insert your normal code
});
},
});
})(jQuery);
redBorder jQuery plugin
The plugin I'm going to create is a plugin that creates a red border around the elements the user selects.
(function($) {
$.fn.extend({
redBorder: function() {
return this.each(function() {
$(this).css("border", options.border);
});
},
});
})(jQuery);
There we go, the plugin is done! As you can see, all that has changed is:
- pluginName has been replaced with redBorder
jQuery(this).css("border", "3px solid red");
has been inserted
Create a .js
file and paste/start writing your plugin within that file. After you have done that, create a link to that file within your HTML document.
Now, all you have to do is load jQuery, load the redborder.js
plugin and call the redBorder function to selected elements.
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.redborder.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("p").redBorder();
});
</script>
The output would look something like this:
Adding options
(function($) {
jQuery.fn.extend({
// Options is added within the brackets after function
// This informs the plugin that options will be used
redBorder: function(options) {
// Defaults options are set
var defaults = {
border: "3px solid red",
};
var options = $.extend(defaults, options);
return this.each(function() {
jQuery(this).css("border", options.border);
});
},
});
})(jQuery);
Now you can edit the border options, as long as it adheres to the 'border' properties syntax within the CSS.
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.redborder.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("p").redBorder({ border: "3px dotted green" });
});
</script>
The output of this would look something like this:
There you have it. A very simple jQuery border plugin with basic options. Click here to learn to create more advanced jQuery plugin options.