We have gone through different jQuery event methods, jQuery effects and animations in the previous posts. Now we are going to discuss about one of the most exciting aspects of jQuery, the jQuery Plugins. In this post, we will learn how to create a jQuery plugin.
Plugin is a piece of code that adds some kind of functionality to our applications. Plugins can be very helpful if you want to encapsulate a piece of behavior that you may want to use in different parts of your applications. jQuery provides several plugins that add specific functionality to our applications.
Here is the general syntax to create a jQuery plugin:
- jQuery.fn.pluginName = pluginDefinition;
pluginName is the name of the plugin you are going to create.
pluginDefinition is actual function definition, here you can define the intended operations.
Creating our first jQuery plugin
Let’s create a jQuery plugin to iterate through the div elements in our HTML code and changes the background colour of the divelements to green on clicking each div element.
jQuery.fn.greenify = function() {
return this.each(function(){
$(this).click(function(){
$(this).addClass( "highlight");
});
});
};
greenify is the name of our jQuery plugin. Using jQuery.fn makes this method available to all other jQuery objects. 'this' will be the jQuery object the plugin was called on. Instead of using $, you should attach the custom plugin to jQuery directly that will allow the users to use a custom alias via jQuery noConflict() method.
We save the above jQuery plugin with the name jquery.greenify.js. The file is prefixed with jquery. to eliminate the possible name conflicts with other files used in other libraries.
How to use jQuery Plugin
We have created our first plugin greenify and now we are going to show how to use this plugin.
To make the greenify plugin method available, we must include the plugin file (jquery.greenify.js) similar to jQuery library file in the head of the document.
We must make sure that it appears only after the main jQuery source file and before the custom jQuery script in our code.
<html>
<head>
<script src="https://www.journaldev.com/5506/jquery-2.1.1.js"></script>
<script src="jquery.greenify.js"></script>
<script>
// our jQuery code goes here
</script>
</head>
<body>
<!--html codes -->
</body>
</html>
The following code demonstrates how to use this plugin.
Note: I’m using jquery-2.1.1.js in this example.
jquery-plugin.html
<!doctype html>
<html>
<head>
<title>jQuery Plugin Demo</title>
<style>
div {
width: 60px;
height: 60px;
margin: 20px;
float: left;
border: 4px solid black;
text-align: center;
font-weight: bolder;
cursor: pointer;
}
h2 {
color: red;
font-weight: bolder;
width:400px;
background: white;
margin: 3px;
clear: left;
}
.highlight {
background-color: green;
}
</style>
<script src="https://www.journaldev.com/5506/jquery-2.1.1.js"></script>
<script src="jquery.greenify.js"></script>
<script>
$(document).ready(function() {
$("div").greenify();
});
</script>
</head>
<body>
<h2>Plugin Demo</h2>
<div>
click
</div>
<div>
click
</div>
<div>
click
</div>
</body>
</html>
In this example, you can see how the greenify plugin is included and called to execute the targeted operation.
$("div").greenify(): This single line of code iterates over all the div elements and changes it’s background color on clicking each div element.
You can see above plugin in action by clicking on any of the below div elements.
One of the important features in jQuery is chaining. You can do multiple tasks on a single selector with the jQuery chaining feature. To make our method chain-able takes only a single line of code.
$("div").greenify().text("JournalDev") : This single line of code can be used to chain a jQuery text() method to our code.
This is how we write a basic jQuery plugin. I hope you understood this tutorial to getting started with jQuery plugin development.
That’s all for now and we will discuss about different jQuery plugins in the coming posts.