jQuery Plugins and basics of jQuery Plugins

The jQuery-plugins and jQuery framework

jQuery is one of the well known light-weight cross-browser Web 2.0 Javascript library which is developed by a team lead by John Resig.  jQuery is build on top of Sizzle, which is  a pure Javascript CSS 3.0 selector engine. 

The key to the success of jQuery is to allow third-party developers to enhance the library by adding plugins.  Before we go into the detais of jQuery plugins, let's have a basic concept of jQuery and jQuery framework. The framework of jQuery can be represented by the following diagram:


There are six main components for jQuery libraries:
  1. Core & Utilities :- this component contains the core, utilities and data handling libraries which have been used in most of the part of the jQuery.
  2. DOM Engine :- DOM Engine operate on top of the Sizzle selector engine for handling selectors, processing trasversing, manipulation of DOM nodes and modifying attributes.
  3. CSS Engine :- Mainly for handing CSS.
  4. Ajax Engine :-  Provides function for Synchronized or Asynchronized communication between web servers.
  5. Event Engine :- Processing Events and manipulate event bubbling.
  6. Effect Engine :- Provide animation based function for adding effect to web page.
jQuery Plugins, on the other hand, interact with each of the components of the jQuery libraries to provide specify functionality to Web programming. The jQuery-plugins, jQuery components and Sizzle selector engine altogether form the jQuery framework.

Web programmers or Web designers, thus, can get the advantages from using the jQuery framework to provide a better interface with
better user-experience to end-users.


Using the jQuery-plugins

Most of the jQuery-plugins are released under certain license.  Web programmers or web designers should check carefully the terms described in the corresponding license.  In most of the cases,  web programmers or web designers can download the jQuery plugin they needed and post it to their own web sites.  Add the HTML script tag under the script tag for jQuery, for instance, if I want to use the jCaret library from http://www.examplet.buss.hk/jquery/caret.php
. First, download the jQuery library from http://www.jquery.com/ and save it as, say jquery.js in your website. Then download the jCaret plugin and save it as, say jcaret.js in your webiste. Then you can add the following code in the head section of a HTML file:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jcaret.js"></script>

Another example, if I want to use the "format plugin" from http://www.examplet.buss.hk/jquery/format.php . Download the file and save as "format.js", the following code should be placed in the head section of a HTML file.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="format.js"></script>


After that, you should specify which HTML nodes should apply the format plugin. For example, if I want to add a "format plugin" to force a text box with a class name "numeric" to accept number with 4 d.p. , the following Javascript code serve the function:

$(".numeric").format({precision: 4, autofix:true});

The first part $(".numeric") is the selector, jQuery's DOM Engine search all the DOM nodes which have the class name "numeric". The latter part is the plugin name, format({precision: 4, autofix:true});

Thus, the syntax for using a jQuery-plugin is

$(selector).plugin(parameters);

It is common to invoke the function when the page is ready, thus the Javascript should look like the following:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="format.js"></script>
<script type="text/javascript">
$("document").ready({
  $(".numeric").format({precision: 4, autofix:true});
});
</script>

You can try the code using the trycode editor too, http://examplet.buss.hk/trycode/index.php?file=jQuery-format-float-number


Prevent subsequent inclusion of jQuery  library after any jQuery-plugin 

This may happen when we try to use jQuery-plugins in "include files" in PHP or ASP. So, please be reminded that file for jQuery-plugins always follow the jquery library file.  Any subsequent inclusion of jquery library will "clear" all the plugins that you have included before.  The jCaret  will not work in following code:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jcaret.js"></script>
<script type="text/javascript" src="jquery.js"></script>


Understanding specific jQuery-plugin

In order to understand specific jQuery-plugin, you should study the corresponding document carefully.  And you should be able to read some basic jQuery code examples before you try using one of these jQuery plugins.  Thus the understanding of jQuery is very important.  If you want to learn more about jQuery, please always visit the jQuery homepage: http://www.jquery.com/


How to write a jQuery-plugin

If you are a beginner in jQuery, it should be better if you start from modifying a template.  The jQuery output plugin is a very very simple example showing how to write a jQuery-plugin:


(function($){
  $.fn.output=function(d){
    return (this.is(":text")) ? this.val(d) : this.html(d)
  }
})(jQuery);

You can modify this "output plugin" and save it as an external Javascript file for inclusion.  If you are interested in the detail of how the code works, you can go to: My first jQuery plugin