jQuery Plugins

Ankur Mishra
9y
17.8k
0
0

Article

Google says that “Plugins are actual software programs on our computers that interface with the browser. This includes Flash and Java that have a browser hook so that any web page can get access to the code on your machine.”

So plugins are a piece of code. In jQuery plugins it is a code written in a standard JavaScript file. These JavaScript files provide useful jQuery methods that can be used along with jQuery library methods. We have an online jQuery Plugin Registry, you can download plugins from here.

After downloading a plugin, let's explain how to use it.

We use a plugin file similar to jQuery library file in the <head> of the document. This file is used before our custom JavaScript code and just after the main jQuery source file.

Example

Here in the Red border, we used a plugin. You can read more about the plugins from plugins.jquery.com.

You can also develop your own plugin.

It is very simple to write your own JavaScript file. Let's understand how to write our own plugin.

Syntax

jQuery.fn.methodName = methodDefinition;

Here methodName is the name of a method and methodDefinition is the definition of a method.

Note

Any method you use in plugins must have a semicolon (;) at the end. The method must return an object (jQuery), unless explicitly noted otherwise. Use 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. (for example jquery.plug-in.js). Always attach the plugin to jQuery directly instead of $, so users can use a custom alias via the noConflict() method (via the jQuery Team).

Let's create a plugin

Here is a plugin to have a warning method for debugging purposes. First we will create a JavaScript file and provide a name in jquery.plug-in.js format (let's say jquery.debug.js).

And we will use this plugin in an HTML file.

The output for this will be:

And then:

So this was a simple jQuery plugin for warning messages.

Visit here to find more plugins and use them in your website's app. Do more practice and develop more plugins.