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


Introduction

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.

Comments

Post a Comment

Popular posts from this blog

Customize User's Profile in ASP.NET Identity System