If you are experienced with web technology and jQuery then you might also be familair with jQuery third-party plugins that provide a bevy of options for enhancing our application user experience but sometimes we need to reach a bit further and write code that can be reused by others by just placing it on servers or possibly you want to package it as an entirely new plugin. So, this article provides a complete introduction to jQuery Plugins Development.
Introduction
In the above image, you can see the marked calculation that is done by a recently developed plugin. So, let's get started and for this use the following the steps.
Step 1
In this step I'm going to create a new JavaScript file including a definition of my jQuery plugin. Why JavaScript file? Because jQuery is nothing more than a JavaScript library, so jQuery plugins always have a .js extension.
Now go ahead and create a file named "ITORIANjQueryLib.js" and add the following code:
(function($) {
$.sum = function(array) {
var total = 0;
$.each(array, function (index, value) {
value = $.trim(value);
value = parseFloat(value) || 0;
total += value;
});
return total;
};
$.average = function(array) {
if ($.isArray(array)) {
return $.sum(array) / array.length;
}
return '';
};
})(jQuery);
In the above code you can see two separate functions:
$.sum = function(array) {
and
$.average = function(array) {
The sum and average methods will accept an array, calculate and returning the result; the remaining code is simple and very friendly.
Step 2
In this step I'm going to create the HTML document that will consume the above jQuery plugin by just a library file reference and a method call from page logic.
<body>
<form id="form1" runat="server">
<div>
<table id="productlist">
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Creative Inspire 5.1 Speakers</td>
<td>4</td>
<td>16200</td>
</tr>
<tr>
<td>SONY VGN- P 23G Q / W</td>
Join the conversation! Your thoughts help the community grow.