Introduction to jQuery Plugins



Hello dear readers! Welcome back to another edition of our tutorial on jQuery. In this tutorial guide, we are going to be introducing the jQuery plugins to you guys.

A plug-in is a piece of code that is written in standard JavaScript file. These files provides useful jQuery methods which can be used along with jQuery library methods.

There are many jQuery plugin that are made available which can be downloaded from the jQuery plug-in web site Registry.

How to use Plugins

In order to make a jQuery plug-in method available to us, we include plug-in file similar to jQuery library file in the <head> of the document.

We must always ensure it appears after the main jQuery source file, and before our custom JavaScript code.

Example

The following example shows how to include jquery.plug-in.js plugin -

<html  lang = "en">
     <head>
          <title>JQuery Example</title>
          <script  type = "text/javascript"
               src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">              
          </script>

          <script  type = "text/javascript"   src = "jquery.plug-in.js">
          </script>

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

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                     ........Your custom code.....
               } );
          </script> 
     </head>

     <body>
          ................................................

     </body>
</html>

RECOMMENDED POST: JQuery Utility Methods

How to Develop a Plug-in

It is very simple to write your own plug-in.

Syntax

Below is the syntax for creating a jQuery plug-in method -

jQuery.fn.methodName =  methodDefinition;

Here methodName in the above syntax is the name of the new method and methodDefinition is the actual method definition.

The guide line recommended by jQuery team is as follows -

  • Any method or function you add must have a semicolon ( ; ) at the end.
  • Your method must return a jQuery object unless if noted otherwise.
  • You should use this.each to iterate over current matched set of elements. It results to a clean and compatible code that way.
  • You have to always prefix the filename with jquery, follow that with the name of the plugin and round up with .js.
  • Always attach the plugin to the jQuery directly, instead of $, so users can make use of the custom alias through the noConflict( ) method.


For example, if we write a plugin that we want to name debug, then our JavaScript filename for this plugin would be -

jquery.debug.js

The use of the jquery. prefix gets rid of any possible name collisions with files intended for use with other libraries.

Example
Following is a small plug-in to have the warning method for debugging purpose. Make sure to keep this code in the jquery.debug.js file -

jquery.fn.warning =  function( )  {
     return this.each( function( )  { 
          alert( 'Tag Name:" '  +  $( this ).prop( "tagName" )  + ' ". ' );     
     } );
} );       

Below is an example showing the usage of the warning() method. If we put jquery.debug.js file in the same directory with the html page -

<html  lang = "en">
     <head>
          <title>JQuery Example</title>
          <script  type = "text/javascript"
               src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">              
          </script>

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

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    $( "div" ).warning( );
                    $( "p" ).warning( );
               } );
          </script> 
     </head>

     <body>

          <p>This is a paragraph</p>
          <div>This is a division</div>

     </body>
</html>

Output
Below is the output of the above example -

This is a paragraph
This is a division 


Alright guys! this is where we are rounding up with this tutorial on jQuery plugins. In our next tutorial, we will be discussing about the jquery PagePiling.js plug-in. If this tutorial was in any way helpful to you, then you can make use of the share button to share this tutorial.

Do feel free to ask your questions where necessary and i will attend to them as soon as possible.

Follow us on our various social media platforms available to stay updated with our latest tutorial posts. You can also subscribe to our newsletter to get our tutorial posts delivered directly to your emails.

Thanks for reading and bye for now.