< Jquery Tutorial

Jquery Plugins

← Previous Next →

A plug-in is 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 plug-in available which you can download from repository link at https://jquery.com/plugins

How to use Plugins

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

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

Following example shows how to include jquery.plug-in.js plugin −

<head> <title>The jQuery Example</title> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src = "jquery.plug-in.js" type = "text/javascript"></script> <script src = "custom.js" type = "text/javascript"></script> <script type = "text/javascript" language = "javascript"> $(document).ready(function() { .......your custom code..... }); </script> </head> <body> ............................. </body> </html>

How to develop a Plug-in

This is very simple to write your own plug-in. Following is the syntax to create a a method −

jQuery.fn.methodName = methodDefinition;

Here methodNameM is the name of new method and methodDefinition is actual method definition.

The guideline recommended by the jQuery team is as follows −

  • Any methods or functions you attach must have a semicolon (;) at the end.
  • Your method must return the jQuery object, unless explicity noted otherwise.
  • You should use this.each to iterate over the current set of matched elements - it produces clean and compatible code that way.
  • Prefix the filename with jquery, follow that with the name of the plugin and conclude with .js.
  • Always attach the plugin to jQuery directly instead of $, so users can use a custom alias via noConflict() method.


← Previous Next →