Copyright © tutorialspoint.com

jQuery - Plugins

previous next


Advertisements

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 http://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:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.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:

For example, if we write a plugin that we want to name debug, our JavaScript filename for this plugin is:

jquery.debug.js

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

Example:

Following is a small plug-in to have warning method for debugging purpose. Keep this code in jquery.debug.js file:

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

Here is the example showing usage of warning() method. Assuming we put jquery.debug.js file in /jquery subdirectory:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script src="/jquery/jquery.debug.js" type="text/javascript">
   </script>

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

   });

   </script>
</head>
<body>

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

</body>
</html>

This would produce following result:

Tag Name:"DIV"
Tag Name:"P"

To understand it in better way you can Try it yourself.


previous next

Copyright © tutorialspoint.com