jQuery Plugins

Plugins are a piece of code that are written in a standard JavaScript file.
They store the jQuery methods and can be included in the HTML files like the jQuery library.
For using the methods in the plugins, the plugin file is included which is similar to the jQuery library file in the <head> of the html document.
It appears after the main jQuery source file and before the custom JavaScript code.

Example : To include a plugin

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

Developing the plugins

Syntax for preparing a plugin:
jQuery.fn.methodName = methodDefinition.

Where,
methodName - name of the new method.
methodDefinition - actual method definition.

Guidelines for developing jQuery plugins

The Plug-in filename with jQuery is prefixed followed by the name of the plugin and conclude it with the .js extension.
By using the jquery. prefix, it eliminates any possible file name collisions.
The methods that are being attached must have a semicolon (;) at the end.
A jQuery object must be returned by the method unless it is explicitly noted otherwise.
To iterate over the current set of matched elements this.each should be used.
Instead of using the $ attach a plugin directly to jQuery so that the users can use a custom alias via the noConflict() method.

Example : Including a plugin

Step 1: Following is the plugin which is to be saved as jquery.pluginexample.js file.

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

Step 2: Write a program and include the above plugin

<html>
<head>
      <script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
      </script>
      <script type = "text/javascript" src="jquery.findproblem.js"></script>
      <script type ="text/javascript" language="javascript">
      $(document).ready(function()
      {
            $("div").warning();
            $("p").warning();
      });
      </script>
</head>
<body>
        <p>CareerRide</p>
        <div>It is an e-learning website</div>
</body>
</html>

Output:
CareerRide
It is an e-learning website

List of different plugins

Plugins	Description
PagePilling.js	It is used for 'pilling' the layout sections over one another and accessing them by scrolling.
Flickerplate.js	It is used for creating a slider which allows to cycle through images with animated arrows and dots navigation.
Multiscroll.js	It is used for creating split pages with two vertical scrolling panels.
Slidebar.js	It is used for quickly and easily implementing app style off-canvas menus and sidebars into the website.
Rowgrid.js	It is used for showing images in a row.
Alertify.js	It is used for showing alert messages in different format.
Progressbar.js	It is used for showing progress bar.
Slideshow.js	It is used for quickly and easily implementing a slide show of images or videos into the website.
Drawsvg.js	It is used for drawing SVG images.
Tagsort.js	It is used for showing tags.
LogosDistort.js	It is used for quick and easy implementation of mouse over effect on images.
Filer.js	It is used for quick and easy implementation of uploading files.
Whatsnearby.js	It is used for quickly finding the nearest places.
Checkout.js	It is used for easy implementation of check out for e-commerce websites.
Blockrain.js	It is used for embedding the classic Tetris game on the website.
Producttour.js	It is used for quick and easy implementation of help guide into the website.
Megadropdown.js	It is used for easy and quick implementation of drop down menu.
Weather.js	It is used for finding the information about weather details.

« Previous