jQuery - Easy Plugins
jQuery - Easy Plugins
Written by Ian Elliot   
Monday, 11 February 2013
Article Index
jQuery - Easy Plugins
Chaining
Avoiding Collisions

There comes a point in every jQuery programmer's life when they look at some JavaScript they have just created and realize that it is time to integrate it with jQuery - in short to create a plugin. It turns out to be easier than you might expect!

Now Available as a Print Book: 

 

smallcoverjQuery

You can buy it from:

USA and World     Amazon.com
Canada            Amazon.ca

UK                Amazon.co.uk
France            Amazon.fr
Germany           Amazon.de
Spain             Amazon.es
Italy             Amazon.it

 

 

 

The Core UI

  1. Understanding jQuery (Book Only)
  2. The DOM And Selectors
  3. CSS Selectors
  4. The jQuery Object (Book Only)
  5. Filters
  6. Advanced Filters - Traversing The DOM
  7. Modifying DOM Objects
  8. Creating And Modifying The DOM
  9. jQuery Data
  10. Forms
  11. Function Queues
  12. Animation
  13. jQuery UI
  14. jQuery UI Custom Control - Widget Factory
  15. jQuery - Easy Plugins
  16. Getting Started With QUnit Testing

Now Available as a Print Book:

 

jquery2coverYou can buy it from:

USA and World   Amazon.com
Canada          Amazon.ca
UK              Amazon.co.uk
France          Amazon.fr
Germany         Amazon.de
Spain           Amazon.es
Italy           Amazon.it

 

 

 

Events, Async & AJAX

  1. Events, Async & Ajax (Book Only)
  2. Reinventing Events
  3. Working With Events
  4. Asynchronous Code
  5. Consuming Promises
  6. Using Promises 
  7. WebWorkers
  8. Ajax the Basics - get
  9. Ajax the Basics -  post
  10. Ajax - Advanced Ajax To The Server
  11. Ajax - Advanced Ajax To The Client
  12. Ajax - Advanced Ajax Transports And JSONP
  13. Ajax - Advanced Ajax The jsXHR Object
  14. Ajax - Advanced Ajax Character Coding And Encoding 

 

Plugins are simple ways to extend what jQuery does. If you create your plugin correctly then you will get additional benefits of being more closely integrated with jQuery. In particular, you can make your new facility work with jQuery chaining so that it can be part of a longer sequence of commands.

For the sake of an example, let's add the table generating function created in Getting Started With jQuery - Manipulating The DOM.

function table(n, m) {
 var table = $("<table>");
 var tbody = $("<tbody>");
 var row = $("<tr>");
 var cell = $("<td>");
 for (var i = 0; i < n; i++) {
  var tempRow = row.clone();
  for (var j = 0; j < m; j++) {
   tempRow.append(cell.clone().html(i+","+j));
  }
  tbody.append(tempRow);
 }
 table.append(tbody);
 return table;
}

This builds a table element with n rows and m columns which it returns as the result of the function. This is far too simple to really integrate into jQuery but imagine that it has lots of extra facilities implemented as properties and methods.

The Basic Plugin

A plugin is just a function - one function is one plugin and to keep things simple you should try and include as much functionality within each plugin rather than pollute the jQuery namespace with multiple functions.

To add your function to jQuery all you have to do is create a new property on jQuery.fn e.g.

jQuery.fn.myFunction= function definition

or

$.fn.myFunction= function definition

amd after this you can use your function with the usual jQuery syntax i.e.

jQuery().myFunction();

or

$().myFunction();

This is too easy!

If you want to fully understand what is going on then you need a little more explanation. However, if you don't want to know then skip to the next section.

The first question is why do we assign our new method to jQuery.fn and not directly to jQuery which is the object we are extending?

The answer is subtle.

The jQuery object that you usually reference with $ is just a constructor function for the jQuery function object that you actually use to get things done. Hence the jQuery.prototype property can be used to set all of the default properties for the jQuery function object that you use. So to add to the jQuery function object you simply add to jQuery.prototype or more usually jQuery.fn which is set up in the jQuery code to point to the same object as the prototype.

What this means is that if after you have added your new function you try to use

$.myFunction();

then you will get an error that jQuery doesn't have a property called myFunction. However

$().myFunction();

works because $() acts as the constructor for the jQuery function object which is returned in the usual way and this, does have a myFunction property via the prototype mechanism.

If you do want to add a property to the constructor then you add it directly. For example:

$.myFunction2=function{...};

adds the myFunction2 property to the jQuery constructor not to the jQuery function object. Following this you can call myFunction2 as:

$.myFunction2();

as it is a method of the jQuery constructor but not as:

$().myFunction2();

as it is not a property of the jQuery function object.

Why might you want to add a property to the constructor?

The answer is that if you need to create a plugin that doesn't operate on a jQuery object then adding it to the constructor makes this very clear. In other words you can not use selectors in $.myFunction2() but you can in $(selectors).myFunction2();

As already explained you don't need to know this to add a new plugin but it is interesting and might even help you debug things if anything goes very wrong.

The Table Plugin

So now we can create our table plugin which is easy:

$.fn.table=table;

Yes that's all we have to do. Of course in most cases you would define the function as an anonymous function e.g.

$.fn.table=function(n,m){....};

but you don't have to.

Now you can create a table just by writing

var myTable=$().table(2,3);

and then add it to a node in the DOM using

$("body").append(myTable);

jQuery Integration

This is easy but surely the table function should append the element it creates to any elements selected by the jQuery call? That is it would be better if you could write

$("body").table(2,3);

and have the new element automatically append to the body element as the last child.

The key to doing this is to know that when the table function is called the context, i.e. this, is set to the jQuery object returned by $("body"). What this means is that you can work with the jQuery object within your function quite easily.

To append the table to the DOM objects selected by "body" all you need to do is change the end of the function to read:

 this.append(table);
  return table;
}

This works perfectly but it has some consequences. You can now write:

$("body").table(3, 2);

and the table will be appended as the last child element of the body.
However you can now no longer call your function outside of the context of jQuery i.e. it can only be run as a plugin. To stop its direct use you need to either define it as an anonymous function or in an immediately invoked function expression IIFE - more of which later.

The next problem is that the append will add your table object to each of the selected elements in the jQuery object. That is if you do:

$("div").table(3, 2);

a 3 by 2 table will be added as the last child of each matching div.

This might be exactly what you want to do but if you want to take the alternative standard jQuery action of only effecting the first selected element you have to code this in your plugin.

So for example if you want to change the behavior to adding a table to the first element of the selection you might use:

 this.first().append(table);
 return table;
}

However, you have to be careful how to work with the selection -  it has repercussions as we will see.

justjquery



Last Updated ( Sunday, 29 January 2017 )
 
 

   
Banner
Copyright © 2017 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.