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

Migrating database from ASP.NET Identity to ASP.NET Core Identity

Image
As you know ASP.NET Core Identity (table structure) is different from what we had earlier in ASP.NET Identity. Actually the identity system which we have today with .NET Core is very mature and continuously evolved be it ASP.NET Membership, ASP.NET Identity 1, ASP.NET Identity 2 and now ASP.NET Core Identity. Recently I had to migrate few application to ASP.NET Core and similar its identity database. Because the table schema is changed, i had to re-think and create migration script which I would like to share with you today. It is very simple and easy, just three step and I had everything ready: STEP 1 : Change name of existing tables STEP 2 : Create ASP.NET Core Identity tables STEP 3 : Migrate data from old tables (ASP.NET Identity) to new tables (ASP.NET Core Identity) Script:  https://gist.github.com/itorian/c699e8534b392a6c726ec66c48100072 You should also watch my video, where I demoed migration.
Read More »

Customize User's Profile in ASP.NET Identity System

Image
Note: You should read this post instead, I found below walkthrough will not work on ASP.NET Identity 2. I will re-work on this post soon. In this post you will learn how to customize User’s Profile and add some more fields like FirstName, LastName, EmailID etc with ASP.NET Identity System. In my last post I listed some of the great new features introduced with Identity system .
Read More »

Lambda two tables and three tables inner join code samples

In this blog post you will learn inner join using lambda queries. There will be two samples, in first sample you will see how you can join two tables and in second sample you will see how you can extend even further to join three tables and so on. I will sample in-memory data, but the same implementation will work with IQueryable (lazy query) too. Here's the code snippet:- namespace ConsoleApp1 {     class Program     {         static void Main()         {             var table1 = new List<Table1>();             table1.Add( new Table1 { Id = 1, Name = "Name 1" , Address = "Address 1" });             table1.Add( new Table1 { Id = 2, Name = "Name 2" , Address = "Address 2" });             table1.Add( new Table1 { Id = 3, Name = "Name 3" , Address = "Address 3" });             table1.Add( new Table1 { Id = 4, Name = "Name 4" , Address = "Address 4" });   
Read More »