Developing jQuery Plugins
If you are from web technology and using jQuery then
you might be knowing that jQuery third-party plugins provides a bevy of options
for enhancing our application user experience but sometimes we need to reach a
bit farther and write our code that could be reused by others by just placing
it on servers or even want to package it up as a brand new plugin. So, this
post will give you complete knowledge of jQuery Plugins Development.
Download the Project
Download the Project
If you are from web technology and using jQuery then
you might be knowing that jQuery third-party plugins provides a bevy of options
for enhancing our application user experience but sometimes we need to reach a
bit farther and write our code that could be reused by others by just placing
it on servers or even want to package it up as a brand new plugin. So, this
post will give you complete knowledge of jQuery Plugins Development.
In this post I’ll be developing a jQuery plugin to find
sum and average of data that is available on web page in HTML format. I’m not
going to use on-page embedded jQuery or JavaScript methods to find sum and
average whereas I’ll create separate jQuery plugin that can be used by anyone
by just placing its url reference as normal jQuery library or plugin does. Now
look at the image:
In the image, you can see the marked calculation that
is done by newly developed plugin. So, let’s get started and for this follow
the steps.
Step
1
In this step I’m going to create a new JavaScript file
and there will be definition of my jQuery plugin. Why JavaScript File? Because,
jQuery is nothing more than a JavaScript Library, so jQuery plugins always has
.js extension.
Now go ahead and create a file by name
“ITORIANjQueryLib.js” and add following codes.
(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 above code you can see two separate functions
$.sum = function(array)
{
and
$.average
= function(array) {
sum and average methods will accept an array, calculates
it and returning the result, rest codes simple are very friendly.
Step
2
In this step I’m going create the HTML document that
will consume above jQuery plugin by just library file reference and a method
call from on 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>
<td>1</td>
<td>46990</td>
</tr>
<tr>
<td>Microsoft Mouse</td>
<td>1</td>
<td>250</td>
</tr>
<tr>
<td>Microsoft Keyboard</td>
<td>1</td>
<td>350</td>
</tr>
</tbody>
<tfoot>
<tr id="sum">
<td>Total</td>
<td></td>
<td></td>
</tr>
<tr id="average">
<td>Average</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</div>
</form>
</body>
The output of the above HTML markups can be seen in
image (on the very top of this post). There is something you need to notice,
table has id attribute and its value is ‘productlist’, table footer has two
rows and each has id attribute and values are ‘sum’ and ‘average’. I’ll place
the calculated result in 2nd column of sum row and 3rd column of average row.
Step
3
Now you have a jQuery Plugin and a demo page to test this.
Now one more thing we need to do is to make the library call from the web page.
Here is the code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="ITORIANjQueryLib.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//Get SUM of Quantity
var $productlist = $('#productlist
tbody');
var quantities = $productlist.find('td:nth-child(2)').map(function (index, qty) {
return $(qty).text();
}).get();
var sum = $.sum(quantities);
$('#sum').find('td:nth-child(2)').text(sum);
//Get AVERAGE Price
var $productlist = $('#productlist
tbody');
var prices = $productlist.find('td:nth-child(3)').map(function (index, qty) {
return $(qty).text();
}).get();
var average = $.average(prices);
$('#average').find('td:nth-child(3)').text(average.toFixed(2));
});
</script>
In above code, you can find three script sections. First
script will call the jQuery basic library; second script will import our newly
created jQuery Plugin to the page and last script will make the function call
which is defined in our jQuery Plugin file.
Now all we set to distribute our newly created jQuery
Plugin to developer community by just placing this .js file on servers and
populate its URL.
You can download the project from here and test it
yourself.
I hope you like it. Thanks.
Nice stuff!
ReplyDelete