Sunday, May 17, 2020

Introduction to jQuery Plugins



Hello guys! Welcome to a new section of my tutorial guide on jQuery. In this tutorial, i will be introducing jQuery plugins to you guys.

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

There are plenty of jQuery plugin available which can be downloaded from the jQuery plug-in web site Registry.

How to use Plugins

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

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

Example

Following example below 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 attach must have a semicolon ( ; ) at the end.
  • Your method must return a jQuery object unless noted otherwise.
  • You should make use this.each to iterate over the current matched set of elements. It results to a clean and compatible code that way.
  • 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 use the custom alias vis 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 jquery. prefix eliminates any possible name collisions with files intended for use with other libraries.

Example
Below is a small plug-in to have 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 my next tutorial post i will be discussing about the jquery PagePiling.js plug-in. If this tutorial post was in any way helpful to you, then you can make use of the share button to share this tutorial.

Feel free to ask your questions where necessary and your questions will be attended to 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.
Share:

0 comments:

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.